Debut Theme - How to create multi-column drop down from main nav menu

Store Design
1

HI,

I’m hoping someone can please help me? The Debut theme has the longest menu ever!! Can someone please help me with new code that I can add to the theme to modify the navigation menu? I would love the long drop down menu for CATEGORY and BRANDS to be three (3) columns not 1.

https://spottydot.com.au/

2

Please add below css in bottom of assets/theme.css file

.site-nav__dropdown {
width: 710px ;

}

.site-nav__dropdown ul {
display: flex;
flex-wrap: wrap;

}

.site-nav__dropdown li {
display: block;
width: 33.33%;

}
Thank you.

3

@sandraleedesign

Place Add this CSS in the bottom of theme.css

.site-nav__dropdown {
    margin:10px 0;
    width: 710px !important;
}
.site-nav__dropdown ul { 
  display: flex !important;
  flex-wrap: wrap;
}
.site-nav__dropdown li {
  display: block !important;
  width: 33.33%;
}

Thanks!

4

Oh no, this code didn’t work? Do you have any ideas why?

5

Oh no, this code dosnt work? any ideas why?

6

Thank you, but this code dosnt work either? any ideas why?

7

@sandraleedesign

Please try this to theme.css

.site-nav__dropdown {
    margin:10px 0 !important;
    width: 710px !important;
}
.site-nav__dropdown ul { 
  display: flex !important;
  flex-wrap: wrap !important;
}
.site-nav__dropdown li {
  display: block !important;
  width: 33.33% !important;
}

Thanks!