Font size is interfering with mobile menu

Hello all,

Here’s the site I’m working on: (still :slight_smile: ).

When you shrink the screen down to 680 pixels or smaller, the mobile menu is activated. You’ll notice, however, that the arrows/accordion are not lined up correctly and that one of them isn’t even working.

I found out this is caused by me setting the font size for the menu to 13px in this section of the style.css file:

.genesis-nav-menu {
clear: both;
color: #333;
font-family: ‘EB Garamond’, serif;
font-size: 13px;
letter-spacing: 2px;
line-height: 1.5;
text-transform: uppercase;
width: 100%;

If I set it to 14 or above, the menu works perfectly. I would rather keep it set to 13px, if possible, so I was wondering if someone could help me understand why this is happening. Do you see a way to fix this?

Thanks so much!

The arrows are floated and when you reduce the size they snag on each other so you just need to clear them.

.genesis-nav-menu.responsive-menu > .menu-item-has-children:before {   
 clear: right; }

Or you could contain the floats in your list.


 .genesis-nav-menu.responsive-menu > li:after{
content:" ";

or both.

Thank you so much, Paul. I totally missed that.

I appreciate your help once again! :slight_smile:

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.