[Resolved] Rounded Corner Button in Navigation Bar

[Sumit]

View post on imgur.com

I want to add a button like this in my website’s navigation bar.

I followed this ticket

https://generatepress.com/forums/topic/round-border-around-a-menu-button/

But I am unable to make it on my website.

I am providing the link to my website.

I also want to know where I can get update on my older tickets, I forgot to select “Notify me of follow-up replies via email” now older tickets are no where to be found.

I ended up fixing all previous issues myself, hopefully I receive update on this one.

GeneratePress 2.1.1

GP Premium 1.6.2

[Leo]

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.

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

[Sumit]

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

[David]

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

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

[Sumit]

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?

[Sumit]

http://prntscr.com/jif6f3

[Tom]

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

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/
Ongoing Development: https://generatepress.com/ongoing-development

[Sumit]

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

[David]

Hi Sumit,

you can add these properties to the CSS:

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

Adjust the PX accordingly

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

[Sumit]

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

[David]

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.
}

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

[Sumit]

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

[David]

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

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

[Sumit]

looks kinda weird on mobile view.

http://prntscr.com/jip8uo

[David]

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

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

[Author]

Posts