[Resolved] Sub menu 2 columns

[Karlis]

Helllo!

I red some articles about this topic but neither works for me.
1) I used plugin Mega Max menu – was ok, but I could not add a logo to the nav bar (only PRO version can) , secondly I did not liked the fonts and my website was little bit slower.
2)I tried GP suggestion simple-mega-menu ( https://docs.generatepress.com/article/building-simple-mega-menu/ ) but it not worked for my website. I used a CSS code and then in the menu structure I did everything what is in the instructions .

I really want to use default GP menu and I want to sort my subsections into categories to be shown in 3 or 4 columns.
I wish to see my primary navigation bar
Home – Products ( 10 product categories – into 4 columns ) – Blog – Contacts

Regards,
K.

[Karlis]

Resolved

[David]

Awesome – which method did you use?

[Karlis]

Thanks! I used GP simple mega menu method + Menu Icons plugin

Unfortunately my columns + icons are yawning and graceful because of the letter number difference. I am very poor in coding. I want Columns in some kind of grid for better look and that’s it. Can you please help me with that? My website you already know, I suppose )

[David]

Give this CSS a shot:

@media (min-width: 768px) {
    nav .main-nav .mega-menu>ul {
        padding: 2%;
        box-sizing: border-box;
    }
    nav .main-nav .mega-menu > ul > li {
        margin-bottom: 1em;
    }
}

[Karlis]

Yuppy!!, It works. Fine on Desktop but not on mobile 😀

[David]

So for mobile – aligning the text left would do the trick:

@media (max-width: 767px) {
    .main-navigation.toggled .main-nav li a {
        text-align: left;
		margin: 1em 0;
    }
}

[Karlis]

Trick works amazing! Thank you. )

[David]

You’re welcome

[Author]

Posts