Learn how to fix the Enfold white space below header issue with easy step-by-step solutions and expert tips for a polished website layout.
I recall the first time I saw it. That frustrating white gap, lounging proudly just beneath the header of my WordPress site, as if it’s the ruler of the domain. I was employing the Enfold theme, one of the most versatile and popular themes around, and yet, no matter how hard I tried, I just couldn’t eliminate that unwanted space.
No matter what I added underneath, the hero image, color block, or piece of text, there it was: the Enfold [ Empty Space ] below header that just won’t go away. If you’ve landed here, looking at the same layout dilemma, wondering which mystic CSS incantation or Enfold theme parameter is going to send it packing for good, or perhaps you’re seeking to know how to double space in Google Docs to make your content easier to read, you’ve stopped at the right place.
Let me guide you not only through the solution for fixing that gap in your WordPress layout, but also the reason why, so you can repair it with confidence.
Article Breakdown
The Problem: That Irritating Enfold White Space Under Header
Let’s keep it real: if you invest hours crafting a lovely homepage, the last thing you want is an unexpected chunk of white space ruining your design.
What I observed was this: my header finished, and before the actual contents, there was a strange blank strip, the way that my contents were hesitant to rise too high up the page. And I wasn’t the only one. A search revealed dozens of forum questions that asked the same thing.
And I understand. You want your site to feel neat. Clean. Professional. That area gives the appearance of something being broken. And kinda is, but fortunately, that doesn’t have to be due to anything you’ve done.
Instant Solution for the Impatient
If you are in a hurry (as I was initially), try this first:
Add This to Your Quick CSS:
#main {
padding-top: 0px !important;
margin-top: 0px !important;
You can copy and paste it into Enfold > General Styling > Quick CSS, or navigate to Appearance > Customize > Additional CSS.
Next, check your website. If the Enfold white space below the header has disappeared, you’re done!
But if that didn’t fix it (or if you’re wondering why it existed to begin with), let’s dig in.
A Visual Perspective: What It Really Looks Like
Picture this: you are opening your carefully designed homepage. Your header is neatly positioned at the top, logo aligned, navigation responsive, and then. suddenly, an expanse of emptiness before your content even greets you.
It looks like this:
Before Fix:
[ White Space
[Hero Image or Color Section]
It disrupts the entire visual flow. Particularly if the first section is meant to sit flush against the header, such as on a landing page or full-screen hero.
Why does this occur in Enfold
The Enfold theme is strong, but with that comes. a ton of subtle settings. The Enfold white space below header typically originates from one of these sources:
1. Header Behavior Settings
Enfold theme has sticky headers, transparent headers, shrinking headers, and so much more.Some of these settings apply top padding to account for the header’s dynamic behavior.
2. Padding for Content Element or Colour Section
Many times the first item under your header, such as a Color Section, has some default margin or padding. A 50px top padding, even, can appear to be a canyon when you simply want everything to be tight.
3. Sticky Header + Transparent Header
That was the one that stumped me. I had a transparent header and sticky settings activated, which caused Enfold to include excess space to avoid overlap with the below content. Clever…. but not the effect I wanted.
4. Custom Page Settings
Sometimes Enfold theme’s “Advanced Layout Builder” saves settings that influence layout on a per-page basis. One page might look good, but another might have that dreaded Enfold white space below the header.
Step-by-Step Fix for Beginners
Here is how I actually resolved it, step for step.
Step 1: Verify Enfold Header Settings
- Proceed to your WordPress dashboard.
- Click Enfold > Header > Header Behavior.
- Search for these settings:
- Sticky Header
- Transparent Header
- Header Custom Height
Disable the Transparent Header and observe how things go. Alternatively, try a different behaviour. Occasionally, switching off one of these and then switching it on again does the trick.
Personal Tip: I once accidentally turned on a transparent header on every page. A week later, I figured that was the problem. Oops.
Step 2: Verify First Section’s Padding and Margin
Now, go to the home page and edit using the Advanced Layout Builder.
- Click the first section (most commonly a Color Section).
- Search for the “Section Padding” setting.
- Set the Padding to 0px.
Additionally, take a look at the “Margin” setting, especially the Top Margin.
If you notice 50px, try altering that to 0px and reload the page.
Pro Tip: Occasionally the space isn’t the padding within the section, but the top margin that is creating the space.
Step 3: Add Custom CSS (if Required)
You can’t see that gap anymore. Now, let’s call the professionals.
Insert this into the Quick CSS or Custom CSS section.
#main {
padding: 0px !
margin-top: 0px !important;
However,
If you wish to have this change just on the home page,
.home #main {
padding: 0px !
top margin: 0px
Bonus Fixes for Special Cases
Transparent Header Specific Fix
If you require a transparent header but also wish to have content flush to the top, add
.html_header_transparency #main {
margin-top: -80px;
No,
Adjust the number according to your header height.
Fix for All Pages
When creating a consistent design throughout several different pages, use the #main CSS for all of them (as above) and have your layout builder elements free of excess padding.
Before and After Comparison
Here is how my site appeared before and after the repair:
- Header on top
- A massive blank white area
- Hero image pushed down awkwardly
Individuals
- Header flush to the hero section
- Smooth visual progression
- A “real designer” aesthetic that came across as fresh and thoughtful
It is the sort of polish that causes people to exclaim, “Wow, this is so professional” without realizing why.
Troubleshoots Frequently Asked
Why does this occur only on certain pages?
The Enfold theme has per-page header behavior. Verify the “Header visibility and transparency” settings on a per-page basis (while in the right-hand sidebar while editing).
How to repair it on mobile?
Occasionally, padding has different results on mobile. Apply media queries to your CSS:
@media only screen and (max-width: 768px)
#main {
padding-top: 0px !important;
Thus,
Can I eliminate the header altogether?
Yes. Go to Page Settings > Header visibility and choose “Hide Header on this page.”
Conclusion: How I Transformed from Being Frustrated to Confident
Repairing that Enfold white space under header took me by surprise: even the most superior themes may have flaws, and at times, a bit of detective effort takes leaps.
I kept refreshing my site at least 20 times, wondering, “Did I just break it more? Ah. did that repair it?” But once I realized the way the header settings, padding, and the smart behaviors of the Enfold theme interacted with each other, I got it.
And now? Whenever I create a new Enfold theme site, I’m aware of just what to watch for. I hope this tutorial spares you hours of trial-and-error and provides you with that moment of “aha!” so much sooner. Because, hey, your website deserves to seem just about as sleek as your vision. And that pesky Enfold white space under header? That’s no match for you anymore.
Key Taking:
- If this guide helped you, feel free to share it with other Enfold theme users. And if you’re still stuck, drop a comment below, I’d love to help. We’ve all been there, staring down an uncooperative layout at 2 AM, wondering if we should’ve just become a yoga instructor instead of a website builder.
- But you’ve got this. Enfold white space below header be gone.
Additional Resources:
- Solutions to Remove the White Gap Below the Header: A common issue among Enfold theme users is the persistent white gap beneath the header. This section explores effective solutions to remove the unwanted space with simple adjustments and CSS codes.
- Adjust the Header Height: Sometimes the white space results from excessive padding or margin in the header. Reducing the header height can help minimize the space.
- Go to Dashboard > Enfold > Header.
- Set a custom pixel height that matches your logo’s dimensions.
