Small Css issue

Hello Flynax Team,

I can't seem to figure out how to get the box-shadow back on the mobile menu (when opened it's missing on the bottom of the menu) - It's only a problem when viewed at 769px and above up to and including 1199px browser size. I use https://www.webfx.com/tools/whats-my-browser-size/ to test it.

You can see the menu here: https://www.worldclassads.com/classi...united-states/

Click menu to open it, and scroll down with the menu open, you will see the bottom part is missing the box shadow. If you shrink the browser window (smaller width) you will see it (box-shadow) at the bottom of the menu will eventually show up.

Can someone help me find the solution to get that box-shadow back?

Anyone care to take a shot at finding this one?

I can see the problem when I tested but unsure of the fix as my skill level is seemingly that of a 7 year old kid. I do have the feeling it may have something to do with the z index though and perhaps the shadow from the menu is actually rendering behind the map and its perhaps there but obscured by the map?

Edit: I tried deleting your world map image from within Chrome's inspector (after changing to mobile device mode) to see if the shadow of the menu appeared and it did. Very much thinking this is a layering issue with the z index now. Someone else may be able to shed more light on this or perhaps it will lead you in the right direction yourself.

Thanks for looking into this issue Graham, I appreciate your insight into this issue I will have another look at the z-index.

Quote:

---

Originally Posted by Graham Jupp

I can see the problem when I tested but unsure of the fix as my skill level is seemingly that of a 7 year old kid. I do have the feeling it may have something to do with the z index though and perhaps the shadow from the menu is actually rendering behind the map and its perhaps there but obscured by the map?

Edit: I tried deleting your world map image from within Chrome's inspector (after changing to mobile device mode) to see if the shadow of the menu appeared and it did. Very much thinking this is a layering issue with the z index now. Someone else may be able to shed more light on this or perhaps it will lead you in the right direction yourself.

---

I still need help resolving this issue as well, I have looked into z-index, but have come up short again, I can't find the box-shadow under the map as Graham mentioned might be the cause.

I had another look and did a little reading as well. This may be very much a band-aid solution or it may be correct as I really have no idea what I am doing but this fix appears to work in Chrome inspector. Note that as I truely do have not much of an idea, this fix may cause other problems?? Perhaps someone else can enlighten us as to the best fix if this is the wrong way.

I think you may need to set the position of the active menu as I don't think that z index works without setting a position first. Someone please correct me if I'm wrong.

Go to around line 349 of /templates/general_modern/js/snav/css/stellarnav.min.css

add: position: absolute;

Code:

---

Only registered members can view the code.

---

I hope this works for you, please let us know.

Hmmm... ok... seems the previous fix does cause another issue even though it does now show the shadow. It pushes the right side of the menu off the edge of the right side of the screen on wider mobile devices. :(

However the fix below seems to work for both issues.

Edit: Try changing it to

position: relative

Code:

---

Only registered members can view the code.

---

This is crazy! I have just figured this out by adding position relative and it works, then I come here to the forum to put a solved message up, and what do you know, there's a solution!

Thank you Graham, I will keep these messages in a safe place for future reference for that just in case moment.

Thanks again!
Brian

Quote:

---

Originally Posted by Graham Jupp

Hmmm... ok... seems the previous fix does cause another issue even though it does now show the shadow. It pushes the right side of the menu off the edge of the right side of the screen on wider mobile devices. :(

However the fix below seems to work for both issues.

Edit: Try changing it to

position: relative

Code:

---

Only registered members can view the code.

---

---

Glad to have helped Brian, even if you did figure it out for yourself.

Thank you again Graham! I appreciate all that all of the members here do for me.

Quote:

---

Originally Posted by Graham Jupp

Glad to have helped Brian, even if you did figure it out for yourself.

---