Okay
  Public Ticket #2027711
dark or light version different on pages
Closed

Comments

  • GrupoDNA started the conversation

    Hi, I wonder how can I set different logo for pages depending on the dark or light version I want to have.

    thank you

  •  875
    Linh replied

    Hello

    You can edit your page, scroll to bottom at Page Settings section to set custom header and logo for that page.

    How to Customize the Style of Header/ Footer/ Top Bar?

    Thanks

  • GrupoDNA replied

    thx

  • GrupoDNA replied

    hi,

    Ok I managed to to that but with css, better to customize.

    Is it possible to dissociate the header "normal" and the sticky header.
    I have dark logo in normal display but as I scroll the sticky header, witch has darkbackground, needs light logo !
    how can I manage to do that ?

    thank you.

    B

  •  875
    Linh replied

    Hello

    The logo is fixed so you can not change it. You can use the css code to change sticky header style to other color to make it display better.

    Thanks

  • GrupoDNA replied

    Hi, can you provide me the css to make do this change please, I tried but couldn't find.

    thank you very much

  •  875
    Linh replied

    Hello

    Yes it can help you check and style css better if you can provide a live site url.

    Thanks

  • GrupoDNA replied

    Hi, thank you linh, sorry site is not live, local only

    Any code or css you can send ? 

    thank you very much

  •  875
    Linh replied

    Hello

    It is depended on your header style and menu section. Each site will have separate structure. I can not give the right css code to help without checking it. 

    Thank for your understanding.

  • GrupoDNA replied

    Hi, I understand, 

    I have set in all my site :

    TOP BAR 04
    HEADER 08
    PAGE TITLE BAR : HIDDEN

    so, my normal header is with dark logo 
    my fixed header needs light logo as the background is dark

    Don't know how to adjust css 

    headroom--unpinned .light-logo  and ,.headroom--unpinned .dark-logo

    thank you

  •  875
    Linh replied

    Hello

    You can try this code to to set sticky header (fixed header) background color and menu item color:

    .headroom.headroom--not-top .page-header-inner {background-color: #fff !important;}
    .headroom.headroom--not-top #menu-primary-menu > li > a {
        color: #333 !important;}
    

    Thanks

  • GrupoDNA replied

    Hi Linh, I manage to do the background via customizer, what I need is to have a different logo version from normal header and the sticky header.

    normal header : dark logo

    sticky header : light logo.

    thank you to give me some css to do that.

    best

  •  875
    Linh replied

    Hello

    You can use this css code to apply for header 08:

    .header-sticky-both .headroom.headroom--not-top .branding img.light-logo {
        display: block !important;
    }
    .header-sticky-both .headroom.headroom--not-top .branding img.dark-logo {
        display: none !important;
    }
    

    Thanks

  • GrupoDNA replied

    Awesome, it is working.

    thank you very much

  •  875
    Linh replied

    You are welcome.