Customize the Button on the Header (Primary Navigation)

Hi there,

try this CSS:

@media (min-width: 769px) {
    .main-navigation .main-nav ul li.nav-button a {
        border: 3px solid #fff;
        background-color: #fff;
        color: #572794 !important;
        border-width: 2px;
        line-height: 40px;
        margin-right: 30px
    }

    .main-navigation .main-nav ul li.nav-button:hover a {
        background-color: unset;
        color: #fff !important;
    }
}

Great thank you very much for the reply with the CSS,

As you click on the button, it directs you to a page but the button is different with purple text & white border, how could we get it white background with purple text colour.

and I'm wondering i have inputted nav-button hide-on-tablet hide-on-mobile on the CSS classes on menu section for Submit a resource button, so can we remove @media (min-width: 769px) code on the css code above?

Try adding this CSS as well:

.main-navigation .main-nav ul li.nav-button[class*="current-menu-"]>a {
    color: #572794!important;
    background-color: #ffffff !important;
}

and I'm wondering i have inputted nav-button hide-on-tablet hide-on-mobile on the CSS classes on menu section for Submit a resource button, so can we remove @media (min-width: 769px) code on the css code above?

Yup you could. My preference would be to keep it in for clarity but it's up to you.

Thanks for reply Leo

But want the current menu with a white background with purple text?

*i tried it but couldn't achieve it

Edited CSS above:
https://generatepress.com/forums/topic/customize-the-button-on-the-header-primary-navigation/#post-1416335

Thank you very very very much Leo & David for the help.

No problem :)