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

Solved Remove the white space at the top of the page

Discussion in 'Free Divi Community Forum' started by nadia, May 31, 2024.

  1. nadia

    nadia New Member

    Hi all, I would like to remove the white space at the top of the page under the transparent header, but I don't know how to do it. I used the code suggested in a divi tutorial to swap on scroll the header with another one, the code puts a space at the top of the page, but my header is transparent and I would like to understand if it is possible to eliminate this white space. Can you help me understand how to do this?

    Here the code I used: https://www.elegantthemes.com/blog/...ap-your-divi-header-for-another-one-on-scroll

    site URL: https://nadiii-test.netsons.org/wp-test/?cmp_bypass=vaialsito
     
    1. PRO MEMBER PERKS Divi Block Pro - Premade slide in bar design for your Divi site without using any plugins:View Demo
  2. Divi Booster

    Divi Booster Divi Expert

    Hi Nadia,

    Currently the white space is coming from a height of 31px set on the header placeholder element. You should be able to eliminate the white space by setting its height to zero with this CSS:

    Code:
    Log In or Sign Up to view this code.
    You can add it at "WP Admin > Divi > Theme Options > General > Custom CSS".

    Doing so doesn't seem to affect the functionality of the header, but it does make the background and page content move up under the header by 31px, so you might want to adjust the padding / margins on your content to compensate for this.
     
  3. nadia

    nadia New Member

    Thank you very much, it works perfectly!
    You have solved a big problem for me, I am a beginner and have been looking for a solution on the internet for days. THANK YOU!
     
    1. PRO MEMBER PERKS Custom Color Scheme + Premade Layouts - A perfect combination to boost productivity:Try Now
  4. Divi Booster

    Divi Booster Divi Expert

    You're very welcome, nadia! If there's anything else you need help with, just let us know. Thanks!
     
  5. Pauly Barker

    Pauly Barker New Member

    I still have this problem on my page. I have tried the CSS mentioned above, but it did not work. What else could I try?
     
    1. PRO MEMBER PERKS Divi Block Pro - Premade rolling text design for your Divi site without using any plugins:View Demo
  6. Divi Booster

    Divi Booster Divi Expert

    Hey Pauly, are you able to share a link to the page you're working on? There are a lot of things that could be causing it and it will be much easier to make useful suggestions if we can analyse it directly.

    If that's not possible, this post might be of some use in tracking it down:

    https://divibooster.com/removing-gaps-in-divi-builder-layouts/

    In particular, try the process in the "Identifying the Cause of Gaps" section - it will hopefully let you identify the affected element and that may be enough for us to suggest different CSS for you to try.

    Also, if you have any screenshots, please share those too. Thanks!
     
  7. Pauly Barker

    Pauly Barker New Member

    Hi Dan, thank you for your reply. here is the page:
    www.rickdonathan.com/test-home

    There is no margin, all set to 0. I tried adding a new section without any settings yet and placing it all the way at the top. It still shows the white box at the top, so it isn't a setting in the current section.

    upload_2025-1-31_15-53-20.png

    upload_2025-1-31_15-53-54.png
     
    1. PRO MEMBER PERKS Divi.Help Pro Layout Packs - Agency Divi layout pack featuring modern overlay archive blog layout with hover effects:View Demo
  8. Divi Booster

    Divi Booster Divi Expert

    Hey Pauly,

    Thanks for that. I get a "No Results Found" page at that URL, so perhaps the page has been removed or isn't public? That said, there is a gap at the top of that page, coming from the top padding set on the page container.

    You can remove it with this CSS:

    Code:
    Log In or Sign Up to view this code.
    It might be worth adding this CSS to see if it fixes the gap for you.

    Note that Divi sets this top padding to leave space for the header (which is absent on that no results page), so I'd check that your header looks okay on other pages if you add this CSS.

    If that doesn't fix it, is there another example page I can check out? Thanks!
     
    Pauly Barker likes this.
  9. Pauly Barker

    Pauly Barker New Member

    It is all fixed!! I was using an element instead of the default Header from divi! that's what was causing the space. all fixed, thank you for your help
     
    Divi Booster likes this.
    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