Responsive menu troubles

At www.oakhonesty.com the menu looks good when the site width is 1140px. But on an iPad (1000w) the menu jumps down under the logo. I want the menu to stay to the top right at least until the screen is smaller than 1000w. How do I do this?
LVL 7
weikelbobAsked:
Who is Participating?
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

Tom BeckCommented:
It does not fit. It's as simple as that. You have the width of the menu fixed at 790px and the logo is 250px wide for a total of 1040px. Bootstrap reduces the width of the container to 970px wide when the browser is 1200px or less. 1040px does not fit into 940px so the menu moves down.

What you can do is remove the fixed 790px width for the menu and add a media query to reduce the font size of the menu anchors so the menu takes up less space and so fits within the 940px limits. Something like:

@media screen and (max-width: 1200px) {
  .navbar-default .navbar-nav > li > a {
    font-size: 13px;
  }
}

The menu remains up top when the font-size is 13px instead of 16px and the 790px width is removed.

You can also create a media query to reduce the logo image width to something less than 250px and create more room that way.
0
weikelbobAuthor Commented:
Could you write and explain the media queries for the menu to shrink (as above) and the logo to shrink a little and explain how to use them? I'm new to media queries.
0
Tom BeckCommented:
It's fairly straightforward. You have a stylesheet full of styles defined like this

  .navbar-default .navbar-nav > li > a {
    font-size: 16px;
  }

Think of those as your default styles for your page.

But 16px font is too big on your page for screens less than 1200px wide. Media queries allow you to specify a different font size if certain conditions are met like for screens less than 1200px wide.

@media screen and (max-width: 1200px) {
  .navbar-default .navbar-nav > li > a {
    font-size: 13px;
  }
}

You can even load entirely new stylesheets based on (for example) screen width like this:

<link rel="stylesheet" media="screen and (max-width:1200px)" href="my_1200px_styles.css">

There are other media types not just screen (like print for example) and other media features besides width and height. It's a big subject for a single post but fortunately there's a ton of information online for media queries. Here's a good starting point.
0

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
Web Development

From novice to tech pro — start learning today.

Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.