[Resolved] How to change nav-button effect – Search template

Log In Free Support

Popular Articles

Missing style.css

Updating errors

Installing GP Premium

Installing GeneratePress

This topic has 3 replies, 2 voices, and was last updated 3 years, 4 months ago by Fernando.

Viewing 4 posts - 1 through 4 (of 4 total)

Author

Posts
November 13, 2022 at 3:30 pm #2414134

Roberto

Hi, using the Search template, I’m trying to change the nav-button effect given to the “contact” page (border: 3px). Here’s the homepage: https://staging.giacomodenanni.it
I would like to make it more like the secondary button effect, that I set in Global Styles in Generate Blocks. How can I achive this? What’s the specific css class used in that template?

Thank you very much!

November 13, 2022 at 5:51 pm #2414207
Fernando
Customer Support
Hi Giacomo,

The Button is added as a Menu Item. Thus, it can’t be given a Global Style.

To style this menu item, go to Appearance > Menus.

On the top right, click on Screen Settings. Then, enable CSS classes. Example: https://share.getcloudapp.com/bLu5Xvj2

Then, add cu-secondary-button class to the class list of the Contact Menu item. Example: https://share.getcloudapp.com/X6uQgjNR

Lastly, add this in Appearance > Customize > Additional CSS:
```
.main-navigation:not(.slideout-navigation) .main-nav li.nav-button.cu-secondary-button a:hover {
    background-color: var(--accent);
    color: var(--base-3);
    border-color: var(--accent);
}
```
November 18, 2022 at 6:02 am #2421364

Roberto

Thank you so much, it worked perfectly!

November 20, 2022 at 5:03 pm #2424637

Fernando
Customer Support

You’re welcome Giacomo!
Author

Posts

Viewing 4 posts - 1 through 4 (of 4 total)

You must be logged in to reply to this topic.