Okay
  Public Ticket #211391
80% header transparency
Closed

Comments

  • Kenneth started the conversation
    May 9, 2014 at 2:34pm

    Hi there!

    I was thinking, I can't be the first one to ask this, so can anyone throw a link in my direction: 

    How to set the transparency of the header på 80%. Cheers!

  •  8,839
    Tahir replied
    May 9, 2014 at 3:12pm

    Hey Kenneth!

    Do you want it at 80% after resizing or when site is viewed and not scrolled down ?. Also please provide page url . 

    Thanks

    ThemeNectar Support Team 

  • Kenneth replied
    May 12, 2014 at 12:16pm

    Hi Tahir,

    Unfortunately I can't provide a URL because im working locally. Though I hope you can help anyway :)

    The default transparent header (where the menus and logo are) is where I want the 80% instead of 0% opacity. Before scrolling.

  •  8,839
    Tahir replied
    May 12, 2014 at 3:17pm

    Add this into the Custom CSS box located in your Salient Options panel :

    	body div#header-outer[data-transparent-header="true"].transparent {
		background-color: rgba(255, 255, 255, 0.8)!important;
	
	}

    Cheers

    ThemeNectar Support Team 

  • Kenneth replied
    May 12, 2014 at 4:23pm

    Thanks alot Tahir :)

    Works perfecto!

  • Drew replied
    May 18, 2014 at 12:44am

    This works great, except on responsive mobile site, now the header is black. Is there anyway to keep the responsive (smaller screen) headers white?

    http://myfelina.wpengine.com

  •  8,839
    Tahir replied
    May 19, 2014 at 4:45pm

    Hey Andy!

    Seems like you got this sorted as well. 

    Best,

    -T

    ThemeNectar Support Team 

  • Juan replied
    May 26, 2014 at 8:39pm

    Hey Tahir, 

    Desktop: What about after scrolled down (after resizing, like you mentioned)? 

    Mobile: I have set my header to stick at the top while scrolling, I'd like this to also have some transparency.

    What would be the css for that?

  •  8,839
    Tahir replied
    May 27, 2014 at 1:06pm

    Hey Juan!

    Please create a private ticket with your url so we can write you some custom css. 

    Cheers

    ThemeNectar Support Team 

  • Kenneth replied
    May 28, 2014 at 12:48am

    Hey again,

    Also; I would love to know the secret code for the transparency after scrolling :) 

    Thanks!

  • Kenneth replied
    May 28, 2014 at 12:57am

    Got it from another post, thanks :)


    body #header-outer.small-nav { background: rgba(10, 10, 10, 0.7); }

  • Juan replied
    May 28, 2014 at 3:30am

    Thanks Kenneth.

    Tahir, I didn't want to create a new post with the same topic. But I will next time. Thanks. 

  • Juan replied
    May 28, 2014 at 5:15am

    Kenneth, 

    I tried the code but it's not working. This is what I have on my custom css:

    -----------------------------

    @media only screen and (min-width : 1px) and (max-width : 1000px) {

    body #header-space {

    height: 56px!important;

    display: block!important;

    }

    body #header-outer {

    position: fixed !important;

    }

    #mobile-menu {

    position: fixed!important;

    top: 52px!important;

    width: 100%!important;

    background: rgba(255, 255, 255, 0.7);

    }

    #header-outer.small-nav

    { background: rgba(255, 255, 255, 0.7);

    }

    }

  •  1,070
    ThemeNectar replied
    June 2, 2014 at 10:33am

    Hey Juan,

    you just need to move that rule  

     #header-outer.small-nav { background: rgba(255, 255, 255, 0.7); }
    out of your mobile media query. So all together your css box should look like: 
     
@media only screen and (min-width : 1px) and (max-width : 1000px) {

body #header-space {

height: 56px!important;

display: block!important;

}

body #header-outer {

position: fixed !important;

}

#mobile-menu {

position: fixed!important;

top: 52px!important;

width: 100%!important;

background: rgba(255, 255, 255, 0.7);

}

}

#header-outer.small-nav { 
  background: rgba(255, 255, 255, 0.7);
}

    Cheers