Need help? Check out our Support site, then


iPad view - main nav menu splitting onto two lines

  1. Hi,

    When I view the website on an iPad, the main navigation menu splits onto two lines.

    Is there anyway to keep it all on one line via CSS?

    The blog I need help with is sydesiderata.com.

  2. One possible solution might be to reduce the space between top level main menu items in the Twenty Twelve theme using a media query that targets browser widths between 481 and 900 pixels. Here is an example you can try out:

    @media screen and (min-width: 481px) and (max-width: 900px) {
    	.main-navigation li {
    		margin-right: 6px;
    	}
    }
  3. Hi designsimply,

    Thank you for your assistance. That definitely worked but the items are now a little too close together. What are the variables in the code that I could change, to space the items slightly further apart?

    Once again - thank you!

  4. Yep! Try adjusting the 6px value in the example until you find something you like.

  5. Perfect - life saver!

  6. :)

Topic Closed

This topic has been closed to new replies.

About this Topic