Support » Plugin: Max Mega Menu » Mega Menu Sub-Menu issue alignment

  • Resolved kristinubute

    (@kristinubute)


    Hi

    I have installed your plugin and have it working no issues on PC & Laptop. So I have the main menu of
    HOME / ABOUT / PRODUCTS / CONTACT US

    The PRODUCTS has sub-categories eg.
    ALOE with 2 sub-categories
    CRASSULA with 2 sub-categories etc
    There are about 15 of these all with 2 sub-categories each.

    The issue I am facing is that on the PC & Laptop version I have Mega Menu setup with 3 columns across .. working nicely and displaying each of the sub-categories in there.

    BUT when it comes to the Ipad I have been able to get it viewing 2 columns, but would prefer 3 columns viewing on the Ipad also.

    I can’t seem to get the coding correct so it views 3 columns across same as the PC & Laptop. I would have assumed that it would pick that up automatically.

    But it seems to be showing the first 2 items in the Sub-Category then putting the 3rd one on the next line THEN a SPACE on the 2nd column (where really the 3rd column has finished) , then the 4th item goes on the 3rd ROW **

    So it is similar to what the Product Categories in Woocommerce do , where sometimes the PC or Laptop shows 4 columns and displaying on the Ipad you can only fit 3 columns so you have to change some coding slightly to allow it to display 3 columns instead of 4 columns on the Ipad.

    Same is required for the MENU by the looks of it using MEga Menu … But I don’t know the correct coding to fix this **

    I hope I haven’t confused whoever is reading this, was trying to write it as simple as possible.

    I just need some simple CSS code to help the IPAD view the MEga Menu part of the “PRODUCTS” properly an in alignment with no extra gaps **

    Any help would be greatly appreciated. This is rather urgent if anyone can help would be great !

    Thanks
    Kristin

Viewing 6 replies - 1 through 6 (of 6 total)
  • Thread Starter kristinubute

    (@kristinubute)

    HI

    I’ve been fiddling with this coding in CSS trying to get it right but not working quite right .

    #mega-menu-wrap-primary {
    width: 50% !important;
    }

    #mega-menu-wrap-primary #mega-menu-primary > li.mega-menu-megamenu > ul.mega-sub-menu > li.mega-menu-item, #mega-menu-wrap-primary #mega-menu-primary > li.mega-menu-megamenu > ul.mega-sub-menu li.mega-menu-column > ul.mega-sub-menu > li.mega-menu-item {
    position: static;
    color: #666;
    font-family: inherit;
    font-size: 14px;
    display: block;
    float: left;
    clear: none;
    padding: 15px 15px 15px 15px;
    vertical-align: top;
    width: 45% !important;
    }

    Plugin Author megamenu

    (@megamenu)

    Hi Kristin,

    There are 2 “modes” for MMM – either desktop or mobile. The breakpoint between the 2 modes can be configured under Mega Menu > Menu Themes > Mobile Menu > Responsive Breakpoint.

    On desktop, the columns should be output exactly as you have configured them in the mega menu builder. On “mobile”, you can have the columns displayed in either 1 column or 2 columns, you can set that using the Mega Menu > Menu Themes > Mobile Menu > Mega Menu Columns setting. Each row of columns is output as its own container, so I think in your case it won’t be possible to “pull up” a column from the next row into the current row – that is why you will see that gap.

    Thread Starter kristinubute

    (@kristinubute)

    HI

    Thank you for your response.

    So the Responsive Breakpoint refers to Ipad also as well as mobile I assume ?

    Currently my Ipad is showing 2 columns but in the Mega Menu Settings it is set to 1 Column.

    As my client has many sub-categories only having 1 column on Ipad doesn’t look very professional.

    So there is no way to have 3 columns showing on Ipad at all ? Even with some CSS coding ?

    So you mentioned : so I think in your case it won’t be possible to “pull up” a column from the next row into the current row – that is why you will see that gap.

    So as the system has been setup for 3 columns on the PC & Laptop, therefore are you saying that the Mobile and Ipad Menu will ONLY pull up whatever I choose in the Mega Menu Setting of MOBILE MENU of either 1 column or 2 columns only ? I have only setup my MOBILE MENU to 1 column and it is showing up 2 columns with a gap on the 2nd column between every 2nd Sub-category. But you can tell that it is actually picking up that there are 3 columns or Products in the PC Version as it is moving the 3rd column onto the next ROW hence the spacing on the 2nd Column. I can tell from the order of the Menu items that are displaying on the Ipad version.

    If I CHANGE settings of Mega Menu MOBILE MENU to 2 columns, it is showing 2 columns but even worse spacing on the 2nd column compared to the coding I had added in.

    Therefore that is why I thought I could add some CSS coding to help the MOBILE MENU with the column spacing etc.

    Otherwise I am completely stuck with these extra gaps on 2 columns which looks very unprofessional and half finished.

    Very frustrating. I look forward to any further advice for this issue as I don’t know how to fix it.

    Thanks in advance
    Kristin

    Thread Starter kristinubute

    (@kristinubute)

    Example: On PC & Laptop menu items are :

    HOME / ABOUT / SUCCULENTS / CONTACT

    Sub-categories for Succulents are:

    AEONIUM
    Sub-Cuttings
    Sub-Hard to Find

    Then 2nd column is AICHRYSON
    Sub-Cuttings
    Sub-Hard to Find

    Then 3rd Column is ALOE
    Sub-Cuttings (No Hard to FInd)

    Then 2nd row 1st Column is CEREUS
    Sub-Cuttings
    Sub-Hard to Find

    2nd Row 2nd Column CLEISTO
    Sub-Cuttings
    Sub-Hard to FInd

    2nd Row 3rd Column CORPUS
    Sub-Cuttings
    Sub-Hard to FInd

    Therefore when on Ipad it shows(when settings are 2 columns in Mega Menu)
    It shows the HOME / ABOUT / Succulents / CONTACT no issues on MEga Menu on Ipad.

    Then for the Succulents sub-categories:

    1st Row, 1st Column AEONUIUM
    Sub-Cuttings
    Sub-Hard to FInd

    1st Row, 2nd Column AICHRYSON
    Sub-Cutttings
    Sub-Hard to Find

    2nd Row, 1st Column ALOE
    Sub-Cuttings

    2nd Row, 2nd Column BLANK just spacing GAP

    3rd Row, 1st Column CEREU
    Sub-Cuttings
    Sub-Hard to Find

    3rd Row, 2nd Column BLANK just spacing GAP

    4th Row, 1st Column CLEISTO
    Sub-Cuttings
    Sub-Hard To Find

    4th Row, 2nd Column CORPUS
    Sub-Cuttings
    Sub-Hard to Find

    And continues with that pattern all the way down the 2nd column.

    So therefore this is strange I have removed that other coding I had done to try and fix it in CSS and still not doing the 2nd Column properly **

    So frustrating.

    Plugin Author megamenu

    (@megamenu)

    Hi Kristin,

    Please can you post a link to your site so I can take a look in my own browser? It is hard to visualise the problem with just a text description.

    Edit: maybe you could try using 4 columns on desktop, so that they collapse equally into 2 rows of 2 on mobile, or try switching from “Grid Layout” to “Standard Layout”. With the Standard Layout, the columns are not separated into rows and will wrap more naturally below the breakpoint.

    • This reply was modified 5 years, 3 months ago by megamenu.
    Thread Starter kristinubute

    (@kristinubute)

    Hi, Well you were right on the money there !!

    I changed the PC/Laptop version to 4 columns and the Ipad version went to 2 columns properly … so it worked straight away !

    Gosh I am very muchly appreciated for that.

    I actually didn’t think of that so thanks again.

    Regards
    Kristin

Viewing 6 replies - 1 through 6 (of 6 total)
  • The topic ‘Mega Menu Sub-Menu issue alignment’ is closed to new replies.