Round Menu Buttons

Deean · May 2021

Good morning

Is it possible to make round menu buttons?

I mean not one sinlge button added, but that the whole menu behind every menu point has a round colored background? I would like to customize the size and color of the button.

Thank you so much for your help

Kind regards, Deean (big fan of your theme)

Phil · May 2021

Hello,

There is no setting or option to achieve that, but you can create some CSS code to do it.

If you need help with it, please, let me know, but I will need a link to your website.

Thanks

Deean · May 2021

Hello Phil

Thank you for your response.

Here is the link: https://www.xn--gefssmedizin-icb.ch/

As you can see the Menu so far is Text, underlined and with color.

What is desired: That the Menu (single links) are shown like buttons. The roundness and size of the buttons behind the text should be customizable.

Thank you so much for your help

Kind regards, Andreas

Phil · May 2021

Please, put the following CSS code in Betheme -> Theme options -> Custom CSS & JS -> CSS.

#Top_bar .menu .menu-item span{
   background-color: #621379!important;
   border-radius: 27px!important;
   margin: 1px!important;
}

But if you would like to have a different background color for each menu item, you will have to create a CSS class for them.

Thanks

Deean · May 2021

Perfect, Thank you :)

Is it possible to get rid of the underlines?

Deean · May 2021

And to have a white border (I tried -- border: 2px solid #fff; -- but it didn't work)?

Phil · May 2021

1) To remove the underline, please, go to Betheme -> Theme options -> Menu & Action Bar -> Menu, and from Style dropdown menu, select something else than Line below.

2) Please try the following code:

html body #Top_bar .menu .menu-item span{
      border: solid 2px #fff!important;
}

Thanks

Deean · May 2021

Perfect! Thank you so much for your help :)

You guys are the best!

Round Menu Buttons

Comments