Solved

mega menu

Username121212
New Member
15 0 0

Hi everyone 

 

in dawn theme is 12.0.0 and i want to create mega menu but the problem is the normal mega menu width will take all the page even if its don't have text i want the page width be according to the text 

 

like in the below picture bgfds.PNG

 

 

 

 

 

Accepted Solution (1)
munayam
Shopify Partner
9 3 0

This is an accepted solution.

You can apply this CSS rule but remember to check from your browser's incognito mode to see the changes reflect. 

.js .mega-menu__content {
  margin-right: 100px;
  margin-left: 100px;
}

 You can increase or decrease those values to achieve your desired requirement

Email me: munayamt@gmail.com

View solution in original post

Replies 12 (12)

munayam
Shopify Partner
9 3 0

If you are using an app to create this mega menu then you can look for an option to reduce width from your active mega menu app. If not, you can share the website url you need help with and I will see if this can be resolved using custom CSS rules. Cheers

Email me: munayamt@gmail.com
Username121212
New Member
15 0 0

no i am not using any app

 

https://polespets.com

munayam
Shopify Partner
9 3 0

This is an accepted solution.

You can apply this CSS rule but remember to check from your browser's incognito mode to see the changes reflect. 

.js .mega-menu__content {
  margin-right: 100px;
  margin-left: 100px;
}

 You can increase or decrease those values to achieve your desired requirement

Email me: munayamt@gmail.com
Username121212
New Member
15 0 0

in base.css ?

 

munayam
Shopify Partner
9 3 0

You can access your theme's customization then navigate to theme settings > custom CSS to apply

Email me: munayamt@gmail.com
Username121212
New Member
15 0 0

thanks for your time it work not like what i wanted but it did change the size the problem is it the same size for all even if it was 1 column text can we fix that thanks again 

munayam
Shopify Partner
9 3 0

Yes I know it creates fixed-width for all secondary menu items. You shared an image with your initial query so I provided a solution accordingly.

You may look for an option from your active theme's customization to disable mega menu feature to see if that helps further. Usually they provide such option. Good luck

Email me: munayamt@gmail.com
Username121212
New Member
15 0 0

i want to the size to be dependent on the text volume i will put picture to show what i needdddfg.PNGsdf.PNG

Username121212
New Member
15 0 0

i edit the code using chatgpt and it work i think let me now if it need improvement

 

.js .mega-menu__content {
width: fit-content;
margin: 0 auto; /* Center the content */
}

munayam
Shopify Partner
9 3 0

The code seems to work for both birds and reptiles menu items. Well done.

Email me: munayamt@gmail.com
Username121212
New Member
15 0 0

yes but the birds section is not aligned to center it show to the right side i cant click it can you help me fix thataaa.PNG

munayam
Shopify Partner
9 3 0

Please apply the margin values to center child-items or you can reach out to this theme's author to further discuss. Good day/night

Email me: munayamt@gmail.com