Change Menu Color?

Hi everyone,

I’d like to do three things:

  1. Make my menu static – i.e. not appear only once scrolling, but always be in place.

  2. I’d like to change the top menu color for my website. Right now it’s black, but I want it some other color.

  3. Make the menu buttons change color once you hover above it.

I’ve googled and tried the solutions I found here, but they don’t seem to work.

My website.

Thanks,
Pontus

Hi,

  1. You can make your menu to appear only once scrolling with this Custom CSS:
.site-header {
    display: none !important;
}

.site-header.float-header {
    display: block !important;
}
  1. You can change the menu’s background-color with this Custom CSS:
.site-header.float-header {
    background-color: red !important;
}
  1. You can add hover-effect color to the menu button with this Custom CSS:
.btn-menu:hover {
    color: red !important;
}

Please add the above CSS to your Child Theme’s style.css or in case you haven’t setup a Child Theme already, then you can also add the CSS to wp-admin -> Appearance -> Customizer -> Additional CSS so you won’t loose the changes after Theme or WordPress updates.

Please let me know how it works.

Kind Regards,
Csaba

Hi Csaba,

Thanks a lot! It worked well. But what I want is to make my menu static. Now the menu background only appears once I start scrolling, but I want it to be there from start.

Hi,

You can make the menu to have background color by default, without scrolling, with this Custom CSS:

.site-header.fixed {
    background: red !important;
}

Please let me know how it works.

Kind Regards,
Csaba

I made changes in sydney child theme, but it doesn’t gets reflected. I want the menu colors and hovers colors to be changed, but it is still appearing red.