Sticky Headers Broken for 4 Months Now

Support
#1

When adding two stick bars directly on top of each other, the second doesn’t stay connected to the first one.

I reported this on April 27th and it was added as a known bug for Pro 1.0.4 and it’s still not fixed. The proposed CSS fixes still produce a stutter/jump when scrolling. We use this for many clients when we have sticky menus for desktop and mobile and when they ask if this stutter can be removed, we have no answers for them.

#2

Hey there,

Not sure what issue you’re referring to. Please give us more details. But, please take a look at this screencast first maybe it’ll solve the issue. Here’s a 3 sticky bar setup.

Thanks.

#4

I accidentally put the wrong issue in bold in the original post. I copy and pasted it from the support email but it doesn’t cover what I address back in April… which is the stuttering and jumping around of the headers, which can be seen in your own video when you scroll up and down.

I followed up on July 10 and it was still acknowledged as a known issue: https://theme.co/apex/forum/t/sticky-headers-for-desktop-and-mobile-not-playing-nicely/1943

The provided CSS hack/fix did not work.

In addition to this, what also happens is:

  • I’ll create a sticky header for desktop and then set it to hide on mobile so I can customize one for phones/tablets.
  • Then I create the sticky header for mobile.
  • The mobile sticky header displays below the invisible desktop header leaving a gap at the top of the page.
  • A CSS fix was provided but it’s a poor solution if I need to add this to every site we design and the headers still stutter and jump when scrolling.
#5

Hi there,

I can see that issue, I’m forwarding this to our developers.

Thanks!

#7

I’m seeing this as well but the CSS fix doesn’t seem to work for me. I assume it goes into the “mobile bar”?

#8

Hello There,

Thanks for writing in! This is still a standing bug in the current release. Another release will be rolling out in a few days from now please do watch out for it. It is already on its final testing phase.

Please bear with us.

#9

Is this fixed?

1 Like
#10

Hi @shucker

Please provide your URL so we can provide you a temporary fix,

Thank you

#11

That is completely unacceptable. This has been an issue for months and months now and then in Sept we were told there’d finally be a fix which was “on its final testing phase.” Never happened.

Previous “temporary fixes” cause other issues with headers sticking but content being hidden behind the bar on mobile devices. I have been unable to give new clients sticky headers because they’re still broken and I can’t be going back retroactively undoing fixes or having things blow up when the theme is updated.

I have purchased 34 licences… how many more do I need to buy before this is taken seriously?

#12

Hi @shucker

The issue has already been placed on our issue tracker and will be addressed.

Unfortunately we cannot provide an ETA.

Thank you.

#13

Your login to the site will follow in a private message.

The Custom CSS has a fix provided by your team a few months ago. It’s at the top of the page. While it prevents the mobile sticky page from floating below the desktop sticky header (after it’s auto-hidden for a mobile screen), it doesn’t push down the body content so it ends up being hidden behind the navbar. This doesn’t happen if you scale down a desktop browser to a mobile width, you’d need to see it on an actual phone (screenshot attached)

Thank you.

#14

Hi There,

I have an alternative for you.

Let us know if that plays well.

Please remove the following CSS from the top of your Theme Options CSS

#mobile-header {
     position: fixed !important;
    top: 0px !important;
    width: 100% !important;
    z-index: 999999 !important;
}

Add the following code to Theme Options CSS

@media(max-width: 969px) {
  .hm1.x-bar {
    height: 60px;
    border-top: 0;
    box-shadow: none;
}}

I have created a header called Alternative solution for you, and assigned to the following page.

http://angstrom.staging.wpengine.com/alternative-header/

After you have made the reccomended changes on the CSS , please check the page.

Let us know if that works for you.

Cheers

#15

Hi,

Thanks for the help. I see you’ve tried to remove the mobile sticky header and take care of both in one. Still a couple of small problems, however.

  • On mobile the top of the logo gets partially cut off after you’ve scrolled down a little. Full appears if you scroll all the way back to the top. Appears to get pushed up.
  • On mobile the dropshadow disappears

Please note that the theme CSS has been updated as per your instructions and the staging URL provided has changed to http://angstrom2.staging.wpengine.com. Login credentials haven’t changed.

Cheers,
Chris

#16

Hi Chris,

I have added

.hm1.x-bar-content {
      height: 60px;

}

To your CSS on top on Theme Options > CSS and it has fixed the issue.

Hope it helps

#17

Thanks for the speedy assist. There was a missing curly brace for the @media code which blew up the rest of the CSS. I added it back it. Unfortunately, while the mobile seems better, the desktop version is now messed up. :slight_smile:

#18

Sorry for the mistake.

I have placed the closing bracked you added on the correct place.

Now everything seems to be good.

Let us know if you need further assistance.

#19

I seem to be having the same exact issue as the op, has this bug been fixed yet? None of the solutions mentioned work for me.

krystamasciale.com

#20

Hello There,

We’re sorry you are having this issue. The fixed for multiple sticky bars will be available on the next release. Also an update on anchor scrolling will now respects the offset from multiple sticky bars. We don’t have specific date yet, rest assured that we are trying to include more bugfix as possible. Thank you.

#21

Is this fixed yet because it is the same for me and I have everything updated

Thanks

#22

Hi Eileen,

I have checked our issue tracker and this issue has been fixed with the release of Pro v2.1.4. I see that you have plenty of licenses, could you please create a separate thread and share your site URL to check your issue.

Before doing that please refer to our version information here (https://theme.co/apex/forum/t/troubleshooting-version-compatibility/195) and update if required (https://theme.co/apex/forum/t/setup-updating-your-themes-and-plugins/62).

Thanks!