[Resolved] Different Menu Button Style on Different Pages

[Danny]

Hi, I need help styling a button. On the home and about pages, I have a white-transparent button in the upper right. It displays properly because of the color background. On my learn, faq, privacy and TOS pages, it does not display because my background is white. How could I style this on white background pages to look something like this:

`main-navigation .main-nav ul li.nav-button a:hover {
background-color: #01bca6 !important;
border: 2px solid #01bca6;
color: white !important;
text-decoration: none !important;
padding-left: 20px;
padding-right: 20px;
padding-top: 0;
padding-bottom: 0;
border-radius: 5px;
margin-left: 16px;
margin-right: 16px;
margin-top: 0%;
letter-spacing: 1px;
}

[Leo]

Hi there,

You can write a specific set of CSS for the home page and about page like using CSS selector like this:

.home .main-navigation .main-nav ul li.nav-button a:hover,
.page-id-xxx .main-navigation .main-nav ul li.nav-button a:hover

Just replace xxx with the page ID of the About page.

More info here:
https://mangomattermedia.com/wordpress/wp-quick-tip-target-a-specific-page-with-css/

[Author]

Posts