Coloured main menu option

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.