asked on

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?

Tom Beck

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.

weikelbob

ASKER

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.

ASKER CERTIFIED SOLUTION

Tom Beck

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial