Title: Mega Menu Sub-Menu issue alignment Last modified: December 25, 2018 --- # Mega Menu Sub-Menu issue alignment * Resolved [kristinubute](https://wordpress.org/support/users/kristinubute/) * (@kristinubute) * [7 years, 5 months ago](https://wordpress.org/support/topic/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 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](https://wordpress.org/support/users/kristinubute/) * (@kristinubute) * [7 years, 5 months ago](https://wordpress.org/support/topic/mega-menu-sub-menu-issue-alignment/#post-11025259) * 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](https://wordpress.org/support/users/megamenu/) * (@megamenu) * [7 years, 5 months ago](https://wordpress.org/support/topic/mega-menu-sub-menu-issue-alignment/#post-11026987) * 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](https://wordpress.org/support/users/kristinubute/) * (@kristinubute) * [7 years, 5 months ago](https://wordpress.org/support/topic/mega-menu-sub-menu-issue-alignment/#post-11027066) * 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](https://wordpress.org/support/users/kristinubute/) * (@kristinubute) * [7 years, 5 months ago](https://wordpress.org/support/topic/mega-menu-sub-menu-issue-alignment/#post-11028520) * 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](https://wordpress.org/support/users/megamenu/) * (@megamenu) * [7 years, 5 months ago](https://wordpress.org/support/topic/mega-menu-sub-menu-issue-alignment/#post-11029377) * 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 7 years, 5 months ago by [megamenu](https://wordpress.org/support/users/megamenu/). * Thread Starter [kristinubute](https://wordpress.org/support/users/kristinubute/) * (@kristinubute) * [7 years, 5 months ago](https://wordpress.org/support/topic/mega-menu-sub-menu-issue-alignment/#post-11029578) * 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. * ![](https://ps.w.org/megamenu/assets/icon-128x128.png?rev=1489843) * [Max Mega Menu](https://wordpress.org/plugins/megamenu/) * [Frequently Asked Questions](https://wordpress.org/plugins/megamenu/#faq) * [Support Threads](https://wordpress.org/support/plugin/megamenu/) * [Active Topics](https://wordpress.org/support/plugin/megamenu/active/) * [Unresolved Topics](https://wordpress.org/support/plugin/megamenu/unresolved/) * [Reviews](https://wordpress.org/support/plugin/megamenu/reviews/) ## Tags * [woocommerce menu](https://wordpress.org/support/topic-tag/woocommerce-menu/) * 6 replies * 2 participants * Last reply from: [kristinubute](https://wordpress.org/support/users/kristinubute/) * Last activity: [7 years, 5 months ago](https://wordpress.org/support/topic/mega-menu-sub-menu-issue-alignment/#post-11029578) * Status: resolved