Home Forums Theone WordPress Theme Transparent header

This topic contains 13 replies, has 3 voices, and was last updated by  BWSM 3 years, 3 months ago.

Viewing 14 posts - 1 through 14 (of 14 total)
  • Author
    Posts
  • #5463

    ramb0zamb0
    Participant

    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

    #5470

    BWSM
    Keymaster

    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!

    #6545

    dashmista
    Participant

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

    #6546

    dashmista
    Participant

    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.

    #6547

    BWSM
    Keymaster
    #6550

    dashmista
    Participant

    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

    #6552

    BWSM
    Keymaster

    – 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

    #6562

    dashmista
    Participant

    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.

    #6564

    BWSM
    Keymaster

    Hi dashmista

    Try update to:

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

    I don’t understand 2nd question

    #6565

    dashmista
    Participant

    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?

    #6566

    dashmista
    Participant

    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.

    #6578

    BWSM
    Keymaster

    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; 
    }
    #6581

    dashmista
    Participant

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

    #6591

    BWSM
    Keymaster

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

    • This reply was modified 3 years, 3 months ago by  BWSM.
Viewing 14 posts - 1 through 14 (of 14 total)

You must be logged in to reply to this topic.