Okay
  Public Ticket #1543451
Main Navigation not working - re Enable Header Style on Scroll
Closed

Comments

  • JQL started the conversation

    Hello, As you can see on the homepage and other pages as well - the main header is not changing color when over black or white content. The settings have been set both on the page, as well as in the qode settings for header. Please advise: the behaviour i'm looking for is the following:

    upon loading, a translucent background, with white font. (just for the homepage) 

    upon scroll, the header is sticky but the background changes (at .5 translucency) to white background with black text and black background with white text, according to the content below. (Your "Enable Header Style on Scroll" setting) 

  •  702
    Qode replied

    Hello there,

    Please check your provided website link as we couldn't access it. - https://www.screencast.com/t/FXYajNv9Y

    There is no option in our theme to change header background color with scroll or with Enable Header Style on Scroll enabled. You can only set your header to be transparent at all times, so it can take the background color of the row. Or you could achieve what you want with some custom css, but we are going to need a link to your website and a WP admin access to it so we can assist you further. Thanks.

    Best Regards!

    The new and improved Online Bridge Documentation is live. Check it out now - LINK

    Best Regards,

    Qode

  • JQL replied

    Hello - we recently connected the domain - please see here: https://cdxadvisors.com

    Okay. Thank you. here is the expected results: 

    Homepage - 

    upon loading, a translucent background, with (white font just on the homepage) and with gark grey font ( on all other pages)

    upon scroll(all pages), the header is sticky but the background changes (at .2 translucency) to white background with black text and black background with white text, according to the content below.

    (also) is there any way for the footer to show up on our homepage (desktop) being the split screen feature?

  •  702
    Qode replied

    Hi again,

    We are going to need a WP admin access to your website so we can assist you further, so please REPLY IN PRIVATE and provide us with that. We are asking you for it because it will make our job easier of assisting you. Thanks.

    All the Best!

    The new and improved Online Bridge Documentation is live. Check it out now - LINK

    Best Regards,

    Qode

  •   JQL replied privately
  •  702
    Qode replied

    Hi,

    Just to be sure, before we make any changes, you want black header background with white font over white content or black content? Same goes for white header background, do you want it with black font over black or white content?

    All the Best!

    The new and improved Online Bridge Documentation is live. Check it out now - LINK

    Best Regards,

    Qode

  • JQL replied

    white background with black text - on light background

    black background with white text- on dark background

    Thank you

  •  702
    Qode replied

    Hello again,

    Sorry for late response, we were working with limited resources over the weekend.

    We did as you requested.

    We enabled Header Style on Scroll on every page and set each row to corresponding header skin. We tweaked some settings in Qode Options > Header and added this css in Qode Options > General > Custom Code > Custom CSS field:

    .light.header_style_on_scroll nav.main_menu>ul>li:before,
    .light.header_style_on_scroll nav.main_menu>ul>li>a:hover,
    .light:not(.sticky):not(.scrolled) nav.main_menu>ul>li:before,
    .light:not(.sticky):not(.scrolled) nav.main_menu>ul>li>a:hover,
    .light.scrolled nav.main_menu > ul > li:hover > a span {
        opacity: 0.8;
    }
    header.light.scrolled nav.main_menu > ul > li > a,
    header.light.sticky nav.main_menu > ul > li > a,
    .light.scrolled nav.main_menu>ul>li>a {
        color: #fff !important;
    }
    body:not(.home) .light:not(.sticky):not(.scrolled) nav.main_menu>ul>li>a {
        color: #666 !important;
    }
    body:not(.home) .light.header_style_on_scroll nav.main_menu > ul > li.active > a,
    body:not(.home) header.scrolled nav.main_menu > ul > li.active > a > span
    {
        color: #44a8c6 !important;
    }
    .light.header_style_on_scroll,
    .light.header_style_on_scroll,
    .light.scrolled{
        background-color: rgba(0, 0, 0, .2) !important;
    }
    body:not(.home) .light:not(.sticky):not(.scrolled){
        background-color: transparent !important;
    }
    .light:not(.sticky):not(.scrolled){
        background-color: rgba(0, 0, 0, .2) !important;
    }
    .dark.header_style_on_scroll nav.main_menu>ul>li:before,
    .dark.header_style_on_scroll nav.main_menu>ul>li>a:hover,
    .dark:not(.sticky):not(.scrolled) nav.main_menu>ul>li:before,
    .dark:not(.sticky):not(.scrolled) nav.main_menu>ul>li>a:hover,
    .dark.scrolled nav.main_menu > ul > li:hover > a span {
        opacity: 0.8;
    }
    header.dark.scrolled nav.main_menu > ul > li > a,
    header.dark.sticky nav.main_menu > ul > li > a,
    .dark.scrolled nav.main_menu>ul>li>a {
        color: #000 !important;
    }
    body:not(.home) .dark:not(.sticky):not(.scrolled) nav.main_menu>ul>li>a {
        color: #666 !important;
    }
    body:not(.home) .dark.header_style_on_scroll nav.main_menu > ul > li.active > a,
    body:not(.home) header.scrolled nav.main_menu > ul > li.active > a > span
    {
        color: #44a8c6 !important;
    }
    .dark.header_style_on_scroll,
    .dark.header_style_on_scroll,
    .dark.scrolled{
        background-color: rgba(255, 255, 255, .2) !important;
    }
    body:not(.home) .dark:not(.sticky):not(.scrolled){
        background-color: transparent !important;
    }
    .dark:not(.sticky):not(.scrolled){
        background-color: rgba(255, 255, 255, .2) !important;
    }

    Hope this helps,

    Best Regards!

    The new and improved Online Bridge Documentation is live. Check it out now - LINK

    Best Regards,

    Qode

  • JQL replied

    Hi - It's not exactly what I was looking for. Can you please un-do the settings and remove the CSS? 

    thank you. 

  • JQL replied

    Nevermind I got it.

    Thanks. 

  • JQL replied

    Any idea why on macbook the hover boxes show a split second of the image reversed?? It doesn't happen on chrome. See the over flip boxes on this page: https://cdxadvisors.com/transactions/

  •  911
    Qode replied

    Hi, 

    Thanks for writing in.

    We are sorry that didn't work out for you, we set those settings as we understood you. Dark header with white font at 0.2 transparency over dark content and light header with black font at 0.2 transparency over light content. That's for the home page. On the other pages it is the same except the font color, which is grey, as you requested. You can configure provided css code to your liking.

    You can additionally change your header style for rows as you want it from rows settings.

    In this moment this element doesn't work very well on some versions of Safari since browser doesn't support some advanced transitions. We will see with our dev team to improve this feature in some future update, but also note that this may be fixed with browser updated in some future versions.

    If there’s anything else we can help you with, please let us know.

    Best Regards!

    The new and improved Online Bridge Documentation is live. Check it out now - LINK

    Best Regards,
    Qode

  • JQL replied

    thanks for all your help. signing off.

  •  911
    Qode replied

    You are welcome! 

    The new and improved Online Bridge Documentation is live. Check it out now - LINK

    Best Regards,
    Qode