How to make my menu bar solid

My menu bar starts off transparent when first loading the page and becomes a solid color when I scroll down. How can I make my menu bar have a solid color at all times

Hi,

Please post a link to your website, so I can check.

Best Regards,
Csaba

Hi @Csaba

Sorry, my website is currently being developed locally so I cant show it.

However I found a Youtube vid that shows this behaviour. I believe its the default behaviour of the Sydney theme. At 4:50 in the below video, you can see the menu bar going from transparent to a solid black. This is whats happening with my site as well. I would like to make the menu bar solid at all times as it is interfering with text and images in my other pages.

Hi,

Ok, I see, you can make the top menu ( which is now transparent ) to have the same background color like when it scrolls down, with this Custom CSS:

.site-header.fixed {
    background-color: rgba(0,0,0,0.9) !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 use this plugin to add the CSS to it: https://wordpress.org/plugins/simple-custom-css/ so you will not loose the changes on theme updates.

Please let me know how it works.

Best Regards,
Csaba

1 Like

@csaba

didnt work but i changed the code to

.site-header {
background-color: #d65050;
}

and it worked

cheers

2 Likes

Worked for me as well, thanks @kyuu !

HI, I changed the code as suggested above but it did not work for me, can someone help me with changing the menu bar from transparent to the main page color?

thanks

Hello there,

This CSS code should be working.

    .site-header {
      background-color: #ff0000;
    }

If not, probably you have active cache. Try flushing/clearing it and reload your site.

https://wordpress.org/support/article/i-make-changes-and-nothing-happens/

To allow me checking your site directly and inspect what’s blocking it, please share a link to your site here.

Regards,
Kharis

ok, that did work thanks, how do we then change the contact info above the menu bar to be solid as well?

I figured that out too, but now my mail and phone icons disappeared, any ideas?

but now my mail and phone icons disappeared, any ideas?

Probably new background color of header is same as phone icons. You need extra CSS code to apply different color for the icons. If you don’t know how to do, please share your site’s URL here.

Regards,
Kharis

here it is

http://www.mywebsiteguystestdomain.ca/

Hello there,

They appear red to me. Did you change their color with CSS code like this?

    .header-contact-info .fa {
      color: #fff000 !important;
    }

Regards,
Kharis

no they dont show at all for me and no I did not change the code, but will look for that part and see if I can change it