Archived topic
Mega Menu has one extra empty column and I can´t understand why
3 replies · Started by Andrea on October 11, 2020
Hi there!
I have added a mega-menu following these instructions: https://docs.generatepress.com/article/building-simple-mega-menu/ and adding the css code on the style.css of my child theme
https://www.lapiznomada.com/wp-content/uploads/2020/10/Screenshot-2020-10-12-at-03.06.19.png
Like in the example I want a mega menu with four columns. I have my menu with 4 child items like you can see on the image so everything should work fine:
https://www.lapiznomada.com/wp-content/uploads/2020/10/Screenshot-2020-10-12-at-03.08.53-1.png
https://www.lapiznomada.com/wp-content/uploads/2020/10/Screenshot-2020-10-12-at-03.02.13.png
The problem is that the mega menu is always adding an extra empty column, I can´t understand why. If I leave the settings as explained in the article, my fourth child item stays below the first one, since due to that extra empty column that appears, there is no room left for it.
https://www.lapiznomada.com/wp-content/uploads/2020/10/Screenshot-2020-10-12-at-02.57.00.png
What I have done provisionally so that all the items are aligned is to set the mega-menu-5-col in the parent, but as you can see on my website the fifth column is the one that appears empty all the time.
https://www.lapiznomada.com/wp-content/uploads/2020/10/Screenshot-2020-10-12-at-03.02.37.png
https://www.lapiznomada.com/wp-content/uploads/2020/10/Screenshot-2020-10-12-at-03.03.06.png
I can not understand what is the problem or why when I leave the settings as explained to have only for columns for my four child items there is one empty column that left my fourth child item below.
Thanks for the help and sorry if my English is not the best :)
Hi,
This issue happens because you're using mega-menu-col-5 on menu items that should only have 4 columns.
The code doesn't actually add an extra column but rather, it reduces the size of the submenu items to 20% of the parents width regardless of how many there is, making the illusion of having extra columns.
Try replacing mega-menu-col-5 with mega-menu-col-4 and add this CSS:
nav .main-nav .mega-menu.mega-menu-col-4>ul>li {
width: calc(98%/4);
}Hi, thanks for your reply.
I was using the mega-menu-col-5 because like I have explained when I was using only mega-menu the fourth column was left above.
Now with the new CSS that you have give me everything works fine.
Thank you so much!! :)
Awesome. Good to know its working now.
No problem.:)
