Styling the Main Navigation

hello everyone,

i would like to change the coloring of the main menu.

Screenshot_1

  1. i would like to get rid of the lines i between the links. i am fine with them being there without hover, but i would like to remove them/make them transparent, when i hover over links.

  2. the coloring i would like to achieve is the following:

  • active site/tab
    background: white / font: black

  • every other link
    background: black / font: white

  • hover on active tab
    background: custom color, i use f4ad07 / font: black

  • hover on every other link
    background: black / font: white

i dont know about sub menus yet. thanks for your great themes!

Hello there,

Try adding this CSS code to Appearance > Customize > Additional CSS from dashboard.

    #main-navigation .sf-menu > ul > li.current-menu-item:after,
    #main-navigation .sf-menu > ul > li:hover:after {
      opacity: 0;
    }

    #main-navigation .sf-menu > ul > li.current-menu-item > a {
      background-color: #fff;
      color: #000;
    }

    #main-navigation .sf-menu > ul > li.current-menu-item > a:hover {
      background-color: #f4ad07;
      color: #000;
    }

    #main-navigation .sf-menu > ul > li > a {
      background-color: #000;
    }

Regards,
Kharis

hey, thanks for the reply. we are on the right track :grinning: there is one more thing to change, then its perfect for me.

http://bambushammer.de please take a look. when you hover over a link thats not the site you are on at the moment, the font is white and the background is orange. can we change the font to black?

i am trying my best but there is so manyobjects in the code, i can’t get it right.

Hello there,

Try adding this CSS code to Appearance > Customize > Additional CSS from dashboard.

    #main-navigation .sf-menu > ul > li > a:hover {
      background-color: #f4ad07;
      color: #000;
    }

Regards,
Kharis

1 Like

worked. solved. ty. looking good so far

You’re welcome!

Please let us know in a new topic if you have any further questions, or if we can provide you with any other assistance.

Regards,
Kharis