Viewing 15 posts - 1 through 15 (of 15 total)
  • Author
    Posts
  • #695968

    Hello,
    Please check http://www.debierbeleving.nl
    On desktop, the logo disappears when scrolling down. On tablet, the logo will NOT disappear. How can I arrange that the logo also disappears on tablet when scrolling down?
    Thanks for your help!
    Martine

    #697401

    Hey famewebdesign,

    Please try adding this code to the Quick CSS section under Enfold > General Styling or to your child themes style.css file:

    @media only screen and (max-width: 1024px) {
    .header-scrolled .logo {
        opacity: 0;
    }}
    

    Best regards,
    Yigit

    #697865

    Thanks for your answer Yigit. Added the code, but can’t see any change.

    #697873

    Hi,

    Please post us your login credentials (in the “private data” field), so we can take a look at your backend.

    Login credentials include:

    • The URL to the login screen.
    • A valid username (with full administration capabilities).
    • As well as a password for that username.
    • permission to deactivate plugins if necessary.

    Best regards,
    Yigit

    #697877

    Sure. Thanks!

    #697900

    Hi!

    I adjusted your custom CSS code and changed it to following one

    .header-scrolled-full .logo, .responsive .logo {
            filter: alpha(opacity=0) !important;
            opacity: 0 !important;
            -webkit-transition: opacity 1s ease-in-out;
            -moz-transition: opacity 1s ease-in-out;
            -ms-transition: opacity 1s ease-in-out;
            -o-transition: opacity 1s ease-in-out;
            transition: opacity 1s ease-in-out;
    }
    

    Can you please flush browser cache on your tablet and review your website now?

    Regards,
    Yigit

    #697907

    Thanks Yigit!
    Now the logo is gone on pc and tablet…
    On pc the logo was visible untill you scoll down. Then it disappeared. But now there’s no logo anymore on pc als well as on tablet…

    #698682

    Hi Yigit,
    Can you please help me with my latest question? Now the logo is gone on pc and tablet.
    On pc the logo was visible untill you scrolled down. Then it disappeard. On tablet the logo was always visible. You changed the CSS on the website so the logo would also disappear on tablet when scrolling down but now the logo is gone…
    How can I fix this?

    #698972

    Hi,

    Sorry for the late response. We modified the css code in the Quick CSS field. Please remove browser cache or hard refresh before testing the page.

    Best regards,
    Ismael

    #698993

    Thanks for your reaction Ismael.
    unfortunately it does not work the way I would like it to work.
    The way it was before I asked my question here:
    On pc the logo disappeard when scrolling down.
    On tablet the logo shrinked when scrolling down.
    My question was how to make the logo disappear on tablet.
    When Yigit changed the code, the logo went missing on pc and tablet.
    When you changed the code, the logo was present on pc and tablet and on both devices the logo shrinked when scrolling down.

    So, now I restored the css code that Bas Smits (participant) gave me on another topic I posted here (https://kriesi.at/support/topic/mobile-header-issues/). When I first added this code, the logo on pc disappeard when scrolling down. On tablet the logo shrinked. Now I restored the code but strangly the logo only shrinks and does not disapear anymore on pc and on tablet.

    Can you please check one more time if you can help me? If it is not possible to let the logo disappear on pc as wel as on tablet when scrolling down, then my priority is to go back the way is was: logo disapear on pc and shrink on tablet when scrolling down.

    Thanks!

    #700370

    Hey!

    If it is not possible to let the logo disappear on pc as wel as on tablet when scrolling down,

    We modified the code again in the Quick CSS field.

     .header-scrolled .logo {
         opacity: 0;
     }

    This css code will hide the logo on scroll. You’ll see the logo diminish in size until it disappears completely while scrolling.

    Regards,
    Ismael

    #700402

    Thanks Ismael! Is it not possible to let the logo disappear on tablet too (only when scrolling down)?

    #700994

    Hi,

    It’s possible and it should be fixed now, I have added this code in your Quick CSS:

    @media only screen and (max-width:1024px) {
        #header .logo {
            filter: alpha(opacity=0);
            opacity: 0;
            -webkit-transition: opacity 1s ease-in-out;
            -moz-transition: opacity 1s ease-in-out;
            -ms-transition: opacity 1s ease-in-out;
            -o-transition: opacity 1s ease-in-out;
            transition: opacity 1s ease-in-out;
        }
        #header.av_header_transparency .logo {
            filter: alpha(opacity=1);
            opacity: 1;
        }
    }
    

    Please let us know if this fixed it on your end also :)

    Best regards,
    Nikko

    #701026

    Yes Nikko! Great! Thanks so much!
    Martine

    #701753

    Hi,

    Glad we could help :-)

    Please let us know if you should need any further help on the topic.

    Best regards,
    Rikard

Viewing 15 posts - 1 through 15 (of 15 total)
  • You must be logged in to reply to this topic.