Support » Theme: Meteorite » Header Padding and Spacing

  • Resolved raftingspot

    (@raftingspot)


    Hello,

    I would like to change/customize the amount of space that the headers take up. I have searched in your style.css file and I cannot find where to edit this. I would like to change the standard font size as well as what appears to be padding above and below the header. I do not like the additional white space that is generated.

    Looking at this particular site: http://raftingspot.com/gear/life-jackets/
    My issues:
    1) If you scroll down a little, the header menu snaps to be fixed and there is alot of whitespace above “Whitewater Rafting Paddles”. Anyway to fix this?
    2) Space between that header and the header below it is too much and I have no extra space in my page builder here. How do I change/hard code this?
    3) Space after headers and when the paragraph starts is too much. How do I change/hard code this? Example under header “1) Length” as this is a Heading 5.

    Thanks!

    The page I need help with: [log in to see the link]

Viewing 5 replies - 1 through 5 (of 5 total)
  • Theme Author terrathemes

    (@terrathemes)

    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!

    Theme Author terrathemes

    (@terrathemes)

    @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.

    Theme Author terrathemes

    (@terrathemes)

    @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.

Viewing 5 replies - 1 through 5 (of 5 total)
  • The topic ‘Header Padding and Spacing’ is closed to new replies.