Round Border Around a Menu Button

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.

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]

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

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

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

Ahh sorry. Try this instead:

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

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?

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

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

No problem!