How can I adjust the column length in my Warehouze Theme Mega Menu?

Store Design
, , ,
1

Hi!

I was hoping that someone would be able to assist me in styling my Mega Menu for the Warehouze Theme. Currently with the default settings I am struggling with the length of our columns being way too long and I’m struggling to figure out a solution to solve it how I would like. A website’s menu that I am trying to replicate is ioutlet.com

Default Mega Menu
Default Mega Menu2796×1746 218 KB

The closest I have got to how I would like to style it is this result here achieved with the following CSS styling. However, I would like the list items of the phone models to still go downward and not across like they are, but if I set the flex-direction to column it returns back to the original. Here is the CSS:

.mega-menu__linklist {
display: flex !important;
column-gap: 16px;
flex-wrap: wrap;
}

Screenshot 2024-01-11 093847.png
Screenshot 2024-01-11 093847.png2796×671 99.7 KB

2

Hi, You can add media query over the CSS to decide the screen device width you want to CSS for them

For example:

@media (min-width: 767px) {
    .mega-menu__linklist {
      display: flex !important;
      column-gap: 16px;
      flex-wrap: wrap;
    }
}

As the example above will be understood, interfaces with a width greater than 767px (mobile device width) will have CSS applied inside.

I hope the above suggestion can help you.