Header navigation overlaps content on small devices

[ULinn]

Hi there,

using the pro theme (but not the header-builder), my top navigation overlaps the page content, mainly on small screen sizes. On “normal” pages I found a workaround by adding a gap for mobile diveices, but the problem also occours when posts are shown - where I can’t manipulate with an additional gap.

How can I have my pages be seen completely?

Find URL in secure-link.

Best regards

Uli

[rad]

Hi Uli,

Thanks for reaching out.

Please remove the gap and then change your header height in Theme Options > Header > NAVBAR > NAVBAR TOP HEIGHT

Increase it until the overlaps is fixed, your site is not loading on my end too due to “too many redirects” so I can’t recommend the exact height it needs.

Thanks!

[ULinn]

Hi Rad,

thank you for your help. While increasing the Navbar Top Hight, the navbar get’s bigger, but the image is still hidden.

Please check again the url, it should work now.

Best regards

Uli

[lely]

Hi Uli,

In normal setup, Rad’s suggestion should work. It is not working on your site because of this custom CSS that makes the entire header fixed.

.masthead {
    position: fixed;
    width: 100%;
    z-index: 9999;
}

So to fix it on single post pages, please try adding this CSS on Theme Options > Global CSS:

.single-post .x-container.main:not(.x-row):not(.x-grid) {
    margin-top: 133px; /*Adjust this accordingly*/
}

Hope this helps.

[ULinn]

Hi Lely,

thank you - worked perfect! Gerat support!

Uli

[jade]

You’re most welcome, Uli.