Menu Bar - Stacking items


Is there a way to move my logo over so that my menu items do not stack on top of themselves (I want them all in ONE row). Or any other suggestions to get all my menu items on one line?

I deleted one of my menu items for now since my website is live, but here is what it looked like with all my menu items are there:


You should be able to fit all items by reducing menu items left and right padding with css code below:

.main-navigation li {
    padding: 10px 10px;

Apply it from Appearance > Customize > Additional CSS field and result should look like this . Default padding is 10px 20px, so with above code you will reduce left and right padding for each menu item from 20px to 10px, and you can reduce it even more if needed.

Best Regards!

1 Like


I also have this issue of putting all my menus on one line.

I tried following the solution given here, But I can find the additional custom css field

Appearance > Customize > Additional CSS field.

I only see widgets. Kindly help.

Hello there,

Are you running the newer version of WordPress?

If still, it doesn’t appear, alternatively you can use an additional plugin for the same purpose like Simple Custom CSS.

I hope this reply helps. Let us know in a new topic if you have any other questions we can help with.

Stay safe.
Have an excellent day :slight_smile:

aThemes Support