Big Gap under Header (before page content)

Hello. Beautiful theme, but I have a big gape between the header and page content (on all posts/pages). Any idea what’s up? www.laleelifestyle.com

Hello,

You can try to use Page Builder template instead of Fullwidth.

Please feel free to ask any other questions that you might have.

Kind Regards, Roman.
aThemes Support

I just solved that putting this lines of code under Appereance>Customize>Additional CSS

.site-content {

  padding: 0;

}

Thank you. I did that and the gap went down a bit, but it’s still quite large… (I aso tried the css code below but it didn’t work on my site.)

Thx. It didn’t work for me :(.

Hello,

Try to also select Basic 1 - inside header option in Customize → Header → Menu section.

Kind Regards, Roman.
aThemes Support

That worked! Thank you.

BUT now the toggle menu opens with a black background and covers the whole page when open (even though there’s only 4 lines of menu). I have played with the colours every way I could.

  • this also means the menu text is invisible unless it’s white
    -now the menu items show up white periodically on the desktop page (when there si no toggle menu) also without cause (most times they’re black) which makes them invisible there (see the photo below).

The menu items are also showing up fuschia when I hover. I’ve changed all the background colours to white, and I can’t even find fuschia anywhere in the colours section.

Also, I’m wondering if the them is just supposed ot have a huge white space between the header and content? It shows up like that on all of the my blog pages. It isn’t REALLY bad looking (like it was on the front page, but it’s a giant white blank people see first when opening a blog post - I attached a photo - not the greatest use of space I could think of. Is there anyway just to get rid of that gap??


You are welcome!

Please create a new topic for each of your additional issues to keep the forum in good order and make it easier to help you. Hope for your understanding.

Kind Regards, Roman.
aThemes Support

I will do!
Can you tell me if there’s anyway to get rid of the white gape of blank space at the top of all of my other pages on this thread? It’s the same issue, just sitewide.

Try to use the following CSS code.

I also included two optional tweaks that I think might be useful in your case, hope you like them :slight_smile:

You can add CSS code in Customize → Additional CSS section.

/* Mobile menu occupies minimum height instead of full height */
@media (max-width: 1199px) {
  nav.main-navigation {
    bottom: unset;
  }
}

/* Set top mobile menu items submenu toggle color to avoid it being invisible */
ul:not(.sub-menu) > li > .subnav-toggle::before {
  color: white;
}

/* Make mobile submenu toggle wider to increase tap area (better usability, can be used with short menu items text) */
.main-navigation ul .subnav-toggle {
  width: 60px;
}

Also, please go to Customize → Colors → Header section and set black color for Top level menu items option to avoid your primary menu being invisible on top of the page.

Kind Regards, Roman.
aThemes Support

This is great. Thank you. Any help with the big gap under the header site-wide? It’s really annoying to have a blank space be front and center anytime someone clicks a page…

OK! This removed it:

.site-content {
    padding: 0;
}

Thanks for all your help!

OK, you are welcome!

Kind Regards, Roman.
aThemes Support

Heya. I’m still getting this big gap between the header and content on my pages and posts.


Can I fix this? I’ve fooled around so much making it go away elsewhere. Facebook ads actually gave me a warning about landing page quality when I took the header off of a landing page because there was 4-6 inches of blank space as soon as someone clicked. I’d really like to close this gap!
Thank you. It’s awesome in a lot of other ways!

Hello, try to use the following CSS code.

You can add CSS code in Customize → Additional CSS section.

#masthead-sticky-wrapper {
    min-height: unset !important;
}

Kind Regards, Roman.
aThemes Support