iPad view – main nav menu splitting onto two lines

  • Author
    Posts
  • #1327236

    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.

    #1327483

    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;
    	}
    }
    #1327488

    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!

    #1327489

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

    #1327490

    Perfect – life saver!

    #1327491

    :)

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