1. LIMITED-TIME SALE Be a Pro Member @ $99 / lifetime & access all our 16+ premium Divi extensions: Divi Block Pro, 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.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.
Learn More About Divi BlockFree Version ~ 340+ Free Blocks

Header only visible in sticky state

Discussion in 'Free Divi Community Forum' started by Juli, Nov 2, 2022.

  1. Juli

    Juli New Member

    Hi!

    I'm trying to create a sticky header which is invisible in the initial state and moves in from the top when scrolling down. In theory I do know how this is done but it doesn't work. I've been trying this for several days now and can't fix it.

    Here is what I do:
    • I create a header
    • I make it sticky
    • under section setting - design - transform translate I put -200px for the vertical translation in the normal state and reset the translation for the sticky state
    And this is the part where I'm stuck! With the steps above I get a white bar on top of my page. If I go to section settings of my header - advanced - position and change it to "absolute" then I don't see the header at all (neither initial state nor when scrolling).

    What am I making wrong? I would really appreciate your help!
    Thanks, Julius
     
    1. PRO MEMBER PERKS Divi Block Pro - Premade horizontal timeline design for your Divi site without using any plugins:View Demo
  2. Divi.Help

    Divi.Help Administrator
    Staff Member

    To fix the white bar issue, try the below CSS in Divi > Theme Options > Custom CSS & see if it helps:
    Code:
    Log In or Sign Up to view this code.
    If not, kindly share your URL.
     
  3. CLM

    CLM New Member

    Hi there, I had this same issue on a new website build. I added your code above, and it fixed the problem for all except for 1 set of sub-pages:
    https://robbinswatson.wpenginepowered.com/our-people/ and then navigate to any of the profile pages. They have a white space at the top. Do you know why?
    Thanks
     
    1. PRO MEMBER PERKS Divi.Help Pro Layout Packs - Beautifully crafted Divi layout packs for you to kick start your Divi sites:View Demo
  4. Divi.Help

    Divi.Help Administrator
    Staff Member

    It looks like the page has their own CSS styling, which caused the issue. You may override it by adding the below CSS in Divi > Theme Options > Custom CSS:
    Code:
    Log In or Sign Up to view this code.
     
    CLM likes this.
  5. CLM

    CLM New Member

    Brilliant - thank you! That has fixed the individual profile pages.

    The website homepage https://robbinswatson.wpenginepowered.com/ also has a white space above it. I tried to fix this using your example above but couldn't get it to work. Can you suggest a fix for the homepage too, please?

    Thanks
     
    1. PRO MEMBER PERKS Divi Block Pro - Premade promo bar / notification bar with close button for your Divi site without using any plugins:View Demo
  6. Divi Booster

    Divi Booster Divi Expert

    Hey CLM,

    On your homepage, the hero section has 30px top padding, which is pushing the slider (which provides the main background image) down. To fix this, remove the top padding from the hero section and move it to the slider slides instead. Here's the CSS to do it:

    Code:
    Log In or Sign Up to view this code.
    Hope that helps!
     
  7. CLM

    CLM New Member

    Great, thanks, that's very helpful. I'm not sure why these issues appeared in the first place but I think I need to go back to the original developer and find out!
     
    1. PRO MEMBER PERKS Divi Block Pro - Premade promo bar / notification bar with close button for your Divi site without using any plugins:View Demo
  8. Divi Booster

    Divi Booster Divi Expert

    You're welcome! Hopefully they can shed some light on it for you - I don't see any particular reason for the padding to have been set up the way it was...