[Resolved] Is my header set up wrong? the top of the top container disappears under it..

[sevite]

Hello,

We are a self-funded non-profit and a volunteer set up our GeneratePress – we are having trouble now with the top of the top container on pages looking like it is disappearing under the header. It seems consistent with all pages, but is more obvious on some than others. I thought it was fixed. it is not.

Can you take a look and see if you can tell me how to fix the issue, whatever it is?

Thank you so much.

[Leo]

Hi there,

Any chance you can disable all plugins except GP Premium to eliminate conflicts from other plugins first?

Let me know 🙂

[sevite]

Hi Leo,

Thank you. I’ll be able to do that within the next three hours.

Pam

[Leo]

Sounds good 🙂

Something is adding nav-scroll-transition nav-scroll-fixed-top with some CSS to the site header which is likely causing the issue.

[sevite]

Hi Leo – if you are still around today – or someone else. SO, yes it is a plugin, Code Snippets. When I turn that off the pages display properly at the top. BUT, it has javascript in it regarding the header and turning it off breaks the header. I clearly need to get this rebuilt by someone who knows how to use GeneratePress. That will take a day or perhaps two. Can you see anything I can do in the meantime to not have a broken header when I have pages that look correct? I realize I could lose something that is in the header now, such as Gtranslate (it being on or off did not have an impact I could see) or the Donate option being green.

This is the code in Codesnippet with title: JavaScript Header

add_action( ‘wp_head’, function () { ?>
<script>
function myFunction1() {
var dots = document.getElementById(“dots1”);
var btnText = document.getElementById(“homemyBtn1”);
var moreText = document.getElementById(“more1”);

if (dots.style.display === “none”) {
dots.style.display = “inline”;
btnText.innerHTML = “Read more”;
moreText.style.display = “none”;
} else {
dots.style.display = “none”;
btnText.innerHTML = “Read less”;
moreText.style.display = “inline”;
}
}

function myFunction2() {
var dots = document.getElementById(“dots2”);
var btnText = document.getElementById(“homemyBtn2”);
var moreText = document.getElementById(“more2”);

if (dots.style.display === “none”) {
dots.style.display = “inline”;
btnText.innerHTML = “Read more”;
moreText.style.display = “none”;
} else {
dots.style.display = “none”;
btnText.innerHTML = “Read less”;
moreText.style.display = “inline”;
}
}

function myFunction3() {
var dots = document.getElementById(“dots3”);
var btnText = document.getElementById(“homemyBtn3”);
var moreText = document.getElementById(“more3”);
if (dots.style.display === “none”) {
dots.style.display = “inline”;
btnText.innerHTML = “Read more”;
moreText.style.display = “none”;
} else {
dots.style.display = “none”;
btnText.innerHTML = “Read less”;
moreText.style.display = “inline”;
}
}

function myFunction4() {
var dots = document.getElementById(“dots4”);
var btnText = document.getElementById(“homemyBtn4”);
var moreText = document.getElementById(“more4”);
if (dots.style.display === “none”) {
dots.style.display = “inline”;
btnText.innerHTML = “Read more”;
moreText.style.display = “none”;
} else {
dots.style.display = “none”;
btnText.innerHTML = “Read less”;
moreText.style.display = “inline”;
}
}
</script>
<?php } );

[Ying]

Hi Pam,

Give this CSS a try:

@media (min-width: 1200px) {
    div#page {
        margin-top: 81px;
    }
}

Adding CSS: https://docs.generatepress.com/article/adding-css/

[sevite]

Thank you Ying!! That worked like a charm. I am SO grateful. Thank you. Thank you.

[Ying]

You are welcome 🙂

[Author]

Posts