iPad view – main nav menu splitting onto two lines

sydesiderataclassic · Member · Jun 28, 2013 at 12:37 pm
Copy link

Add topic to favorites
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: (visible only to logged in users)
designsimply · Member · Jun 28, 2013 at 9:05 pm
Copy link
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;
	}
}
```
sydesiderataclassic · Member · Jun 29, 2013 at 1:09 am
Copy link
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!
designsimply · Member · Jun 29, 2013 at 1:16 am
Copy link
Yep! Try adjusting the 6px value in the example until you find something you like.
sydesiderataclassic · Member · Jun 29, 2013 at 1:21 am
Copy link
Perfect – life saver!
designsimply · Member · Jun 29, 2013 at 1:39 am
Copy link
:)

No items found.