1. PROMO Upgrade to Pro Membership @ $99 / Lifetime & access all our 16+ premium Divi extensions: Divi Block, Carousel Toolkit, etc.LEARN MORE
Dismiss Notice
NEW Divi.Help Pro Carousel AI Toolkit - Magically turn your Divi design into carousel, simply by using our online toolkit. No plugins needed. Now it works with Divi 5 as well!Try our carousel AI toolkit
BEST Divi Block - A revolutionary drag & drop tool to easily mix & match 960+ premade blocks (Light & Dark) to kick start your Divi site design. Special module designs are included as well. Also newly added AI generator & color. Now it works with Divi 5 as well!
Learn More About Divi BlockFree Version ~ 340+ Free Blocks

Solved logo visible after scrolling

Discussion in 'Free Divi Community Forum' started by cwly, Dec 20, 2020.

  1. cwly

    cwly Member

    Hey,

    I want to have my logo visible on all my sites excpet for the fullwidth header of my landing page.

    On ma landing page the logo should not be visible when I open the site but as soon as I start scrolling down it should be visible.

    In the theme customizer the "hide logo" option is unchecked, so it is visible on all my pages.

    I alread tried something like

    HTML:
    .page-id-MYID #logo {
    display: none;
    }
    but it removes the logo from the entire site.

    Can you help?

    Thanks!
     
    1. PRO MEMBER PERKS Divi Ultimate Header Plugin - Custom Divi Builder header on desktop + default slide in / fullscreen menu on mobile:Learn More
  2. Problemizer.com

    Problemizer.com Divi Expert

    Hello,

    You can try using this JavaScript code that I wrote. You can add this to Divi -> General -> Integration

    Code:
    Log In or Sign Up to view this code.
    Also, you need to add this CSS code to hide the logo initially on your landing page. You can add this to Divi -> General -> Custom CSS
    Code:
    Log In or Sign Up to view this code.
     
  3. cwly

    cwly Member

    Thanks for your answer.

    Your code almost works. The logo disappears when scrolling down and appears again when I scroll up.
    But when I initially load the page the logo is still there.

    Also, I put your code inside a code module within my main page. Otherwise this effect is available on all my pages which I don't want to have.
     
    1. PRO MEMBER PERKS Divi Block Pro - Premade gallery carousel design for your Divi site without using any plugins:View Demo
  4. Problemizer.com

    Problemizer.com Divi Expert

    This is what this part is for.
    Code:
    Log In or Sign Up to view this code.
    Just now I added important, and also be sure that you change CHANGE-WITH-LANDING-PAGE-ID with actual page id on which you want to hide logo initially.
     
  5. cwly

    cwly Member

    @Problemizer.com thanks for your support.

    Since Christmas is over now I can care for the website again.

    I checked everything again but still, the logo is initially visible after loading the page. When scrolling down and up again it disappears. That is exactly how it should be. But it shouldn't be there on a newly loaded page.

    You can check it out here: https://247racing.de/
     
    1. PRO MEMBER PERKS Divi Cart Count Plugin - Easily add cart count to your Divi cart icon. 6 different styles to choose from:Learn More
  6. Problemizer.com

    Problemizer.com Divi Expert

    That is because I didn't see that you put this CSS as I instructed.

    .page-id-1349 img#logo {
    visibility: hidden;
    }

    This page ID class will only target the homepage. I figured that is what you want.
     
  7. cwly

    cwly Member

    well... my mistake. I put the CSS indeed, but I missed the leading "." so it wasn't recognized as CSS at all.

    What I have now is no logo on my landing page at all. I am really confused.

    But the JS seems to work since the logo disappears after scrolling down an up on this page:
    https://247racing.de/impressum/
     
    1. PRO MEMBER PERKS Divi.Help Pro Layout Packs - Modern & powerful Agency Divi layout pack, featuring team carousel, sliding menu, etc.View Demo
  8. Problemizer.com

    Problemizer.com Divi Expert

    You need to remove "!important" from your CSS code.

    As for JS code, if you want it to execute only on the landing page, use this code instead.

    Code:
    Log In or Sign Up to view this code.
     
  9. cwly

    cwly Member

    hell yeah! Seems like it does what I wanted to have :)

    Thank you very much :) I like it *thumbsup*
     
    Problemizer.com likes this.
    1. PRO MEMBER PERKS Divi Block Pro - Premade horizontal timeline design for your Divi site without using any plugins:View Demo