iPad view – main nav menu splitting onto two lines

  • Author
  • #1327236


    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.


    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;

    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!


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


    Perfect – life saver!



The topic ‘iPad view – main nav menu splitting onto two lines’ is closed to new replies.