How to decrease the width of a mega-menu in Turbo theme?

[kittycatmeowmy]

Hi, I just enabled my first mega-menu and by default, it's using 100% of the screen, which leaves a ton of white space between columns. How would I reduce the width so it is only as wide as necessary to fit the text in each column?

Also, it would be great to reduce the padding between each menu item. Thanks!!!

I'm using the Turbo theme.

https://www.toe-beans.com/

[KetanKumar]

@kittycatmeowmy 

yes, please confirm this 

[kittycatmeowmy]

@KetanKumarthat's my desired solution, how do I accomplish this layout?

Also if it's possible to reduce the top and bottom padding between the menu items, that would be amazing!

[PageFly-Victor · Accepted solution]

Hi @Eden73,

This is Victor from PageFly - Landing Page Builder App

You can try this code by following these steps:

Step 1: Go to Online Store->Theme->Edit code.

Step 2: Search file style.css.

Step 3: Paste the below code at bottom of the file -> Save

[data-nav-desktop-details][open] .nav-desktop__tier-2--full-width-menu {

    width: 50% !important;

    margin-left: 25%;

}

Hope my solution works perfectly for you!

Best regards,

Victor | PageFly 

[GemPages]

Hello @kittycatmeowmy ,

It's GemPages support team and glad to support you today.

I would like to give you the recommendation to support you so kindly follow the steps below:

1. Go to Online Store > Theme > Edit code of your current theme

2. Open your theme.liquid theme file

3. Paste the below code before </head>

<style>
.main-nav__wrapper .nav.nav--combined {
  position: relative;
}
</style>

For example,

If you require any further information, feel free to contact me.

Best regards,
GemPages Support Team