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

Hi there,

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

Let me know :)

Hi Leo,

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

Pam

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.

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 } );

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/

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

You are welcome :)