Sticky nav


Is there an easy way to have a sticky menu without a header image on pages?


Hello Monty,

Yes, there is an easy way to have a sticky menu without a header image on pages.

  1. Go to your Dashboard -> Appearance -> Customize and make sure that your menu is sticky and that there is no header image.

  2. You did not include a link to your site so I can’t see how it will look like, but I suppose that you might want to add some background color to make your header text visible. You can do it using this CSS code:

.site-header {
    background-color: rgba(0, 0, 0, 0.9) !important;

You can add CSS code to style.css file of your child theme, also you can use Simple Custom CSS or similar plugin for adding CSS code.

Please feel free to ask any other questions that you might have.

Kind Regards, Roman.


Thanks for the quick reply, but this did not work for me. My site is


Currently your header is not sticky.

What happens when you make it sticky?

Kind Regards, Roman.


I just realized that I have to have the image header type selected in order for it to work. Now I have to change all my margins. SMH, oh well, it works at least. Thanks


The only problem with this if I use the css you provided above, I don’t get transparent nav on home page and nav with background on other pages (which is the way it was before). Any idea how to achieve this?


Please use this CSS code to get transparent nav on home page:

.home .site-header {
    background-color: transparent !important;

I hope that it will help you.

Kind Regards, Roman.


My nav on home page is already transparent. I’m trying to get a non transparent nav on all other pages.


When you use both rules, you should get transparent background on home page and colored everywhere else:

.site-header {
    background-color: rgba(0, 0, 0, 0.9);

.home .site-header {
    background-color: transparent;

Kind Regards, Roman.




Okay Monty,

I marked this topic as Resolved!

Kind regards, Roman.