Rounded Corner Button in Navigation Bar

Hi there,

Start by following the steps here: https://docs.generatepress.com/article/adding-buttons-navigation/

Then you just need to add this additional style:
border-radius: 5px;

You can see your previous topic here: https://generatepress.com/forums/users/tathspts/

Let me know.

it looks like this
http://prntscr.com/jic5r5

I am using this code in additional CSS under customize.

@media (min-width:769px) {
.main-navigation .main-nav ul li.nav-button a {
background-color: #ffffff;
border: 2px solid #000000;
border-radius: 5px;
color: #000000;
}
}

http://prntscr.com/jic6ex

Hi Sumit,

try this CSS:

@media (min-width:769px) {
    .main-navigation .main-nav ul li.nav-button a {
        background-color: #ffffff;
        border: 2px solid #000000;
        border-radius: 30px;
        color: #000000;
        line-height: 35px;
    }
}

its almost there, just need to align it middle in the header. I changed line-height to 25.

Please check this snapshot http://prntscr.com/jif4wo

also it possible to show similar button on tablet and mobile as well?

http://prntscr.com/jif6f3

Hi there,

I'm not seeing the button in your navigation? Did you remove it? You should just be able to add margin-top: 5px; to your existing CSS. You may need to adjust the 5px.

If you're using the mobile header, you can add HTML to it like this: https://docs.generatepress.com/article/mobile-header/#adding-html-inside-the-mobile-header

thanks, it worked, http://prntscr.com/jilnmk

is possible to make the button little bigger horizontally.

can you also provide css button and text hover state colors?

Thanks
Sumit

Hi Sumit,

you can add these properties to the CSS:

padding-left: 15px;
padding-right: 15px;

Adjust the PX accordingly

Thanks, we can't add css for hover effect?

Hi Sumit, you just need to add CSS to include the hover pseudo class like so:

.main-navigation .main-nav ul li.nav-button a:hover {
    styles go here.
}

Thanks David, this is perfect.

now if I could do the same for mobile and tablet view as well it would be gold :)

Thanks
Sumit

Hi Sumit, just remove the @media (min-width:769px) { and the last } from the CSS

looks kinda weird on mobile view.

http://prntscr.com/jip8uo

Then try adding a limit to the width for the mobile:

@media (min-width:320px) {
    .main-navigation .main-nav ul li.nav-button a {
        max-width: 180px;
    }
}