- This topic has 3 replies, 2 voices, and was last updated 5 years, 6 months ago by
.
-
Posts
-
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 themehttps://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.pngThe 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.pngI 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 🙂
Customer Support
Hi,
This issue happens because you’re using
mega-menu-col-5on 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-5withmega-menu-col-4and 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.:)
- You must be logged in to reply to this topic.
