How to create a text-based mega menu in the Dawn theme?

[Username121212]

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 

 

 

[munayam]

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

[Username121212]

no i am not using any app

https://polespets.com

[munayam · 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

[Username121212]

in base.css ?

[munayam]

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

[Username121212]

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]

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

[Username121212]

i want to the size to be dependent on the text volume i will put picture to show what i need

[Username121212]

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]

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

[Username121212]

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 that

[munayam]

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