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

NavBar misbehaves ata certain browser widths

4 posts in this topic

I recently added a new link to the NavBar on this site and I found that when I resize the browser screen to between 800-900 pixels (prior to the mobile nav elements displaying) the text links drop down and "disappear" on the white background.

See screenshot with upper browser nav behaving; lower browser nav misbehaving...



Share this post

Link to post
Share on other sites

Hi there, the link provided for the screenshot doesn't seem to load.


The test links will drop down into another line as the responsive layout kicks in and the screen restricts, they shouldn't go out of view though. Can you send us a link to the live site.

Share this post

Link to post
Share on other sites

Here's the image again:


And the site URL is

Share this post

Link to post
Share on other sites

Hi there, as you have quite a few labels in the menu they fall below the logo when the screen is resized until the mobile menu kicks in. You can either edit the css to color the entire navbar section like below, that will move the black down with the text when it resizes to keep the navbar intact. Or edit the media query to adjust the width that the mobile menu kick in to make it display sooner etc.


Screenshot -


.section-navbar {
    background: none repeat scroll 0 0 #000000;

Share this post

Link to post
Share on other sites

  • Similar Content

    • navbar in mobile view
      By micstepl+
      make NavBars (each) choose-able, to break in mobile view "above content" OR "below content"
    • DMS 2 Navbar menu repeats in hamburger mode
      By nizami+
      Using navbar section with correctly configured WP menu to display main navigation at 
      All fine in desktop viewport. Menu displays twice in hamburger mode. How to fix this please? 

    • Scroll Nav in Safari not properly sticking to NavBar
      By janpeeters+
      I'm using the Scroll Nav extension on It works mostly great but in Safari 9.0.1 it jumps too high when it sticks. Firefox and Chrome latest versions work just fine in the current setup.
      So I'm wondering if the developer of the plugin is around to give me a clue as to how to fix this? I've thought of using the CSS Classes of the Pagelines Pro plugin but couldn't find a way to get it working.
      Thanks for any suggestions.


    • Change NavBar Menu alignment and font size
      By saur0+
      Hi, I have managed to change the size of the navbar logo to 75px, but I now want to change the size of the font on the menu (20px) and align the menu vertically to the bottom (so it is in line with the bottom of the logo image). I've been playing around with the CSS but can't seem to get it right, if anyone could give me some pointers it would be much appreciated. 
      The site is if you want to take a look at the source. 

    • NavBar Parent links not clickable
      By greatthingsllc
      I have used the NavBar (Content Width) with blue background color selected.   The Parent Links are not clickable, only the child links.   I have tried with "Activate DropDown on Hoover" both selected and unchecked. 
      Only the NAVI (Content Width) allows the parent links to be clickable, but you can not select a background color.    The background color is a requirement from the end user.