Header is overlapping first sections on each page in mobile breakpoints

[ccbeglin]

Ever since this morning, the header on our site seems to be overlapping the first section on each page. It’s only on mobile breakpoints, but it is site-wide. Could someone help us understand why this is happening all the sudden and how we can fix it?

[nabeel]

Hi Courtney,

Thank you for reaching out to us. It seems like the following code in your custom CSS is causing the issue:

           @media (max-width: 979px) {
                .x-navbar {
                    position:fixed;
                    top: 0;
                    right: 0;
                    left: 0;
                }

                .x-slider-container.below {
                    margin-top: 216px;
                }
            }

Please find and remove the above code to fix the issue. Let us know how this goes!

[ccbeglin]

Hi there, we tried removing that code on our dev site and it did not fix the issue (please see image below). We did notice that removing that code caused issues on other page though, adding a gap between the header nav and the hero (see second issue below). Please let us know if you have other suggestions, thanks.

[marc_a]

Hi Courtney,

The suggestion given by my colleague is the root cause of your issue with the mobile view. I believe what might happen is that there’s a cache in your website that needs to be cleared.

I suggest that clear all type cache including the Style Cache from Cornerstone > Settings > System > Clear Style Cache and check in the incognito/private mode of the browser.

Hope that helps and let us know how it goes.