• 0
Sign in to follow this  
Followers 0

NavBar misbehaves ata certain browser widths


Question

Posted · Report post

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...

 

skitch.png?resizeSmall&width=832

Share this post


Link to post
Share on other sites

3 answers to this question

  • 0

Posted · Report post

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
  • 0

Posted · Report post

Here's the image again: http://d.pr/i/LC27

 

And the site URL is www.cinephiled.com

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

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 - http://screencast.com/t/dN1hHpWWq

 

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

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!


Register a new account

Sign in

Already have an account? Sign in here.


Sign In Now
Sign in to follow this  
Followers 0