How to customize the navigation button?

Hi there,

this doc explains how to style navigation items to look like a button:

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

and this doc explains how to add a underline hover effect:

https://docs.generatepress.com/article/adding-menu-hover-animation/

hello david,

thanks for help.

i checked them carefully.

If adding border for the button, then i just directly use this code from the first link? dont do any changes?

Also, I just apply border to the button " CONTACT", no need for other buttons, how to know the below code is only useful for Contact button?

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

For underline, then i just directly use this below and no any changes

@media (min-width: 769px) {
.main-navigation .menu > .menu-item > a::after {
content: "";
position: absolute;
right: 0;
left: 50%;
bottom: 15px;
-webkit-transform: translate3d(-50%,0,0);
transform: translate3d(-50%,0,0);

display: block;
width: 0;
height: 2px;

background-color: currentColor;
transition: 0.3s width ease;
}
.main-navigation .menu > .menu-item.current-menu-item > a::after,
.main-navigation .menu > .menu-item.current-menu-ancestor > a::after,
.main-navigation .menu > .menu-item > a:hover::after {
width: 50%;
}
}

Lets deal with the button first.
In that document i supplied:

1. Add a custom class to your menu item, for example nav-button

Read this document:

https://docs.generatepress.com/article/using-the-wordpress-menu-builder/#custom-classes

it explains how to add a class to your Menu Item.
follow those steps on your Contact menu item, and give it a class of nav-button

Then add the CSS.

hello david

step 1, https://prnt.sc/ESzcr6FpYBE_
step 2: https://prnt.sc/Vaa4CKMCPNvQ
step 3: https://prnt.sc/D8-SDdZ5xqIv

i am sorry that there is wroong with something

The CSS Class has to be: nav-button - see here:

https://www.screencast.com/t/zkE6ocf98

HELLO DAVID

THANKS FOR HELP

CAN WE AGAIN WORK ON THE UNDERLINE FOR THE NAVIGATION BUTTON?

Now add this CSS to your site:

@media (min-width: 769px) {
    .main-navigation .menu > .menu-item:not(.nav-button) > a::after {
        content: "";
        position: absolute;
        right: 0;
        left: 50%;
        bottom: 15px;
        -webkit-transform: translate3d(-50%,0,0);
        transform: translate3d(-50%,0,0);
        display: block;
        width: 0;
        height: 2px;
        background-color: currentColor;
        transition: 0.3s width ease;
    }
    .main-navigation .menu > .menu-item.current-menu-item > a::after,
    .main-navigation .menu > .menu-item.current-menu-ancestor > a::after,
    .main-navigation .menu > .menu-item > a:hover::after {
        width: 50%;
    }
}

thansk for all help.

css is added and it's working.

i remember that we need to install the plugin of SIMPLE CSS to install extra css code, not direclty add the extra css code to "Additional CSS" of " Customize" panel, https://prnt.sc/GfOWPWmVzszg

why now it is ok?

You can use either Simple CSS or Additional CSS.
They both do the same thing.
I would suggest you stick to just using one of them.

thanks for all

You're welcome