How do I change homepage menu item bar from white to transparent in Acquire Theme ?

[arjenvde]

Hi,

Dutch artist newbie in Tucson. www.lifeseed.life is my site.

How do I change homepage menu item bar from white to transparent in Acquire Theme ?

Thank you kindly, 

Arjen 

[BJ5]

Try adding this to Settings > SEO > Header Code and re-publishing. It should make it semi-transparent on the live site:

<style>
    .nav-wrap
    {
        background: rgba(255,255,255,0.5) !important;
    }
</style>

[localpathcomp]

Use CSS like this in your Global Header file:

div.w-navlist.nav-wrap {
    background: rgba(255,255,255,0.0);
}

If you want it to have a semi-transparent behavior on-scroll ie when the user scrolls down you may want to increase the opacity or chage the background entirely use some jQuery like this and accompanying CSS (remember to place the jQuery in your global footer & use script tags):

CSS for controlling Nav bar background on scroll

div.w-navlist.nav-wrap.transparent-background {
    background: rgba(255,255,255,0.75);
}

Place this jQuery in your Global Footer

<script>
jQuery(window).scroll(function(){
    if (jQuery(this).scrollTop() > 50) {
       jQuery('.w-navlist').addClass('transparent-background');//adds a new class when scrolled 50px or more
    } else {
       jQuery('.w-navlist').removeClass('transparent-background');//removes the class when nav bar is less than 50px from top
    }
});
</script>

[arjenvde · Accepted solution]

Thank you very much! blessings, Arjen