Mega Menu Sub-Menu issue alignment

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;
}

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.

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

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.

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, 11 months ago by megamenu.

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