Jump to content

Archived

This topic is now archived and is closed to further replies.

jmad

Text box in same section as Menu causes menu to drop

Recommended Posts

jmad

on caramcmillan.wpengine dot com I have a text box and then a menu.  When the browser width is reduced there should be plenty of space for the text box items and mobile menu but the menu drops to the next line.  I think it has something todo with display: block but I can't seem to get the correct combination to keep this from happening.  What would be the best solution?

Share this post


Link to post
Share on other sites
greenfly

Hello jmad

 

Do you mean this 

 

http://screencast.com/t/dY8GIAr8fJ

 

The Media Query is affecting the columns and the break point of 768px changes the width to 100%. 

 

You can use CSS to override this 


The answer to many issues can be found by searching in the forum before posting as someone else  may very well have had the same problem before you have.  Also, reading the documentation can help you gain a good understanding of how everything works. 

 

Please do not send me private messages. Occam's razor - The principle states "Keep things simple!"

Share this post


Link to post
Share on other sites
jmad

The screen cast link was inactive.  Could you repost and possibly give me an example of the CSS to correct?  I tried changing the breakpoint but do I need to change display as well? 

Share this post


Link to post
Share on other sites
greenfly

 I tried changing the breakpoint but do I need to change display as well? 

 

Could you let us know how you have tried this already please?


The answer to many issues can be found by searching in the forum before posting as someone else  may very well have had the same problem before you have.  Also, reading the documentation can help you gain a good understanding of how everything works. 

 

Please do not send me private messages. Occam's razor - The principle states "Keep things simple!"

Share this post


Link to post
Share on other sites
jmad

Basically, I tried to change the components width within the section.  @768 I was trying to make the width 50%.  I never really got the result I was looking for...but got something to happen.  At 768 I wanted the logo and navigation to stay on the same line but the nav is dropping below.

Share this post


Link to post
Share on other sites
Danny

This is because both are separate sections, so of course they're going to be positioned on a newline. If you want to override this you're going to need to use custom CSS for each section using media queries. You could try something like reducing the width and display inline, and/or using floats.

However, this isn't something we provide support for, as it is user generated.

 

For me personally, the simply thing for you to do would be to just use one TextBox or MediaBox section and use the grid. However, some additional CSS may be required.


Please search our forums, before posting!

Share this post


Link to post
Share on other sites
jmad

What do you mean by use the grid?

Share this post


Link to post
Share on other sites
jmad

Gotcha...was thinking in a different direction...thought there was a DMS tool I missed or something. 

Share this post


Link to post
Share on other sites
Danny

Yeah, I would personally use just use a MediaBox and HTML, this way you have full control over how your logo and menu display.


Please search our forums, before posting!

Share this post


Link to post
Share on other sites
cinnamon

Hello - I think I have the same question so thought I would ask here - I have put a logo in a text box (span 2) and a navi box (span 10) on the same line.  

 

At 767px, the mobile icon appears (great!) however, because the "span" section width goes to 100%, it jumps down below my logo.  I would love to adjust the width of these spans for only this element so that the hamburger stack appears visually on the same horizontal level as the logo.  I have tried calling it out in a media query in my css, but I can't seem to get it to work. I am possibly way off base, but I've tried a few things with no luck:

 

#textbpxiso2v29 .editor-row [class*="span"] {width: 50% !important; float: left;}
#naviuri0mh0 .editor-row [class*="span"] {width: 50% !important; float: left;}

 

Or maybe there is a better way to set up the elements?  I want my logo to have a hover state, so that is why I put it in a separate text box as a background image.

 

Here is the site I'm working on:

dev.leahapplewhite.com

 
I appreciate the help!

Share this post


Link to post
Share on other sites
Danny

cinnamon - You will need to use @media queries to customize the style when viewed on a mobile device. You will likely need to use inline and float left on your media queries. For more information on media queries see this article - http://cssmediaqueries.com/what-are-css-media-queries.html


Please search our forums, before posting!

Share this post


Link to post
Share on other sites
cinnamon

Thanks Danny - I forgot to mention, I am already using Media queries, but can not get the css to stick.  I can not seem to override the bootstrap css of .row [class*="span"].  Here is what I have and I have tried lots of other variations!

 

@media screen and (max-width: 767px) {
#textboxuxi2v29 .editor-row [class*="span"], #textboxuxi2v29 .row [class*="span"] {width: 50% !important; float: left;}
 
#naviuri0mh0 .editor-row [class*="span"], #naviuri0mh0 .row [class*="span"] {width: 50% !important; float: left;}
}

 

I appreciate any clarifications you can offer!

Share this post


Link to post
Share on other sites
Danny

You do not need to override the [class*="span], just use the sections ID and use the following:

 

width: 48%

float: left

display: inline

 

Something like that.


Please search our forums, before posting!

Share this post


Link to post
Share on other sites
cinnamon

Thanks Danny!  I tried a simple solution at first and I was missing the "display: inline;" maybe that was the problem.  Then I just kept digging myself deeper and deeper in more complicated css!  :)

 

Is it possible edit my previous message and remove the url that I posted in it?  I don't really want it public right now...

 

I really appreciate the help and your time!

Share this post


Link to post
Share on other sites
cinnamon

Hey Danny - I just had an unfortunately realization....if I do it the way I've done it,

 

@media screen and (max-width: 767px) {
#textboxuxi2v29 {width: 48%; float: left; display: inline;}
#naviuri0mh0 {width: 48%; float: left; display: inline;}

}

 

I will have to call this css out separately for every single page, as the textbox and navi ids are different every time (even when I use a custom page template on several pages).  Unfortunately, the site will have several pages and this seems way to cumbersome.

 

I tried adding a Custom class to the text box and navi box, but this didn't help:

 

@media screen and (max-width: 767px) {

section.InteriorMainNav, section.InteriorLogo {width: 48%; float: left; display: inline;}

}

 

So, there has to be a better way - have I just built the whole nav area in the wrong way in the first place?  Would it somehow help if my text box and navi box were in columns also?  Or???

 

Any insights are appreciated!!

Share this post


Link to post
Share on other sites
cinnamon

My sincerest apologies!  I originally avoided the "Header Section" because I didn't want any global options for nav, but now I realize that I do want a global nav on every page but one, so I will just call that out differently.  I am sorry to have caused you more work!  

Share this post


Link to post
Share on other sites
Danny

No problem.


Please search our forums, before posting!

Share this post


Link to post
Share on other sites

  • Similar Content

    • Lisa Haran
      By Lisa Haran+
      Hi 
      I have a map here http://www.iloveoffset.com/maps/
      I want to add several pointer locations to the map, but when I do they do not appear.
      On this map there are 2 pointer locations and as you can there is only one visible.
      Earlier today I added 7 and could only see 4 so there is something odd going on.
      My theme is up to date
    • clj182
      By clj182+
      Hello,
      I've been having trouble unlocking the template section for past couple of weeks. When I try clicking nothing happens. 
      I've deleted my custom css and removed plugins. Im down to having only the following plugins:
      Akismet
      Contact Form 7
      DMS Professional Tools
      Pagelines Updater
      WooCommerce
      It was working fine before i have no idea what's going on with it.
    • flourishdesignstudio
      By flourishdesignstudio+
      My DMS 2 site http://www.heart-stone.com/ will not save any new custom css... I can still edit templates and publish those but any custom css that I enter never saves.
      All WP files, themes, and plugins are up to date. 
      Any thought about what might be causing this?
    • flourishdesignstudio
      By flourishdesignstudio+
      Is there a way to edit the custom CSS via FTP? I know I can edit the custom code in the Chrome editor but is there a file path I can use to find and edit the CSS directly from our FTP?
      Thanks in advance for the help!
    • nizami
      By nizami+
      Using navbar section with correctly configured WP menu to display main navigation at https://elenaangel.com. 
      All fine in desktop viewport. Menu displays twice in hamburger mode. How to fix this please? 

×