CODEWITHSUNDEEP
cssresponsive-designwordpresswordpress-theming
user1724434
user1724434

Reputation: 698

CSS - prevent menu from breaking onto second line

The menu breaks unto a second line when the browser is at about 1180 width. How can I prevent it from doing that?

http://goo.gl/5UpJSv

Upvotes: 0

Views: 2858

Answers (3)

Beth Elwell
Beth Elwell

Reputation: 81

Hamburger menus are the ones that you have used with a button to show the navigation once the breakpoint hits 1100px on your site. Its called a hamburger menu because of the 3 horizontal lines on top of each other.

As DNReNTi says you could do this but to keep your chosen layout and, preferably, you can either change your breakpoint to be more forgiving or apply the following style changes:

.cap-header-fixed .menu > li, .cap-primary-menu .menu > li {
display:inline-block;
padding: 0 8px;
}

Also note, you have set menu icon (hamburger menu) to appear (display:block;) at @media only screen and (max-width: 1100px) and (min-width: 0px) and the main menu to display at @media (min-width: 1100px). Change this to 1101px or you will find at 1100px both the hamburger and desktop menus will both be displayed.

Hope this helps :)

Upvotes: 0

DNReNTi
DNReNTi

Reputation: 521

Thats because your breakpoint sets the .contaner div-s width to 970px. Now you have wo options:

  1. Apply the hamburger menu on this layout (not just the lower resolutions).
  2. Edit the structure a little: smaller margins, smaller padding, smaller font size.

Upvotes: 0

Aaron
Aaron

Reputation: 10450

You'll need to change the breakpoint for the burger menu to 1200px or you could increase the width of the container:

.container {
    max-width: 1140px;
}

Upvotes: 1

Related Questions