Responsive menu content

Support
#1

Hi,

We’ve created a header using pro. When the screen size is small the main navigation drops to a burger menu and then a content area appears with the menu. Because We’ve built in a button, we didn’t use the standard navigation element, but rebuilt this in a content area.

The problem we have is that on the iphone, the text in this menu overlaps each other. Is there a way to drop down each line as the screen get smaller.

I thought I’d sorted this issue by reducing text size but apparently not.

Thanks

Alex

#2

Hi There,

Thank you for writing in, you can add this on the Theme Options > CSS

@media (max-width: 480px) {
	nav.vertical > ul > li > a {
		line-height: 1;
	}
}

Feel free to adjust the 1 value.

Cheers!

#3

Thanks, that worked for the NAV menu.

Would it be the same solution for the button? The text within the button drops out of the button at the smallest screen sizes.

Ta

Alex

#4

Hi Alex,

To fix the button, you can add this in Theme Options > CSS

@media (max-width: 480px) {
nav.verticalCTA > ul > li > a {
    font-size: 20px;
    letter-spacing: 0;
}
}

Hope that helps.