Docs

[Gnosis123]

Hello! I have a gap under the navbar on my homepage only.

It is in FF browser when page is loaded but vanishes as soon as you begin to scroll, is in IE browser regardless of scroll and doesn’t appear at all in Chrome.

Any clues?

[Gnosis123]

This reply has been marked as private.

[Christopher]

Hi there,

I don’t find mentioned gap in your site, please clear cache and test again. If you still have problem, provide us with some screen shots.

Thanks.

[Gnosis123]

This reply has been marked as private.

[Nabeel A]

Hi again,

Thank you for the screenshot, try adding the following code in your Customizer via Appearance > Customize > Custom > Edit Global CSS:

body.x-navbar-fixed-top-active .x-navbar-wrap {
    min-height: 130px !important;
}
.x-main.full {
    top: 0 !important;
}

Let us know how this goes!

[Gnosis123]

Sits ok on page load but content slips up once scroll begins in FF and IE. Content slips behind navbar in Chrome.

Creates a gap between breadcrumbs and navbar on all other pages.

Thanks

[Christopher]

Hi there,

Please update previous code to :

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

Hope it helps.

[Gnosis123]

ooops. Gap present on page load and then top content vanishes on scroll.

[Christopher]

Hi there,

It’s related to your CSS code, please remove this code :

@media screen and (max-width: 1379px){
#wpadminbar, .x-topbar, .x-navbar, .x-breadcrumb-wrap {
    position: absolute!important;
}
}
.x-topbar {
    margin-top: -43px !important;
    padding: 10px 0 !important;
    position: fixed;
    width: 100%;
    height: 42px;
}
.admin-bar .x-navbar-fixed-top {
    top: 76px;
    margin-top: 0px;
}
#top {
    margin-top: 45px;
}
#wpadminbar {
    padding: 5px 0 0 0!important;
    height: 42px!important;
}

Hope it helps.

[Gnosis123]

many thanks!

[Christopher]

You’re welcome.

[Gnosis123]

Didn’t realise that the navbar has now become unglued at breakpoint 979. Big gap between navbar and content on page load then jolts into fixed out of place position on scroll.

[John Ezra]

Hi there,

Thanks for updating the thread! You can add this under Custom > CSS in the Customizer or in your child theme’s style.css file.

@media (max-width:979px) {
    .entry-wrap {
        margin-top: -120px!important;
    }
}

Hope this helps – thanks!

[Gnosis123]

Homepage – gap is gone but navbar is in fixed position

All other pages – still large gap and same problem with navbar in fixed position

[Rupok]

Hi there,

Thanks for writing back. Kindly change the following :

.admin-bar .x-navbar-fixed-top {
  position: fixed;
  top: 76px;
}

to :

.admin-bar .x-navbar-fixed-top {
  position: fixed;
}

Change this :

.x-breadcrumb-wrap {
  margin-top: 128px;
  width: 100%;
  z-index: 20;
}

to :

.x-breadcrumb-wrap {
  margin-top: 50px;
  width: 100%;
  z-index: 20;
}

Add this code :

body:not(.home) .entry-wrap {
  margin-top: 0 !important;
}

And remove this as well to get rid of the gap :

.entry-wrap {
  top: 100px !important;
}

Note that you have lot of custom code that’s conflicting each other so it’s tough to rectify them. If your above codes are within media query, then make sure to change within media query.

Thanks

[Author]

Posts