Solved

Having trouble with alignment of the Mega Menu and its content

OsiusKara
Visitor
1 0 1

Hello,

I have trouble with centering the Mega Menu.

I have already centered the navigation links horizontally with custom css,
but it doesn't work with the mega menu...

I think it has something to do with the grid columns, but I can't find the corresponding code...

I have marked in the screenshot the approximate position in which I would like to have it (green frame instead of red).

Can someone please point me in the right direction?

www.bavarian-kindskopf.de

Thank you very much - I appreciate it!

 

Osius

Shopify-Mega-Menu_Question.png

 

 

Accepted Solution (1)

Made4uo-Ribe
Shopify Partner
6047 1452 1790

This is an accepted solution.

Hi @OsiusKara 

Check this one. 

Online theme > Select theme > Edit code > Assets > component-mega-menu.css > and find this code. 

Made4uoRibe_0-1714335544681.png

Change grid-template-columns: Like this

Made4uoRibe_1-1714335586375.png

The result will be like this. 

Made4uoRibe_2-1714335620067.png

Then add this code on the very end on the same file. 

 

ul.mega-menu__list.page-width {
    width: 40%;
}

 

And Save. 

Result:

Made4uoRibe_4-1714335738091.png

 

 

 

 

Please don't forget to Like and Mark Solution to the post that helped you. Thanks!

Please don't forget to 

Like

 and 

Mark Solution 

to the post that helped you. Thanks!
Sip, savor, and support – your

Coffee Tip

 helps us keep coding magic.❤️❤️❤️
For FREE, premium codes, and trusted, knowledgeable Shopify developers, visit us at

Made4uo.com


View solution in original post

Reply 1 (1)

Made4uo-Ribe
Shopify Partner
6047 1452 1790

This is an accepted solution.

Hi @OsiusKara 

Check this one. 

Online theme > Select theme > Edit code > Assets > component-mega-menu.css > and find this code. 

Made4uoRibe_0-1714335544681.png

Change grid-template-columns: Like this

Made4uoRibe_1-1714335586375.png

The result will be like this. 

Made4uoRibe_2-1714335620067.png

Then add this code on the very end on the same file. 

 

ul.mega-menu__list.page-width {
    width: 40%;
}

 

And Save. 

Result:

Made4uoRibe_4-1714335738091.png

 

 

 

 

Please don't forget to Like and Mark Solution to the post that helped you. Thanks!

Please don't forget to 

Like

 and 

Mark Solution 

to the post that helped you. Thanks!
Sip, savor, and support – your

Coffee Tip

 helps us keep coding magic.❤️❤️❤️
For FREE, premium codes, and trusted, knowledgeable Shopify developers, visit us at

Made4uo.com