Menu Link as Button

Hi @droyed,

Here’s how to do it:

1. Go to Appearance → Menus.
2. Select the main menu from the dropdown, and click the “Select” button.
3. Click the “Screen Options” tab in the top right corner of the screen, and check the checkbox labeled “CSS Classes”.
4. Expand the menu item you want to turn into a button, and in the “CSS Classes” field, paste “button” (without quotation marks).
5. Click the “Save Menu” button.

The menu item will now be styled as a button, although only the text will be clickable and the rest of the menu will look a bit misaligned. Go to Appearance → Customize → Additional CSS and add the code below to spruce it up a bit:

.main-menu-alt {
	align-items: center;
}

.main-menu-alt li.button {
	padding: 0;
}

.main-menu-alt li.button > a {
	padding: 1.6rem 2rem;
    text-decoration: none;
}

Let me know if that does it.

— Anders

• This reply was modified 3 years, 8 months ago by Anders Norén.