This can be done in a few steps. First, add a new menu item and give it a CSS class of “button” – screenshot
Then add the following CSS to your site:
@media all and (min-width: 800px) {
.menu-primary-items .button a {
background: red;
color: white;
transition: background 0.2s;
}
.menu-primary-items .button {
float: right;
}
.menu-primary-items .button a:hover {
background: green;
}
}
Please copy and paste that code into the Additional CSS section in the Live Customizer (Appearance > Customize), and it will take effect right away.
Thank you, Ben.
Adding a new menu item doesn’t give me the option to create a CSS class. Just a URL and a navigation label. Any suggestions?
Sorry, I forgot WP hides this option by default.
To enable the CSS class option, click the gear icon in the Menus section and check the CSS Classes checkbox – https://screenshot.competethemes.com/YEuQxdBZ
Thank you. Worked like a charm.
You’re welcome! Stay in touch if you need anything else and I’ll be happy to help.
Hi there Ben,
I’d like to have just a slider on the homepage. But I get this empty white space underneath it (where the Ad Spot – After Page Content would go). Except, I’m not running ads. How do I get remove this blank space?
Cheers
Try this CSS:
.home .content-container {
display: none;
}
That’s going to hide the entire main content area on the homepage so that only the header, slider, and footer will be visible.
