Home Forums Air HTML Theme Logo on menu bar not swapping color

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

Viewing 8 posts - 1 through 8 (of 8 total)
  • Author
    Posts
  • #18919

    megahurts
    Participant
    Purchased
    Supported

    Hello,

    I want to display a white color (text-only) logo by default in the header as I am using a dark photo as the background, and then a black version after scrolling (and the white header bar shows up) as otherwise it is white on white and not visible.

    I have my white text only logo showing up no problem, but after scrolling and the white header bar shows up, my logo does not swap to the black version and it not visible.

    Can you please help?

    Thanks

    #18920

    SeaTheme
    Keymaster
    Purchased
    Supported

    Hi,

    Yes, could you please leave your page URL? Thanks

    Regards!
    Bwsm – uiueux.comTwitterFacebook

    #18953

    megahurts
    Participant
    Purchased
    Supported

    Thanks for the response. I don’t have a link to share as it’s all local at the moment. Let me try and explain more clearly.

    I am using “Home Alternative” layout for my homepage with a photograph for the background on the top part of the page instead of the default white bg. This works fine until you scroll and the nav/header overlay appears (which has a white background), and so it is white on white and the logo is not visible. I want my logo to swap for a black version after scrolling and the nav/header overlay appears.

    It appears this is what the code is supposed to do with places for both “dark” and “light” logos, but nothing I try works. Something seems buggy with the nav/header overlay.

    Thanks again!

    #18957

    SeaTheme
    Keymaster
    Purchased
    Supported

    Hi,

    It is hard to give you the solution without lived page. I don’t know if it works.

    Please try to use the CSS to show/hide the light/dark logo:

    .header-scrolling .logo-dark {display:block;}
    .header-scrolling .logo-light {display:none;}

    Regards

    #18963

    megahurts
    Participant
    Purchased
    Supported
    This reply has been marked as private.
    #18964

    megahurts
    Participant
    Purchased
    Supported

    On thing I forgot to mention, I would like to do the same as above with the “menu” text as it also is not visible on the header after scrolling.

    Cheers

    #18980

    megahurts
    Participant
    Purchased
    Supported

    Hello,

    Can you explain what this code is doing in a detail? Is the “header-scrolling” the style that will show up on the menu bar that is triggered after scrolling?

    .header-scrolling .logo-dark {display:block;}
    .header-scrolling .logo-light {display:none;}

    Also here is the code on my index.html page:
    <div class=”navi-logo”>

    <div class=”logo-wrap”>
    <div id=”logo”>

    <h1 class=”logo-h1″>Air Theme</h1>
    Air Theme
    <span class=”logo-light”>Air Theme</span>

    </div>
    </div><!–End logo wrap–>

    </div>

    Can you tell me how I can adjust the above code for my needs? I simply need the logo to swap from white to black text on scroll.

    Thanks!

    #18981

    SeaTheme
    Keymaster
    Purchased
    Supported

    Hi,

    Please use header-scrolled instead of header-scrolling.

    Update the custom CSS:

    .header-scrolled .logo-a,
    .header-scrolled #navi-trigger { color: #333; }

    Remove the inline-CSS color: white; on navi-trigger-text-menu

    Regards!

Viewing 8 posts - 1 through 8 (of 8 total)

You must be logged in to reply to this topic.

Join Newsletter(FREE)

Subscribe to our newsletter to receive news & updates. We promise to not spam you, super promise!