Stick Div relative to other sticky element (variable height)

Question

I'm trying to make the second menu sticky below the first menu. The first menu has been made sticky by default (Theme setting).

As the height of the first menu varies for mobile/desktop, I can't set top: 120px or something.

I did try position:sticky and got it to work reasonibly well, however the issues start when testing it on mobile.

So; is there a possibility to make the second menu sticky below the first one?

https://www.salonivon.nl/custom-webshop-tryout/

Thanks in advance, Richard

Any code you can provide? Not much we can do to help you otherwise. — Maharkus, Oct 27 '17 at 15:39
Can you edit the header of the site? If yes you can just take your second menu and put it in the header. — izulito, Oct 27 '17 at 15:42

score 0 · Answer 1 · answered Oct 27 '17 at 15:54

0

The code I used was:

`.my-extra-WooWidget{
 position: sticky;
 top: 104px;
 z-index: 100;
 background:white;
 width:100%;
 padding-bottom:10px;
 }

`

This works as long as I'm on the desktop screen.

I'm not able to change the header tho

answered Oct 27 '17 at 15:54

Richtiger1

21
3

score 0 · Answer 2 · answered Oct 27 '17 at 16:03

0

I would suggest using a fixed position and setting the CSS for top: top: 105px, then using media queries set a different value for mobile screen sizes. Here's a code sample:

widget.my-extra-WooWidget {
    top: 105px; /*Use a suitable value here*/
    left: 0;
    right: 0;
    background-color: #fff;
    position: fixed;
    z-index: 1;
}
@media (max-width: 768px) /*Use a suitable screen size here*/ {
    top: 76px; /*Use a suitable value here*/
}

answered Oct 27 '17 at 16:03

ceindeg

434
5
9

I guess I've fixed it a bit now. any other suggestions to make it better? And is it possible to use CSS only if screen is scrolled down at least X-pixels? – Richtiger1 Oct 27 '17 at 16:27

Stick Div relative to other sticky element (variable height)

2 Answers2