change the opacity of the header without affecting the rest

• 

  marcomisled · Member · Oct 10, 2016 at 11:08 am

  • Copy link
  • Add topic to favorites

  I need to change the opacity of the header (only the background color) without affecting the logo above or there typography menu or the “top site content”

  I’ve got this for the moment:
  .site-branding { background-color: #569f99; opacity: 1; margin-left: 0; padding-left: 72px; } #site-navigation { background-color: #569f99; opacity: 1; padding: 24px 36px 24px 0; margin: 0; } #masthead{ background-color: #569f99; } .site-top-content { background-color: #403f3f; opacity: 1 !important; }
  and the opacity doesn’t works

  -Goran blog template

  Thanks so much! :)

  The blog I need help with is: (visible only to logged in users)

• 

  michaelvandenberg · Member · Oct 10, 2016 at 1:20 pm

  • Copy link

  Hi there,

  First you’ll need to convert #569f99 to a rgba color value. Using this site (http://hex2rgba.devoth.com) you’ll get: rgba(86, 159, 153, 1).

  Since you want transparency we’ll need to change the last value to something else then 1, in this case I’ll try: 0.75.

  We also need to remove the colors you’ve added to .site-branding and #site-navigation.

  So we end up with this:

  #masthead {
  	background-color: rgba(86, 159, 153, 0.75);
  }
  
  .site-branding,
  #site-navigation {
  	background-color: transparent;
  }

  Let me know if this helps!

  Best regards,

  Michael

• 

  marcomisled · Member · Oct 10, 2016 at 2:07 pm

  • Copy link

  Hello Michael!

  Thank you so much, it runs! :)

  Marco

• 

  marcomisled · Member · Oct 10, 2016 at 2:08 pm

  • Copy link

  Hello Michael!

  Thank you so much, it runs! :)

  Marco

• 

  michaelvandenberg · Member · Oct 10, 2016 at 2:13 pm

  • Copy link

  You’re welcome. :)