Flex Header gap with a "responsive" header

Support
#1

I’ve got a header with two rows, one is intended for mobile and tablet portrait viewing, and the other for larger screens. I have the top row (mobile) hidden for the three larger sizes, and the second row (desktop) hidden for the smaller two sizes. Both are set with the sticky resizing feature.

However, when I scroll down when viewing on a larger screen, once the header begins to scale, it bumps down with a gap where the top row would be. I tried switching the order of the rows, but then the same happens when viewing on a larger screen—whenever the second row of the header is the active one for that screen size, there is a gap above it once it starts scaling.

okumf.org/okumf_v2/

Why is this happening?

#2

Hello There,

Thanks for writing in! This is an on going issue with the custom header. Our developers is already creating a fix for this which shall be out in the next update release. To temporarily resolve this issue, please add the following CSS code in the X > Launch > Theme Options > Global CSS (http://prntscr.com/evui3r)

.hm10.x-bar.x-bar-top.x-hide-sm.x-bar-fixed {
    top: 0 !important;
}

Hope this helps. Please let us know how it goes.

#3

That did it! Thank you very much.

If I may ask one other question about our header, I have added a bar at the very top with custom header element displaying our name. This should just scroll away above the navigation. BUT the initial display is messed up, and the text seems too high in that container/bar… Any insight? If I need to post a separate thread, I can do so.

Thank you.

#4

Okay, because I’m still adjusting some things in the header, I think the CSS class chain is different than what you mentioned… Can you explain a little bit what to look for, so I can adjust the Global CSS? Or I can just wait for the next update, I suppose. Sorry to mess it up for you!

#5

Hi there,

It’s probably because of .hm10 since it’s unique per header bar.

You may try something like this if you wish to target all bars

.x-bar.x-bar-top.x-hide-sm.x-bar-fixed {
    top: 0 !important;
}

That applies to all header bar hidden for small devices (eg. .x-hide-sm). Now you will need to add more similar CSS which targets other devices (eg. x-hide-lg x-hide-md x-hide-xl x-hide-xs)

And if you’re only targeting the bar for desktop then this should be enough

.hm12.x-bar.x-bar-top.x-hide-sm.x-hide-xs.x-bar-fixed {
    top: 0 !important;
}

It’s now the 12th bar :slight_smile:

Hope this helps and thanks!

#6

Hmmm, there is still a sort of odd behavior on larger screens, where when there’s about 20px of space above the nav, it then jumps to the top edge, leaving a small ~20px gap below it before further scrolling slides content up underneath.

It may be an issue with the bar I have in lighter blue with our name across it? That is another problem, though… The text is cut off somehow. The actual height of that bar is correct, but the text isn’t being put in the vertical center? [EDIT: I will add that this error doesn’t appear when viewing in the editor either, only on a live page.]

Any advice is appreciated. Thanks for the help so far!

#7

I’m sorry but I don’t get what the issue is. Would you mind giving a screen recording or screenshots.

The text is cut off because of this CSS

.hm1.x-bar-content {
    height: 0px !important;
}

Please check your custom CSS.

Thanks.

#8

Hmm, I had that code in the custom CSS of the Header section for some reason. That fixed that problem, thanks!

Here’s a video of that bar-jumping bug I described. Nav Scroll Jump. Let me know if it needs to be a different format to view for you.

#9

Hi,

Try to adjust trigger offset and see if that fixes the issue.

If that doesn’t help kindly provide us your wordpress admin login in Secure Note so we can take a closer look.

Thanks

#10

Okay, I’ll add a note. Hopefully you can fix it!

#11

The given credentials doesn’t work.

#12

Apologies. I must’ve typed something incorrect along the way. Try this:

#13

Hi,

I went ahead and adjust the offset and it seems to work.

Kindly clear your browser cache and check again.

Thanks

#14

Thanks for looking into it.

It seems to be adjusted enough that you don’t see a gap in the background, so that’s good.

However, it is still doing the little “jump” on the larger two screen sizes with Safari and Chrome on my Macbook Pro. I tested on Chrome on a Windows PC, and the jump seems to almost disappear, so I guess that’s okay.

One the middle screen size, I think, the menu bar actually slides up too far just as you scroll past it, then it snaps down to the top.

I’m sorry to be so nitpicky about this… But I’m just trying to understand the inconsistency. Thanks.

#15

Hi there,

Could you try updating your CSS to this?

.hm12.x-bar.x-bar-top.x-hide-sm.x-hide-xs.x-bar-fixed {
    top: 0 !important;
    -webkit-transition: all 0.5s;
    transition: all 0.5s;
}

It will create a smooth transition instead of jumping.

Thanks!