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

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) 

  •  590
    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?

  •  590
    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 Bes

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

    Best Regards,

    Qode

  •   JQL replied privately
  •  590
    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

  •  590
    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