Take your website
To the next level
Discover our newly launched customization services and elevate your web projects to new heights.
Delegate tasks, save time, and unlock the power of professional WordPress outsourcing.

Okay
  Public Ticket #2832506
Transparent Header
Closed

Comments

  • FireTechAustralia started the conversation

    Hello,

    I would like my Header to be transparent while the viewer is at the top of the screen so it blends in with my photo.

    Once they start scrolling down, I want the header to gain a white background so it is visible all the way down the page.

    Any tips on achieving this?

    Thanks,

    James

  •  7,121
    Oliver replied

    Hi,

    Sorry for delay, as I see you already made it, do you still need help?

    Please note if you comment on your ticket before we reply, your ticket will be pushed down of the tickets list. 

    Regards, Oliver

  • FireTechAustralia replied

    Hi @Gregor, 


    After a bit of tampering I did manage to get it :) 

    I do need some help with image carousels though, I've got it functioning where I can put the photo there and the text over it with the extra elements, however, I can't get a carousel feature implemented on top of it so it can switch between slides. Also, I am trying to do this halfway down the page in a smaller context, with no suffice as well.

  •  7,121
    Oliver replied

    Hi,

    Can you make few screenshots to describe the issue in details?

    Please note if you comment on your ticket before we reply, your ticket will be pushed down of the tickets list. 

    Regards, Oliver

  •  2
    Gerald replied

    Hi,

    Any chance to see details how it looks like and how you did it ?

    Cheers :)

    G

  •  7,121
    Oliver replied

    Hi,

    Take a look:

    Please note if you comment on your ticket before we reply, your ticket will be pushed down of the tickets list. 

    Regards, Oliver

  •  2
    Gerald replied

    Thanks Oliver,

    Using «Light-Menu and Logo» seems to prevent this transparency-setting to work. Or there is anything else interfering. Do you confirm any such relation between this transparency-setting and the «Light-Menu and Logo» switch ?

    :)

  •  7,121
    Oliver replied

    No, but you can control it with this CSS code:

    body #site-header.fixed.shrink .top-area-background:before,
    body #site-header.fixed.shrink .header-background:before {
        opacity: 1;
    }

    Please note if you comment on your ticket before we reply, your ticket will be pushed down of the tickets list. 

    Regards, Oliver