Behavior of bars on mobile

Support
#1

Hi there

I have the current build-up on the mobile version of my header.

  • Logobar (visible initially)
  • Bar with hamburger menu (visible initially)
  • Combined bar with logo and hamburger menu on scroll to save space while browsing (hidden initially)
  • Bar with sub-menu (hidden initially, with the option ‘keep margin’ and margin top to be aligned beneath the combined bar)

What I try to achieve is the following when I load the page:

  • Logobar (visible initially)
  • Bar with hamburger menu (visible initially)
  • Bar with sub-menu (visible initially)

On scroll the Logobar should be replaced with the combined bar (containing logo and hamburger menu)
but the bar with the sub-menu which is visible initially should then be placed below the combined bar and not remain on top.

Since it sounds quite complicated I attached some screenshots. Hope this helps.
This is the page I’m referring to: https://kss.ch/wasserpark/

May you help me to achieve my goal?

Thanks in advance!

KSS_Mobile_Navbar
KSS_Mobile_Navbar1500×452 185 KB

#2

Hi @freipartner,

Thanks for reaching out.

Based on the provided details, the issue is just with the sub-menu bar, right? If yes, then please try setting your sub-menu header bar trigger offset of about 130, please check this screenshot.

image

You can also try the negative offset, this is because it’s relative to other header bars.

Thanks!

#3

Hi Rad,

thanks for your suggestion. Yes, it’s only the sub-menu bar.
The trigger offset didn’t change a thing as far as I can see it. It still sticks to the top like shown image 2 (the one in the middle). The only way to get the sub-menu bar below the blue bar with logo and hamburger menu is to activate the options ‘hide initially’ and ‘keep margin’ with a margin-top of 105px.

But if I keep those options enabled it won’t show if you load the page (like on image 1) of course because its hidden initially. Is there maybe another thing you could suggest? Or do you need the credentials to have a look into it?

#4

Hey @freipartner

To better assist you with your issue, kindly provide us access to your site so that we can check your settings. Please create a secure note with the following info:

image
image1040×250 17.4 KB

Thanks!

#5

Hey @nabeel

Thanks for your reply. I’ve just provided the details.

#6

Hi @freipartner,

I did some testing, I changed the mobile main header’s offset to 78, and same goes for scroll sub-menu offset to 50. Then on both header bar, I enabled keep the margin and z-index stack. I also changed their initial position to absolute and they are now a bit better. Could you try checking?

Though, if you’re intending to sync the appearance of the two headers then it’s not possible. The header bars scroll animation are triggered independently. What you could do, is just add your sub-menu to the existing main header bar so it would scroll along with it, just make sure the header bar’s flex layout is set to column.

image

Thanks!

#7

Hi Rad

Thanks for your efforts. So, what did your changes do, exactly? Do they have the effect that the sub-menu appears faster on scrolling down than it did before?

Your suggestion to add it to the main header would be a good idea. Then i would place it with the main header to show it when the page loads and then add it to the smaller header that shows up on scrolling as well. I think I’ll give that a try.

#8

Hey @freipartner,

Those changes will make the appearance of the bars better, it would not make them appear faster but the transition would be better than before. A better approach would be to add your sub-menu to the existing main header bar so it would scroll along with it as Rad mentioned.

Cheers!

#9

Since the main header changes after scrolling to a slightly different one I placed the sub-menu bar below both of them one is visible initially but no sticky header and one is hidden initially an shows up on scroll. But it still shows up later then the secondary main header.

I’m afraid I can’t merge them into one bar since the sub-menu bar hast to be scrollable to display my inline navigation. Is it possible to make a setting that the bar shows at the same time as the secondary header (like shown in image 3).

Best, Christian

#10

Hello Christian,

One thing to consider is the element itself. Be advised that Navigation Inline and Navigation Dropdown are best to use in medium and desktop screens. For mobile screens, it is best that you use Navigation Layered, Navigation Modal or Navigation Collapse element instead.

Hope this helps.

#11

Hi ruenel

Yes, I know. Normally, I choose those options for my mobile menu. But this one is special and it would not work that way. The items have to be visible directly and to be able to scroll them horizontally is working fine. The only problem is with the time it shows up.

Best, Christian

#12

Hey Christian,

I went ahead and changed the positions of your last two mobile bars, I placed them from bottom to top now and it seems like the bars are now behaving just the way you need it. Since the bars were placed at last so those were animating according to their positions. placing them top would trigger them immediately just like you need it.

Please check your mobile header setup now. Hope this helps!

#13

This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.