Support » Plugin: Max Mega Menu » Mega Menu Sub-Menu issue alignment
Mega Menu Sub-Menu issue alignment
-
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 USThe 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
-
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
KristinExample: On PC & Laptop menu items are :
HOME / ABOUT / SUCCULENTS / CONTACT
Sub-categories for Succulents are:
AEONIUM
Sub-Cuttings
Sub-Hard to FindThen 2nd column is AICHRYSON
Sub-Cuttings
Sub-Hard to FindThen 3rd Column is ALOE
Sub-Cuttings (No Hard to FInd)Then 2nd row 1st Column is CEREUS
Sub-Cuttings
Sub-Hard to Find2nd Row 2nd Column CLEISTO
Sub-Cuttings
Sub-Hard to FInd2nd Row 3rd Column CORPUS
Sub-Cuttings
Sub-Hard to FIndTherefore 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 FInd1st Row, 2nd Column AICHRYSON
Sub-Cutttings
Sub-Hard to Find2nd Row, 1st Column ALOE
Sub-Cuttings2nd Row, 2nd Column BLANK just spacing GAP
3rd Row, 1st Column CEREU
Sub-Cuttings
Sub-Hard to Find3rd Row, 2nd Column BLANK just spacing GAP
4th Row, 1st Column CLEISTO
Sub-Cuttings
Sub-Hard To Find4th Row, 2nd Column CORPUS
Sub-Cuttings
Sub-Hard to FindAnd 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, 3 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
- The topic ‘Mega Menu Sub-Menu issue alignment’ is closed to new replies.