Font size is interfering with mobile menu

[susannelson]

Hello all,

Here’s the site I’m working on: http://goo.gl/MCRTFG (still ).

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!

[PaulOB]

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.

e.g.

 .genesis-nav-menu.responsive-menu > li:after{
content:" ";
clear:both;
display:block;
height:0;
}

or both.

[susannelson]

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

I appreciate your help once again!