Mobile Menu Issues - by Jane Salt - on WordPress WooCommerce support

This topic has 4 replies, 2 voices, and was last updated 3 years, 7 months ago ago by Olga Barlow

  • Avatar: Jane Salt
    Jane Salt
    Participant
    October 6, 2020 at 18:18

    Hi there

    We are having issues with how the menu is shown on Mobile devices.
    For some devices and browsers, the Menu button is totally unresponsive; while for other devices and browsers it shows a Menu list without some important fields like “Search”.

    Could you please help with this?

    Thanks

    Please, contact administrator
    for this information.
    3 Answers
    Avatar: Olga Barlow
    Olga Barlow
    Support staff
    October 7, 2020 at 09:28

    Hello,

    Go to Theme Options > Custom CSS and add the below code

    @media only screen and (max-width: 976px){
    .header .table-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    }
    .header5 .shopping-cart-widget {
    order:1;
    }
    .header .logo {order: 2;padding-left: 0;width: 50%;}
    .header .menu-icon {
    order: 3;
    position:relative;
    left: unset !important;
    }
    right: auto !important;
    }
    @media (max-width: 480px) { .header .shopping-cart-widget {
    right: auto !important;
    left: 20 !important;
    } 
    }

    Tell us what browser do you use that search field in the mobile menu is missing http://prntscr.com/uulg1k ?

    Regards

    Avatar: Jane Salt
    Jane Salt
    Participant
    October 7, 2020 at 18:49

    Thanks for your quick reply.

    Could you please check your code is correct, as it gives error at line 16/17?

    The browser giving more issues is Chrome.

    Thanks for your help

    Avatar: Olga Barlow
    Olga Barlow
    Support staff
    October 8, 2020 at 13:36

    Hello,

    Oh, sorry, my bad. Try this one. If it does not help provide us with temporary WP Dashbaord access

    @media only screen and (max-width: 976px){
    .header .table-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    }
    .header5 .shopping-cart-widget {
    order:1;
    }
    .header .logo {order: 2;padding-left: 0;width: 50%;}
    .header .menu-icon {
    order: 3;
    position:relative;
    left: unset !important;
    }
    @media (max-width: 480px) { .header .shopping-cart-widget {
    right: auto !important;
    left: 20px !important;
    } 
    }

    Regards

  • Viewing 4 results - 1 through 4 (of 4 total)

You must be logged in to reply to this topic.Log in/Sign up

We're using our own and third-party cookies to improve your experience and our website. Keep on browsing to accept our cookie policy.