Putting a transparent nav bar over current nav bar

Hi There

I have had quite a lot of complex changes on this nav bar (sorry I have posted quite a few questions and you have all been super helpful thank you). There is one more step I would like to find out if there is any way of creating a transparent overlay nav bar on the current homepage look:

I realise that this would probably mean a sticky nav bar, but also do not want the logo to go smaller as you scroll but to remain the same. I would also need to then make the pages nav bars a similar transparency but not sure how to do that :frowning: any help would be very much appreciated.

The URL is: www.no1va.com

Best,
Mel

Hello Mel,

I am sorry for I didn’t get it clearly. Do you want to add one more additional transparent nav bar at the top?

Regards,
Kharis

Hi Kharis,

Sorry if I didnt explain clearly.

We are looking for an additional transparent nav bar something like this:

Best,
Mel

Hello Mel,

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

    #masthead.site-header {
      background-color: rgba(0,0,0,0.1) !important;
    }

Regards,
Kharis

Hi Kharis,

This is so great, thank you so very much. Just 2 quick questions now that I have put this code in (which worked very well, sorry not sure if I should have started a new topic). The size of the masthead now that the transparency is over it, is there any way to increase this size so that the logo can fit? I also see now on the actual pages: about me etc the masthead colour is now grey, is there any way to keep those white?

Thank you really I appreciate it so much

Best,
Mel

Try adding this CSS code:

    #masthead.site-header {
      padding: 40px 0;
    }

Try replacing this code:

    #masthead.site-header {
      background-color: rgba(0,0,0,0.1) !important;
    }

with:

    .home #masthead.site-header {
      background-color: rgba(0,0,0,0.1) !important;
    }

Regards,
Kharis

Hi Kharis,

THANK YOU! That is all I can truly say, really appreciate it. I just have one last questions regarding the mobile version of the homepage, will quickly create another topic.

Best,
Mel

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