Viewing 12 posts - 1 through 12 (of 12 total)
  • Author
    Posts
  • #1259538

    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.

    #1259540

    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?

    #1259715

    Hi thinkjarvis,

    Could you please attach some screenshots of the issue?

    Best regards,
    Victoria

    #1259832

    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?

    #1259978

    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

    #1260115

    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.

    #1260147

    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

    #1260148

    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.

    #1260187

    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.

    #1260348

    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

    #1260362

    Happy for you to close the issue.

    Thanks Mike. Spot on.

    #1260480

    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

Viewing 12 posts - 1 through 12 (of 12 total)

The topic ‘Mobile menu cross icon fixed position?’ is closed to new replies.