New Landing › How can we help? › Atelier › white semi-transparent header & sticky header

Viewing 15 posts - 1 through 15 (of 20 total)
1 2
  • Back to forum
    Posted in: Atelier
  • June 3, 2016 at 10:25 am #272242
    hdelbarre
    Member
    Post count: 7

    Hi, I would like to have a continuos semi-transparent white header background (menu + header + sticky header). I’ve looked at similar topics in the discussion forums but I haven’t quiet achieved the result I’m looking for. I’ve tried adding some CSS text as it appeared in the forums but apart from the fact that I’m clueless on how this works I didn’t get any results. For sure I’m doing something wrong.

    Many thanks for your help!

    June 3, 2016 at 11:39 am #272284
    Kyle – SUPPORT
    Moderator
    Post count: 35880

    Hi

    Try adding this to your custom css:

    .header-wrap[class*="page-header-naked"] #header-section #header, .sticky-wrapper.is-sticky .sticky-header {
  background-color: rgba(255, 255, 255, 0.5)!important;
}

    You will need to set the page header to naked dark like I have on the home page

    – Kyle

    June 3, 2016 at 12:58 pm #272310
    hdelbarre
    Member
    Post count: 7

    Hi Kyle!

    It worked! Woop woop! Thank you so much for your help and the quick response.

    Geraldine

    June 3, 2016 at 1:05 pm #272313
    Kyle – SUPPORT
    Moderator
    Post count: 35880

    Great! No problem

    – Kyle

    July 8, 2016 at 4:01 pm #280101
    SHK111
    Member
    Post count: 271

    Sorry to re-open this topic, is there any way to make a bit translucent a naked light header just when it scroll down?

    Once it’s in the top, let it total transparent as it is, and then when we start to scroll down, make it translucent …?

    July 8, 2016 at 4:19 pm #280106
    Kyle – SUPPORT
    Moderator
    Post count: 35880

    Hi

    My code above does that

    – Kyle

    July 8, 2016 at 4:24 pm #280108
    SHK111
    Member
    Post count: 271

    On my website, it became translucent when started to scroll down, but at the top its not translucide like the original “naked light”. Even tried with the naked dark.

    July 8, 2016 at 4:28 pm #280112
    Kyle – SUPPORT
    Moderator
    Post count: 35880

    What’s your link?

    – Kyle

    July 8, 2016 at 4:31 pm #280113
    SHK111
    Member
    Post count: 271
    This reply has been marked as private.
    July 11, 2016 at 12:52 pm #280441
    David Martin – Support
    Moderator
    Post count: 20834
    This reply has been marked as private.
    July 20, 2016 at 3:04 am #282459
    SHK111
    Member
    Post count: 271

    I like the translucent header when scrolling down.
    How to have the header translucent only when scrolling down (Still 100% transparent when it’s at the top top) ?

    July 21, 2016 at 10:31 am #282897
    David Martin – Support
    Moderator
    Post count: 20834

    That’s what you have?

    July 21, 2016 at 11:04 am #282909
    SHK111
    Member
    Post count: 271

    It’s what I want but it’s not showing that on my browser

    July 22, 2016 at 9:59 am #283140
    David Martin – Support
    Moderator
    Post count: 20834

    What browser and OS are you on?

    I’m seeing that on Chrome + Mac

    July 22, 2016 at 10:54 am #283172
    SHK111
    Member
    Post count: 271

    Using safari, opera, chrome, Firefox …

    Os El Capitan, the last one

  • Back to forum
    Posted in: Atelier
Viewing 15 posts - 1 through 15 (of 20 total)
1 2

You must be logged in to reply to this topic.