Main menu sub items float off screen


In my main menu I have a second level sub-menu on one item. On the non-mobile site, the secondary menu items are floating off screen to the left. I’d like to change the float to right so the sub-items can be read.

Thank you.

Hi there,

Easiest way to fix this is to set blog menu to be immediately after home menu link, but in case that you want to keep menu items like this, you should be able to fix this with custom css code below:

#mainnav li:hover > ul ul {
    left: initial;
    right: 100%;

If you are using latest WordPress, you can apply the code from Appereance > Customize > Additional css or you can use some plugin like this one

Best Regards!


That CSS didn’t change the layout.

In Custom CSS, that code causes red lettering, which tends to show errors in coding.

Hi again,

Nope, actually error in the code is caused further up, try adding provided code at the top of custom css field, or fix your other code. See result with live edit when previously provided code is applied

All the Best!