How do I Adjust opacity of Header on All pages?

  • Hi, I followed the previous post on this and asked a question why mine wasn’t working but the moderator closed it.
    I am still having the same problem so I don’t consider it resolved for me.
    I am using the Tesseract theme. My incomplete site is

    https://aimlesswanderer.net

    I tried changing my site styles.css file from

    #masthead {
		padding: 0 20px;
		}

    to

    #masthead {
		padding: 0 20px;
		background-color:  rgba(255,255,255,.2);
		}

    and nothing happened. Is there something I’m doing wrong?

Viewing 12 replies - 1 through 12 (of 12 total)

  • Have you tried this:

    .home .site-header, .home .main-navigation ul ul a {
  background-color:  rgba(255,255,255,.2) !important;
}

    Thread Starter marctjason

    (@marctjason)

    Does that need to replace something in the styles.css or just add it in?

    Thread Starter marctjason

    (@marctjason)

    So I added that in and it did nothing. So I removed the .home from each bit and you can see what it did to my site from the above link. The home screen header is a lot lighter than it was originally and the others aren’t quite right. The background should be behind it. Do you have any suggestions?

    Thanks

    Update…I changed the rgba numbers to what the home header has them as so that’s back to normal.

    Chad

    (@lynneandchad)

    Try adding

    .site-header {
    position: absolute;
}

    That should allow the content area to shift up behind the header area, as opposed to sitting below it.

    There’s a style that already does this on the homepage, adding the style above should affect the other pages as well ??

    Thread Starter marctjason

    (@marctjason)

    Chad,

    Thank you so much. That’s perfect. You are my hero.

    Chad

    (@lynneandchad)

    Glad I could help ??

    Thanks Chad. Finally figured this out 2 hours later thanks to you!

    One more question, if I want to keep the header transparent, but want to give the navigation menu a color, how would I do that?

    hi,

    I am having the same problem.
    How is the complete .site-header class supposed to look like?

    I tried to fix it but all that just doesnt seem to change anything.
    Here is a url to my website: https://www.athleticpursuit.com

    As you can see, there is a nice header opacity on the home page, but not on the other pages. That’s quite frustrating.

    Hello?

    try using !absolute

    Hey guys,

    I’ve been trying to change my headers as well on all my pages, not just my homepage.

    I’m also using the Tesseract theme and it only allows me to change opacity on the homepage.

    I’ve tried all your codes mentioned above and from the previous post but it didn’t seem to work for me.

    Can you give me some tips or advise regarding the css style sheet and where to add or replace a code…

    (Forgive me, I’m a noob)

Viewing 12 replies - 1 through 12 (of 12 total)
  • The topic ‘How do I Adjust opacity of Header on All pages?’ is closed to new replies.