Round Menu Buttons

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)

Comments

  • 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

  • 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

  • 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

  • Perfect, Thank you :)

    Is it possible to get rid of the underlines?

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

  • 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

  • Perfect! Thank you so much for your help :)

    You guys are the best!

Sign In or Register to comment.