How can I stop the sticky header from overlapping the body when it maximizes?

Can anyone help with this? I could just disable the sticky header and problem solved, but I like the sticky header, so if anyone can help I’d greatly appreciate it.

Cannot reproduce your issue :/

Hi @d4z_c0nf

You mean you don’t know how to fix the problem or you don’t understand what problem I have??

The header just starting overlapping the body when i added my logo, before that it was all good. I really don’t want to disable it, but if there’s no fix then I’ll have to.

#main-wrapper {margin-top: 10px;}

Hi @rdellconsulting

I’ve tried adding a top margin to the main wrapper but it doesn’t work. Also tried increasing the margin but the problem persists. The header goes crazy when you scroll back up, it cover a bit of the body then it covers more then less, headers’ gone mad! Any other suggestions would be greatly appreciated.

#main-wrapper {margin-top: 40px;} works now in FF, though seems to be some javascript clashing at times?

What browser are you using?

Hi @the MadWiddler1200 ,
mm I couldn’t reproduce the issue on your site. Now I can see it. For some reason the margin-top of the element which if responsible of setting the right gap (#tc-reset-margin-top) changes every time you back up. This could be due to some conflicting plugin, probably bwp, but I’m not sure, you should deactivate all your plugins and re-activate them one by one, in order to find the culprit.
That said, there’s a little “bug” in customizr that makes you lose 5px (when you use the border-top for the header of 5px).
For this last issue just add:

#tc-reset-margin-top {
    margin-bottom: 5px; /* or more */
}

Could that be the problem, javascript? I’m running the latest version of Firefox. margin-top: 40px; didn’t work.

I did what you suggested, @d4z_c0nf, I deactivated my plugins but the header was still overlapping the body. This problem only just started when I added my logo, I’m going to try and remove it and see what happens. I also added that piece of code, thanks.

Just removed the logo and the header no longer overlaps the body. My logo is the problem here. But why? How is it making the header overlap the body? Any fixes for this? Thanks for you help.

Ok it’s not a plug-in issue.
It’s a customizr issue. Basically it calls the function to recalculate the gap too early. You still have this problem when you switch to “just title” but the error is about few pixels so you can’t see it. But it’s still there.

Would you know how to fix this problem? Are the header and body divs? Can’t I just style the divs to clear:both; ? Quick extra question, whats the css selector for the menu items? I’d like to increase the font size on them. Thanks.

I think the problem could be solved also removing all the transitions effects on the headers elements but..
Adding this to your child-theme functions.php should fix the issue anyway:

add_action('wp_footer', 'sticky_header_patch', 9999);
function sticky_header_patch(){
?>
    <script type="text/javascript">
        jQuery(document).ready(function () {
            ! function ($) {
                //prevents js conflicts
                "use strict";
                if ( ! $("body").hasClass('tc-sticky-header') )
                    return;
                $(window).scroll(function(){
                    if ( $(window).scrollTop() <= 20 ){
                        setTimeout(function(){$(window).trigger('resize')}
                        , 250);
                    }
                });
            }(window.jQuery);
        });
     </script>
<?php
}

Consider that this is a temporary ad-hoc patch, it’s not perfect, and has at least 1 side effect: you’ll see the content below the header jumping up and down to settle again.

About menu items.. and css in general:
https://themesandco.com/snippet/firebug-best-spent-6-minutes/
https://themesandco.com/customizr/guide-css-html-customizr-wordpress-theme/
https://themesandco.com/customizr/css-glossary-for-the-customizr-wordpress-theme/

Got a syntax error with the code you provided…
I don’t think I’ll be fixing this problem. I also don’t want to remove the sticky header. I removed the border around the body, now the overlapping is less noticeable, but it’s still there. That’s the best I could do. Thanks for all your help.

Well the problem isn’t solved.
My fix above should “solve” the issue despite that little jump I told you.
You say you have a syntax error, what kind of? In php?
Are you sure you copied that code well? Just copied and pasted in my functions.php, doesn’t give me any error..