[MarketPress eCommerce] Menu all messed up

Please see the menu at makeupgrammar.com

On laptop when I resize the website, instead of getting compact, each item goes in a separate line and makes a very long vertical menu. Checked on Chrome, Win 10.

On mobile (checked on Android Samsung Note 8), it doesn't fit...the prroducts menu is open but half of it is cut out as menu is not wide enough. The sub-menu items go horizontally instead of indented in the next line making the menu too wide and hence the entire main menu gets cut off on the left side.

  • Adam Czajczyk

    Hello Erum

    I hope you're well today and thank you for your question!

    Let's start with the "desktop view" and the "laptop/resising" issue.

    Please open your site in Upfront for editing and click on "Responsive mode" button in Upfront sliding panel. You should see three "views" icons in a top bar: "mobile", "tablet" and "default". Switch to the "tablet" one and then enter "settings" for menu (a "gear" icon in a top-left corner of a menu).

    In "Appearance" tab in Upfront panel create a new preset and select Menu Style as "Triggered". You can also set alignment options there. Once that's done, click "OK" and "Update".

    That should take care of menu for "resized" browser - when the size enters the "tablet" viewport size between 570 and 1080 pixels wide.

    Once this is done, you can also add some css to tweak the drop-down menu a bit for "desktop" views. To do this, click "Exit responsive", then go to "Theme Settings" tab and click on "Edit Global CSS" and add this CSS at the very end of the CSS editor (you can remove it at any time if you don't like what it does):

    /* product menu fix for desktop */
    @media screen and (min-width:1080px) {
    
    .sub-menu .product_category {
      width:100%;
      max-width:250px;
      background-color:#333;
    }
    .sub-menu .product_category li {
      width:100%!important;
      display:block!important;
      clear:both!important;
      text-align:left;
      overflow:hidden;
    }
    .sub-menu .product_category li a {
      float:left;
      width:auto;
      height:100%;
    }
    div.upfront-navigation #mp_category_list .product_category li {
      padding-right:0!Important;
    }
    .sub-menu .product_category li .children li {
      padding-left:25px;
      width:100%!important;
    }
    
    }

    Let me know if that's better this way and if so, we'll proceed with mobile views.

    Kind regards,
    Adam

  • Adam Czajczyk

    Hello Erum

    I'm glad to hear that what I suggested worked so far. Let's then try to fix the tablet/mobile menu (resized site) as well.

    To do this please add another piece of CSS to the "Global CSS" of the site, just like you did recently but right below that other code that you added:

    @media screen and (max-width:1079px) {
    .sub-menu .product_category {
      width:100%;
      max-width:250px;
      background-color:#333;
    }
    .sub-menu .product_category li {
      width:100%!important;
      display:block!important;
      clear:both!important;
      text-align:left;
      overflow:hidden;
    }
    .sub-menu .product_category li a {
      float:left;
      width:auto;
      height:100%;
    }
    div.upfront-navigation #mp_category_list .product_category li {
      padding-right:0!Important;
    }
    .sub-menu .product_category li .children li {
      padding-left:25px;
      width:100%!important;
    }
    .sub-menu .product_category li .children li a {
      padding-left:55px!important;
    }
    
    .sub-menu,
    {
      padding-right:0!Important;
    
    }
    .sub-menu li {
      overflow:hidden;
      min-width:250px;
    }
    
    #mp_category_list {
      margin-left:0!important;
    }
    }

    Let me know if that helped, please.

    Kind regards,
    Adam

Thank NAME, for their help.

Let NAME know exactly why they deserved these points.

Gift a custom amount of points.