Community Forums › Forums › Archived Forums › Design Tips and Tricks › Transparent header question
Tagged: transparent header logo
- This topic has 14 replies, 2 voices, and was last updated 4 years, 5 months ago by Jochgem.
-
AuthorPosts
-
November 19, 2019 at 6:30 am #494857JochgemMember
Hi Coders,
I made my header transparent with the following code in Genesis Sample theme.
header { opacity: 0.8; position: relative; }
But now my logo is also transparent and making the colors a bit dull.
Is there a CSS code that makes the logo opaque again but leaves the header background transparent?
Thanks in advance!
Jochgem
https://subday.nl/November 19, 2019 at 12:52 pm #494864AnitaKeymasterYour website is not visible to us. Please turn it on and we can take a look.
Love coffee, chocolate and my Bella!
November 19, 2019 at 12:54 pm #494866JochgemMemberHi Anita,
Just put it live 🙂 Thanks for having a look!
November 19, 2019 at 1:04 pm #494869AnitaKeymasterThe code you added does not make it transparent. It's adding an
opacity
to it which is making the logo and text look lighter than what it should. Remove the opacity and it will be normal.
Love coffee, chocolate and my Bella!
November 19, 2019 at 1:08 pm #494870JochgemMemberHi Anita,
I adjusted the css to this.
header { opacity: 0.3; position: relative; }
Now you can clearly see the logo also gets transparent. I am looking for a way to only make the header transparent but not the logo. Maybe you misunderstood.
😉
November 19, 2019 at 1:45 pm #494872AnitaKeymasterYou then may need to add the opacity to the ":before" element to do that. You've turned off the site again, so I cannot test anything.
Love coffee, chocolate and my Bella!
November 19, 2019 at 1:47 pm #494873JochgemMemberOh sorry, one moment I put it on again 🙂
November 19, 2019 at 2:40 pm #494877AnitaKeymasterI am trying to understand the logic of why you want the
header
to be transparent instead of abackground-color
of white? What is the purpose of the transparency and the opacity so I know how the code should work?
Love coffee, chocolate and my Bella!
November 19, 2019 at 2:45 pm #494878JochgemMemberHi Anita,
The code was given to me by Studiopress support. I am not so tech-savvy 😉
But if you say the
background-color
that sounds like what I want. Just the background color of the header transparent. Not the logo and the menu.The purpose of transparency is just aesthetics.
Hope this makes sense.
November 19, 2019 at 2:49 pm #494879AnitaKeymasterBut what I see there is all white. You would use transparent if there were say an image behind the header and you'd like to remove the color from the header.
Love coffee, chocolate and my Bella!
November 19, 2019 at 2:51 pm #494880JochgemMemberIf you go here https://subday.nl/about/ and scroll down you see the header is transparent.
If you don't scroll down you cant see it. 🙂
November 19, 2019 at 3:21 pm #494882AnitaKeymasterI guess I am just not getting it. Are you saying "you want" to see the content scrolling "under" the header? Is that the goal? Or "you do not" want it see the content under there when scrolling?
Love coffee, chocolate and my Bella!
November 19, 2019 at 3:25 pm #494884JochgemMemberHi Anita,
Yes, I would like to see the content under the header when scrolling. It is just aesthetics.
But the CSS:
header { opacity: 0.8; position: relative; }
also makes the logo and the menu transparent. That's not what I want.I only want the white background in the header transparent.
November 19, 2019 at 3:35 pm #494886AnitaKeymasterI am not quite sure that can be done with that because the title, logo and nav are all inside the header/site-header area.
Love coffee, chocolate and my Bella!
November 19, 2019 at 3:37 pm #494887JochgemMemberI understand, no problem.
Thank you for your time and effort anyway:) Much appreciated!
-
AuthorPosts
- The forum ‘Design Tips and Tricks’ is closed to new topics and replies.