+ Reply to Thread
Results 1 to 10 of 10

Thread: Small Css issue

  1. #1

    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?
    Thank you - Your Welcome
    Brian

  2. #2
    Anyone care to take a shot at finding this one?
    Thank you - Your Welcome
    Brian

  3. #3
    Senior Member
    Join Date
    Sep 2019
    Location
    Australia mate.
    Posts
    164
    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.
    Last edited by Graham Jupp; October 27, 2019 at 08:58 AM.

  4. #4
    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 View Post
    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.
    Thank you - Your Welcome
    Brian

  5. #5
    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.
    Thank you - Your Welcome
    Brian

  6. #6
    Senior Member
    Join Date
    Sep 2019
    Location
    Australia mate.
    Posts
    164
    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.

  7. #7
    Senior Member
    Join Date
    Sep 2019
    Location
    Australia mate.
    Posts
    164
    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.
    Last edited by Graham Jupp; November 2, 2019 at 11:19 PM.

  8. #8
    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 View Post
    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.
    Thank you - Your Welcome
    Brian

  9. #9
    Senior Member
    Join Date
    Sep 2019
    Location
    Australia mate.
    Posts
    164
    Glad to have helped Brian, even if you did figure it out for yourself.

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

    Quote Originally Posted by Graham Jupp View Post
    Glad to have helped Brian, even if you did figure it out for yourself.
    Thank you - Your Welcome
    Brian

+ Reply to Thread