Sticky header bar (menu) question

[Woordenaar]

Hi there

I want to show my products menu bar as a sticky bar. Under the menu there is another bar. When I scroll down I would like the sticky menu bar to remain in its position once it is at the top of the screen and want the sticky menu bar to go over the bar below this menu (which are my USP’s).

I made bar 4 (menu) a sticky bar and made bar 5 (USP’s) also a sticky bar and changed the Z)index of this bar to 9998. This almost did the trick, but a part of bar 5 is still visible when bar 4 is sticky. (part of the text and V’s are still visible under the sticky bar. Also it is not running completely smooth.

Here you can see it:

As you can see on my homepage the sticky bar is not running completely smooth.

https://earpleasure.audio (see front page with password ovsXL2017)

Your help would be greatly appreciated!

[thai]

Hi There,

Please add the following CSS under Customizer > Custom > Global CSS:

.hm31.x-bar.x-bar-top.x-bar-fixed {
    top: 60px !important;
    height: 60px !important;
}

.hm31.x-bar-content {
    height: 60px !important;
}

@media (max-width: 979px){
    .hm31.x-bar,
    .hm31.x-bar.x-bar-top.x-bar-fixed,
    .hm31.x-bar-content {
        height: auto !important;
    }   
}

Hope it helps

[Woordenaar]

Hi there

Thanks for that CSS.

With this code bar 5 (with the V’s) is also visible all the time. I want only bar 4 (the product menu) to be visible as a sticky menu. I also want to let it behave smoothly when scrolling the site.

I changed in your code (in bold):

.hm31.x-bar.x-bar-top.x-bar-fixed {
top: 0px !important;
height: 60px !important;
}

.hm31.x-bar-content {
height: 60px !important;
}

@media (max-width: 979px){
.hm31.x-bar,
.hm31.x-bar.x-bar-top.x-bar-fixed,
.hm31.x-bar-content {
height: auto !important;
}
}

Now only the product menu is sticky but bar 5 (with the green V’s) just disappears suddenly. So still not very smooth…

I would like the products menu bar to scroll over the V’s bar as you scroll down until the products menu bar is on the top of the screen and remains there… So no sudden “shocks” when scrolling…

Another thought:

right now bar 5 (with the green V’s) is also marked as sticky in X Pro header setup. As I said, I only want bar 4 sticky. But the only way to make bar 4 sticky and sort of behave like I wanted I needed to make bar 5 also sticky with Z index on 9998 instead of 9999.

Could this slow things down? Is there a way to not have this bar 5 marked as sticky but only the menu bar and achieve what I’m trying to…?

Thanks in advance for your update

[rad]

Hi there,

You shouldn’t change that 60px to 0px, it’s added there so it won’t appear behind the other bar. Please set it back to 60px then provide a screen recording of what’s happening on your end.

Thanks!

[Woordenaar]

Ok I’ve set it to 60px again in custom CSS. Now bar 5 is almost hidden, but not completely hidden on full screen size:

On mobile bar 5 is still completely there:

When scrolling down from the top I want bar 4 (the product menu) to remain at the top once it has reached there. So bar 5 (with my green V’s) needs to scroll smoothly under bar 4 untill it is gone and only bar 4 (the product menu) is sticky on the top of the screen.

How do I achieve this?

Maybe I’ve altered too much things in header customizer I’m not sure about… Would you mind to take a look if I give you my login credentials? Or provide me instructions how to properly make it happen?

Please check my new website address to view the site: https://eartreasures.shop
(view front-end with password ovsXL2017)

Thanks in advance for your help!!

[ruenel]

Hello There,

Thanks for writing in!

1.) The 60px should work. Please keep in mind that it will only work when you are logged out because if you are logged in, the admin bar is adding up 32px. Please test the page in another browser or private browsing mode:

2.) To prevent the bar 5 from being sticky in smaller screens, please add the following CSS code in the X > Launch > Theme Options > Global CSS (http://prntscr.com/evui3r)

@media(max-width: 767px){
  .hm31.x-bar-h.x-bar-fixed {
    display: none;
  }
}

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

[Woordenaar]

I think I did not make myself clear…

I want only bar 4 to be sticky. Not bar 5. Never bar 5…

So only my product menu (the black background white letters products) sticky.

The bar with green V’s not sticky.

[ruenel]

Hello There,

At the moment, your bar #5 is set as a sticky bar. Please edit your header again and make sure that sticky bar option is disabled.

This is no code should be added. Just change the setting.

[Woordenaar]

Ok! It works now… Thanks!!!

[Joao]

Great News