[Resolved] Round Border Around a Menu Button

[Lucky]

Hi Tom,

Please let me know how to add a border to a single menu button on the main navigation. Thank you!

[img]http://i.imgur.com/ZeQtls2.png[/img]

I want to add a contact us button just like the above image. Thank you!

[Jamal]

Hi

First do the steps in this post https://generatepress.com/forums/topic/adding-a-button-to-menu-workaround/#post-228678, where it says other css for your button you can add border-radius: 7px;.

It will be best if you can provide a link to your site if you want space between the normal menu items and the rounded button.

[Lucky]

Thank you Jamal! But not exactly the look I was after. Too much space on top and bottom of the button. :/

[img]http://i.imgur.com/KTvl5eY.png[/img]

[Leo]

Try adding: padding: 10px; to the CSS.

Can you link me to the site if it doesn’t work?

[Lucky]

Hi Leo! Unfortunately, it didn’t work. Following is the link to the website.

[Leo]

Ahh sorry. Try this instead:

.main-navigation .main-nav ul li.my-custom-class a {
    line-height: 30px;
}

[Lucky]

Thank you Leo! Worked perfectly! Would you be so kind to also let me know how to right align the same button while keeping other buttons centered?

[Leo]

Try using the method here: https://docs.generatepress.com/article/adding-icons-to-menu-items/#floating-the-icon-to-the-right

[Lucky]

Thanks Leo. With a little bit of margin from top and right side, it worked like a charm. Really appreciate your help.

[Leo]

No problem!

[Author]

Posts