Transparent Header

This topic is: not resolved

This topic contains 8 replies, has 2 voices, and was last updated by Veena Veena 2 months ago.

Viewing 9 posts - 1 through 9 (of 9 total)
  • Author
    Posts
  • #30454
    Mark Aquino
    Mark Aquino
    Participant
    Post count: 5

    Hello,

    First of all, fantastic theme! Can you please help me with two things?

    Here’s my url – http://tenantconnect.ca/wordpress/

    First – the sticky header menu is not showing even if it’s enabled via the theme options

    Second – I want to make the header background transparent at load then when the viewer scrolls down, the sticky menu to have a white background.

    Thank you!

    #30455
    Mark Aquino
    Mark Aquino
    Participant
    Post count: 5

    I made the sticky header to show already

    https://tenantconnect.ca/wordpress/

    but still can’t achieve to make the main header transparent…

    pls help thanks!

    #30461
    Veena
    Veena
    Moderator
    Post count: 7820

    Pls add the below custom CSS also –

    .sticky-wrapper {
        position: fixed;
        z-index: 9999;
        width: 100%;
    }
    
    #30465
    Mark Aquino
    Mark Aquino
    Participant
    Post count: 5

    Ok that works! but now how do I change the menu color to white for the transparent background while retaining the dark color over the white background in sticky. I can’t figure it out in css.

    Please help, thanks!

    #30467
    Mark Aquino
    Mark Aquino
    Participant
    Post count: 5

    Disregard my request. I figured it out already. Thanks!

    #30468
    Mark Aquino
    Mark Aquino
    Participant
    Post count: 5

    Ok last thing 🙂 I want to use a two different logos for the main and sticky. How do I achieve this?

    Please help, thanks!

    #30477
    Veena
    Veena
    Moderator
    Post count: 7820

    Will get back to you on this shortly.

    Thanks.

    #30547
    Mark Aquino
    Mark Aquino
    Participant
    Post count: 5

    Hello any update on this? Please help thanks! I want to use a different logo version for the sticky.

    #30553
    Veena
    Veena
    Moderator
    Post count: 7820

    Pls use the below custom CSS in themeoptions > custom CSS tab –

    #header.sticky #site-logo img {
        opacity: 0;
    }
    #header.sticky #site-logo a {
        background-image: url(https://www.livemeshthemes.com/appdev/wp-content/uploads/sites/7/2013/07/logo.png);
        background-repeat: no-repeat;
        background-size: contain;
    }
    
Viewing 9 posts - 1 through 9 (of 9 total)

You must be logged in to reply to this topic.