Mega Menu Navigation Layout – Prestige Theme

[emilyaugstudios]

Hey everyone 🙂 I'm using prestige theme and just wondering if it is possible to move my menu navigation items into a list rather than side by side how they currently appear? The only way I can figure out how to do it is adding a subheading to the menu items like 'shop by category' and then it moves them into a list layout. I'd prefer not to have a subheading if possible. Is there a way to do this? I'd also like to have the items sit directly under the dropdown they are coming from (SHOP).

Any help would be greatly appreacted! Here's the URL – https://927103-16.myshopify.com/

Current look –

Rough idea of what I want – 

[goldi1]

Hello @emilyaugstudios 

Go to online store ----> themes ----> actions ----> edit code ---->
Open your theme.css file and paste the following code at the bottom:

.mega-menu__linklist {
    flex-direction: column;
}
.mega-menu {
    align-items: start !important;

}

Buy me a Pizza

If this was helpful, hit the like button and accept the solution.
Thanks

[emilyaugstudios]

Hi, this kind of worked thank you! The items all centralise together with the images, is there a way to fix this? Also, is there a way to have less padding between each menu item in the list/column?

[goldi1]

Hello @emilyaugstudios 

Go to online store ----> themes ----> actions ----> edit code ---->assets....>theme.css
search the code

@media screen and (min-width: 1150px) {
    .header__primary-nav {
         column-gap: 2.5rem; 
    }

replace this new code

@media screen and (min-width: 1150px) {
    .header__primary-nav {
        /* column-gap: 2.5rem; */
    }

also serach 

.mega-menu__linklist {
   gap: var(--mega-menu-linklist-gap); 

    flex-wrap: wrap;
    flex: 0 auto;
    display: flex;
}

replace to this code

.mega-menu__linklist {
    /* gap: var(--mega-menu-linklist-gap); */
    gap: 10px;
    flex-wrap: wrap;
    flex: 0 auto;
    display: flex;
}

add this code bottom of the theme,css file

.header__logo {

    padding-left: 50px !important;
}

Thanks

Buy me a Pizza

If this was helpful, hit the like button and accept the solution.
Thanks

[emilyaugstudios]

Thank you but that hasn't changed anything. Sorry!

[goldi1]

okaydon't worry i send you other code

[Gromer]

Yes! you're.

[goldi1]

Will you tell me which part of yours worked or none worked

[emilyaugstudios]

The code got me this far, so it's looking great but I want the menu items to fall under the SHOP navigation section if possible? Thank you for the help so far.

[goldi1]

Ok till then i will fix this too

[goldi1 · Accepted solution]

Hello @emilyaugstudios 

now check

please add this code theme.css bottom of the file

.mega-menu__linklist {
  
    padding-right: 40%;
}

[emilyaugstudios]

Thank you @goldi1 that has worked, my only question now is why does the 'coming soon' category display on 2 lines instead of 1? Is there a way to stop this? I want it to be on one line please 😊

[goldi1]

Hello @emilyaugstudios 

also add this code bottom of the theme,css

.mega-menu__linklist {
  
    width: 50%;
}

can you buy me a pizza if possible so I can have a party

Thanks

[goldi1]

hello @emilyaugstudios 

Thanks for accepting my solution .can you buy me a pizza so I can have a party

Thanks

[emilyaugstudios]

Thank you @goldi1 that has worked, my only question now is why does the 'coming soon' category display on 2 lines instead of 1? Is there a way to stop this? I want it to be on one line please 😊