Make One Menu Item a Button?

[Ellen]

How can I make one menu item look like a button? I tried adding a CSS class for the menu item, but that doesn’t seem to work right. It changes the entire background, but I would like to see the borders and not have the color cover the whole menu. I need it to look like the attached.

Attachments:

You must be logged in to view attached files.

[Bidur]

Hello Ellen,

Please share the site url and locate the change you want to make.

Best Regards,
Bidur

[Ellen]

Hi Bidur,

The site is still in development (www.popupfunds.com). I’m trying to create a login button on the menu bar. I’d like it to be a different color background like the example I provided so it will stand out and look like a button. It seems the the CSS classes field in the WordPress menu options doesn’t really work. Can you give me the CSS classes that control the menu items?

Ellen

Side question: Has this theme been tested for the upcoming Gutenberg release?

[Bidur]

Hi,

You can add different menu style by giving separate class to single menu item. Please refer to this screenshot to add class in menu item. Then you can design accordingly. For example if you add login_menu class then add following css in additional css bar in additional css section in customizer.

.login_menu{
border: 1px solid #000;
}

Thanks

[Author]

Posts