Docs

[Solomon]

Hi,

I seem to be having a similar problem, my navbar covers up the top section of my page when I check responsiveness for smaller devices (by shrinking window to a smaller size). I tried the codes you give above but none of them fully fix the issue. Do you have any advice?

My website: http://selfknowledgemanagement.org

Many thanks!

[Thai]

Hi @solomon,

Try adding following CSS under Appearance > Customize > Custom > CSS:

@media (max-width: 979px){
    .x-main {
        padding-top: 201px;
    }
}

Hope it helps.

[Solomon]

Hi, thanks for your swift reply! That code does help with the shrinking, but I realised that even when I am on my laptop (13″) the top section of my page is cut off… Can this be fixed?

[Christopher]

Hi there,

Please add this :

body.x-navbar-fixed-top-active .x-navbar-wrap {
    height: auto;
    min-height: 150px;
}

Hope it helps.

[Solomon]

Hi, unfortunately not quite, the top is still cut off and when I decrease window size there’s a huge gap between top section and navbar…

[Paul R]

Hi,

Please remove the code in your custom css that reads

@media (max-width: 979px){
    .x-main {
        padding-top: 201px;
    }
}

and

body.x-navbar-fixed-top-active .x-navbar-wrap {
    height: auto;
    min-height: 150px;
}

Then add this code instead.

body header.masthead {
    min-height:201px;
}

Hope that helps.

[Solomon]

Hi, yes, that worked, thank you! (When I look at my site while logged into WordPress, the alignments still have issues, but once logged out it looks fine.)

Thanks for your great support once again!

[Thai]

You’re most welcome 🙂

[photomeblack]

The code in reply #277539 also works nicely, when scrolling back up on a mobile phone, while keeping the navbar above LayerSlider. Thank you!

[Paul R]

You’re welcome! 🙂

[Author]

Posts