Header Padding and Spacing

Hi @raftingspot,

1) I guess this comes from a script that is calculating the navigation height slightly incorrect. With the next update it should be fixed.

2 and 3) You can change the spaces between them with this code. Paste it in a child theme or use the additional css section of the WordPress customizer and adjust the numbers to your needs:

h1, h2, h3, h4, h5, h6 {
  margin: 25px 0 10px;
}

The default was 25px 0 25px. This should put the paragraphs closer together.

If you need to change the spaces for the headlines differently, you can also use something like this:

h1, h2, h3 {
  margin: 25px 0 10px;
}
h4, h5, h6 {
  margin: 15px 0 5px;
}

Please provide some feedback whether this works for you. Feel free to ask any other question you might have.

Regards,
Terra Themes

Just curious – any idea on the date for the next update to fix that height?
I pasted the code in the additional css section and this fixed everything and I like the ability to customize it.
Thanks for the quick response and helpful answer!

@raftingspot,

maybe I get the update finished this evening (CET) or this weekend. Depends on the amount of fixes and how long the testing takes.

@raftingspot,

I tested your issue with the large white space after scrolling just some pixel. The fix I tried out is causing some bad behaviour in other scenarios, therefore I won’t implement it in the next update.

The white space appears because if you scroll just some pixel, the navigation bar gets smaller with a transition of 300ms. If you scroll up, the height changes with the transition again, but since this happens after you stopped scrolling (because you’re at the top already) the change of the height isn’t recognized.

This could be an approach to fix it:
Catch the height of the navigation 300ms after scrolling again. This brings the content closer as you wish. The only issue this is causing is a special behaviour if you scroll up a larger amount than just these few pixels.

To try this, download and activate a plugin for custom Javascript like Simple Custom CSS and JS and use this jQuery code:

$(function() {
  $(window).on('load resize scroll', function() {
    // as normal get the height on scroll
    $(".nav-placeholder").height($(".nav-container").outerHeight());
    setTimeout(function (){
    // refresh height after duration to catch nav-container height after transition-duration
      $(".nav-placeholder").height($(".nav-container").outerHeight());
    }, 300);
  });
});

In my honest opinion it’s not really that bad that there is a larger white space after scrolling only a few pixel. I don’t think many users would do this and then wonder about that space. Nonetheless, feel free to test the solution above. Maybe this special scroll behaviour is okay for your needs.

Sounds good, I am going to leave it as is instead of adding in the additional code. Like you said, it is a minimal issue at this time.