[Resolved] How to customize the navigation button?

[Paul]

hello how are you?

how to customize the navigation button? for exmaple: add or change the backgournd color, add the border to the button, etct,

I want this customization effect like this screenshot https://prnt.sc/0ReIjV8VinJ- ( one has the border on Navigation menu button, another one has differnt background color)

by the way, how to add the underlinke to the Navigation menu button when hoving?

please show me the steps or document files?

thanks in advance

[David]

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/

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Paul]

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%;
}
}

[David]

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.

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Paul]

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

[David]

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

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Paul]

HELLO DAVID

THANKS FOR HELP

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

[David]

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%;
    }
}

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Paul]

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?

[David]

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.

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Paul]

thanks for all

[David]

You’re welcome

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Author]

Posts