Tagged: ,

Viewing 12 posts - 1 through 12 (of 12 total)
  • Author
    Posts
  • November 10, 2020 at 12:36 pm #1259538
    thinkjarvis

    Hi Guys,

    Because of the position of the cross icon on a customers website, it sits close to the middle of the main menu.

    Is there an easy way to give this a fixed position so it doesn’t scroll?

    Live website link in the private section.

    On a mobile click the menu button and you will see that the X to close the menu covers the menu items.

    November 10, 2020 at 12:49 pm #1259540
    thinkjarvis

    More info:
    The issue is caused by the cart icon position. The cart icon pushes the mobile menu icon over meaning it sits over the menu text rather than in the corner.

    Is it possible to move the location to the top corner on click? So the close icon is in the top corner?

    November 11, 2020 at 12:03 am #1259715
    Victoria

    Hi thinkjarvis,

    Could you please attach some screenshots of the issue?

    Best regards,
    Victoria

    November 11, 2020 at 11:39 am #1259832
    thinkjarvis

    Hi Victoria,

    I see you are in Chrome Dev tools. The scroll behaviour appears to be the same as the physical device even in safari.

    When you scroll down, the cross sits over and obstructs the menu links.

    Screenshot is linked in the private content.

    Is it possible to get the cross to scroll with the content or move the cross to the top corner on menu open?

    November 11, 2020 at 10:27 pm #1259978
    Victoria

    Hi thinkjarvis,

    Yeah, that looks bad. Well, the menu item is the burger item that has a high z-index and so is visible over the overlay. I will ask my colleagues what can be done here.

    Best regards,
    Victoria

    November 12, 2020 at 1:22 pm #1260115
    thinkjarvis

    Thanks Victoria,

    This affects every Enfold website running WooCommerce.

    The easiest solution I can think of is to swap the position of the menu button and cart button on mobiles. Then the cross will always be out of the way in the top corner.

    I can implement this myself this end but given that this affects all enfold sites it needs looking into your end.

    Let me know if you have a solution for me, if not I’ll mod the CSS so the cart and menu are switched.

    November 12, 2020 at 3:25 pm #1260147
    Mike

    Hi,
    Thanks for the screenshot and link, I understand your point, but lets try this css which moves the “X” of the open burger to the right so it won’t be over the menu items.

    @media only screen and (max-width: 767px) {
.responsive.html_cart_at_menu.av-burger-overlay-active #top .main_menu .menu>li:last-child {
    padding-right: 0 !important;
    margin-right: 0 !important;
}
.responsive.html_bottom_nav_header.html_cart_at_menu.av-burger-overlay-active #top #wrap_all .main_menu {
    right: -20px !important;
}
}

    But perhaps a good approach would be to hide the open “X” on mobile, thinking that the user has “intent” when clicking the burger menu, such as to find the “About” page, is the “X” really necessary? Other than in testing I don’t believe I ever try to close an open burger menu. So with this line of thought you could try this css instead:

    @media only screen and (max-width: 767px) {
.responsive.html_cart_at_menu.av-burger-overlay-active #top .main_menu .menu>li:last-child {
    display: none !important;
}
}

    We could also swap the burger and woo cart on click (or always) with jQuery if you would like 🙂

    Best regards,
    Mike

    November 12, 2020 at 3:49 pm #1260148
    thinkjarvis

    Thanks Mike, really appreciate the input from you both.

    I probably won’t hide the icon but I’ll try out the code to move it and get back to you.

    The Enfold sites I run without a online store – the cross position isn’t a problem because its right in the corner. But I now have several WooCommerce sites so thank you for a solution.

    November 12, 2020 at 6:21 pm #1260187
    thinkjarvis

    Hi Mike,
    It works really well.
    I adjusted the code above to right:-10px which just nudges it in slightly.
    I’ll apply this to all of the WooCommerce sites on my system.

    I have another I am working on with a burger menu left, so I’ll modify the offset and padding to suit.
    Now live on the site in the private comments.

    Thanks again.

    November 13, 2020 at 2:48 pm #1260348
    Mike

    Hi,
    Glad to hear this helped, I checked your page and the effect looks good, almost as if the close “X” “rolls” to the right 🙂
    Unless there is anything else we can assist with on this issue, shall we close this then?

    Best regards,
    Mike

    November 13, 2020 at 3:43 pm #1260362
    thinkjarvis

    Happy for you to close the issue.

    Thanks Mike. Spot on.

    November 14, 2020 at 1:08 pm #1260480
    Mike

    Hi,
    Glad we were able to help, we will close this now. Thank you for using Enfold.

    For your information, you can take a look at Enfold documentation here
    For any other questions or issues, feel free to start new threads in the Enfold forum and we will gladly try to help you :)

    Best regards,
    Mike

  • Author
    Posts
Viewing 12 posts - 1 through 12 (of 12 total)
  • The topic ‘Mobile menu cross icon fixed position?’ is closed to new replies.