Site logo

Archived topic

How to add button with rounded corners, different color on desktop navigation.

3 replies · Started by pcdoctoratl on February 9, 2022

Viewing posts 1–4 of 4

Hi, i wanted to see if you all could help with creating a different color button on my site's main navigation . It is the last item on the navigation on the right, and would also like rounded corners. Thank you for your help in advance.

In other words the button i'd like is to have #4c332d background with a 12 radius and white letters.

Hi there,

this document explains how to make a Menu Item look like a button:

https://docs.generatepress.com/article/adding-buttons-navigation/

For your CSS you would use:

@media (min-width:769px) {
    .main-navigation .main-nav ul li.nav-button a {
        background-color: #4c332d;
        color: #fff;
        border-radius: 12px;
        line-height: 35px; /*this number will likely need to be adjusted*/
    }
}

Worked great, thank you!

Glad to hear that!

This archived topic is closed to new replies.