Mobile Header Issue (Integrity Stack)

[lancesalyers]

Following the advice I have found on these forums, I have setup two different headers for desktop/mobile, and used the “hide during breakpoints” buttons to toggle them on/off when appropriate. However, when the breakpoint is reached to trigger hiding the main header and showing the mobile header, it behaves as follows:

• As I start to scroll down, the header appears where it should at the bottom and moves up, just like the desktop header (Ex A - https://www.screencast.com/t/pYQX9teUCSNZ)

• Then the header jumps to the top of the screen, leaving behind its footprint as a blank white bar, which is where it is supposed to remain until the scrolling pushes it all the way to the top (Ex B - https://www.screencast.com/t/BpsKXqR9)

• Then, once it’s fully scrolled, the header doesn’t stick to the top, but sticks near the top, leaving this gap (Ex C - https://www.screencast.com/t/0OwirlgTRbzP)

My site address: www.5x5advisory.com/front

Thanks for your help.

[nabeel]

Hi there,

Thanks for writing around! To fix this, just add the following CSS code in the Theme Options > CSS:

@media screen and (max-width: 767px) {
  #sticky_menu {
    top: 0 !important;
  }
}

Let us know how this goes!

[lancesalyers]

@Nabeel

@media screen and (max-width: 767px) {
#sticky_menu {
top: 0 !important;
}
}

Thanks Nabeel! I added the code, and here’s what it does now:

• Ex D shows where the menu works as expected until one more scroll down causes it to jump up (see Ex E), revealing a smaller but still visible white bar/footprint

* Ex F shows that once the menu sticks to the top, it’s too far up and is mostly hidden from view.

Thanks again for your help!

[paul.r]

Hi,

You can try this code instead.

.e260-6.x-bar.x-bar-fixed {
      top: 0 !important;
}

Please add code in Header > CSS instead of Theme Options > CSS

Thanks

[lancesalyers]

Thank you, Paul. I inserted the code as you said, and based on you saying “try this code instead” I deleted the code Nabeel suggested from the Theme Options/CSS.

Unfortunately, the mobile header has resumed sticking well below the top of the screen, like so:

[nabeel]

Hi again,

Let’s get back to the code I provided, you’re seeing this problem because of the WP admin bar as you’re viewing your site as an admin. This can be fixed by replacing the previous code with the following one:

@media screen and (max-width: 767px) {
  #sticky_menu {
    top: 0 !important;
  }
  .logged-in #sticky_menu {
    top: 46px !important;
  }
}

Let us know how this goes!

[lancesalyers]

Perfect! Thanks Nabeel.

[lancesalyers]

Hmmm … weird. It’s works perfectly on the home page, but my “About” page is still showing the same gap:

[nabeel]

Hi again,

I checked your other pages and I see a different setup of ID sticky_menu, on your homepage it’s given to the actual bar but in your About page I see it in bar container that’s why it doesn’t work on other pages. Are you using a different header on other pages?

To resolve this issue, give your mobile bar a class e.g mobile-bar-fix and then replace the previous code with this one:

@media screen and (max-width: 767px) {
  .mobile-bar-fix {
    top: 0 !important;
  }
  .logged-in .mobile-bar-fix {
    top: 46px !important;
  }
}

If you’re using different headers on different pages, make sure to give mobile-bar-fix class to all of your header’s mobile bars.

This should fix the issue. Let us know how this goes!.

[lancesalyers]

Hmmm. I do have 2 different headers: one with the large hero graphic for the initial visit to the site, and then one without for all other pages and internal links going back to the main page.

I saw where I had the #sticky_menu in the container instead of the bar – fixed that.

Than added the “mobile-bar-fix” class to the mobile bars for each of the 2 headers … then added the css code as you said.

Still looks like this:

[friech]

Hi There,

I see that you applied the CLASS mobile-bar-fix to your mobile bar, but I dont see the custom CSS associated to it being applied.

Please navigate to Theme Options > CSS and address this error:

Hope it helps,
Cheers!

[lancesalyers]

Nailed it! Thanks so much for your thoroughness.

[Prasant]

You are most welcome.