Transparent header

[ramb0zamb0]

Hi,

I just bought your theme and was wondering if i could change the header to where it will stay transparent the whole time even when scrolling through the page?

Thanks,

ramb0zamb0

[SeaTheme]

Hi, thank you for purchasing our theme

plz go to wp-admin, paste the code into Theone(theme option) / General settings / Custom Css
body.page #header.headerbg { background-color:transparent;}

Best,Bwsm
Follow on @uiueux to get update news!

[dashmista]

Is it possible to have the header at 50% opacity? So you can see through it but it is not completely transparent?

[dashmista]

Okay I did this: body.page #header.headerbg {
opacity: .5;
}

And it worked

However, can you goto uxdash.com and see now there are two logos in the header. I had this problem before with the other type of header (square box animation) but you gave me CSS to fix it. Can you give me css to fix it for this style of header now too? I appreciate it.

[SeaTheme]

remove the css in this topic: https://seatheme.net/forums/topic/how-to-have-separate-logos/

[dashmista]

The css in that topic does not work for this problem.

I tried it as follows: body:not(.page) .logo-image {display: none;}

But please see uxdash.com – the problem still exists.

Thank you

[SeaTheme]

– use the css to hide short logo:

.logo-image {
display: none;
}

– remove the background to hide long logo(the logo with text) : https://www.dropbox.com/s/xtfo2ij8xuto5m6/QQ20150307-1.jpg?dl=0

[dashmista]

Sorry I think I was not clear in stating my problem.

The code you provided does work in removing the small logo from the header – but it also removes the small “uxd” logo from the loading box and square box on page load. I want to keep the “uxd” in the loading page and square box, but remove it from the header and only have “uxdash” in the header. How can I do this? Sorry for the confusion.

Also, how can I style the header to not be transparent on mouseover? I want it transparent when scrolling, but I want it solid on mouseover.

I really appreciate your help.

[SeaTheme]

Hi dashmista

Try update to:

#header .logo-image {
display: none;
}

I don’t understand 2nd question

[dashmista]

Perfect! Works! I appreciate it so much.

Sorry for the confusion. So the 2nd question is: on the current uxdash website, the header is transparent. However, if the user moves their mouse to the header (for example, to click a link), I want the header to change opacity to full (not transparent) so that they can focus on the header links better. How can I code this?

[dashmista]

Whoops, I found the solution:

body.page #header.headerbg:hover {
opacity: 1;
}

This achieves the effect. However, how can I make the transition from opacity: 0.7 to opacity: 1 smooth? How can I make the transition smooth? I tried several codes from the internet and I am not able to figure it out. Thanks.

[SeaTheme]

Use the css:

body.page #header.headerbg {
-webkit-transition: all 0.5s;
   -moz-transition: all 0.5s;
     -o-transition: all 0.5s;
    -ms-transition: all 0.5s;
        transition: all 0.5s; 
}

[dashmista]

Hmmm does not work? The menu still “snaps” from 0.7 to 1.0 opacity on hover.

[SeaTheme]

It is complicated, the css is conflict with scroll effect. There is not perfect solution.

[Author]

Posts