Archived topic

Split menu items into two sections

7 replies · Started by Steig on October 16, 2018

Viewing posts 1–8 of 8

October 16, 2018 at 8:26 am #702335

Hello,
I have 5 menu choices in my primary navigation bar. I'd like to split those up so that three of them are on the left side of the page and two are on the right. Can you please tell me how to do that?

Thanks

October 16, 2018 at 8:35 am #702349

Hi there,

go to Appearance > Menus - under Screen Options check CSS Classes.
Now select the menu items you want to move to the right and in the CSS Classes field add:

menu-item-float-right

October 16, 2018 at 7:36 pm #702723

Awesome; thank you

October 17, 2018 at 1:46 am #702900

Glad to be of help.

January 7, 2019 at 10:09 am #775511

Thanks for this. That worked great. I also used this plugin and was able to use icons in place of text. BUT, how do I change the padding/margin on just the items on the right side so the icons are closer together? Here is my site - https://katevale.com/.

January 7, 2019 at 10:30 am #775533

Hi there,

try this CSS, it will close off the space, remove the hover background in place of a little scaling:

.main-navigation ul li.menu-item-type-custom a {
    padding-left: 0;
    padding-right: 0;
    margin-right: 1em;
}
.main-navigation ul li.menu-item-type-custom:hover a {
    background-color: transparent;
    transform: scale(1.1);
}

January 7, 2019 at 10:35 am #775537

So amazing! Thanks for the quick response! Love GeneratePress!

January 7, 2019 at 10:49 am #775549

You're welcome - glad to be of help :)

This archived topic is closed to new replies.

Start building better websites today.