Submenu Organization (Dawn Theme)

[ayoume88]

Hi!

I would like to organize my products submenu.

I want everything to list vertically and also look like the following:

Shop All                               Apparel & Accessories                    Sakura Collection
Best Sellers                             Car Accessories                              Holiday Themed

Clearance                                   Consultation                                      KANAKO
Gift Card                                        Electronic
                                         Keychains & Car Ornaments

                                                   Kitchen & Dining
                                                 Office & Stationary

                                                              Pet

So the explanation for the categorization is:

Left column: Basic Quick Links

Middle column: Products Categories in alphabetical order

Right column: Themed Collection

Thank you so much in advance for your help.

[Made4uo-Ribe]

Hi @ayoume88 

Check this one. 

From you Admin page, go to Online Store > Themes

Select the theme you want to edit

Under the Asset folder, open the main.css(base.css, style.css or theme.css)

Then place the code below at the very bottom of the file.

.mega-menu__list {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    grid-template-rows: repeat(8, minmax(0, 1fr));
    text-align: center;
}

#MegaMenu-Content-1 > ul > li:nth-child(2) {
    grid-column: 1;
    grid-row: 2;
}

#MegaMenu-Content-1 > ul > li:nth-child(4) {
    grid-column: 1;
    grid-row: 3;
}

#MegaMenu-Content-1 > ul > li:nth-child(15) {
    grid-column: 1;
    grid-row: 4;
}

#MegaMenu-Content-1 > ul > li:nth-child(3) {
    grid-column: 3;
    grid-row: 1;
}

#MegaMenu-Content-1 > ul > li:nth-child(6) {
    grid-column: 2;
    grid-row: 1;
}

#MegaMenu-Content-1 > ul > li:nth-child(11) {
    grid-column: 2;
    grid-row: 2;
}

#MegaMenu-Content-1 > ul > li:nth-child(12) {
    grid-column: 2;
    grid-row: 3;
}

#MegaMenu-Content-1 > ul > li:nth-child(9) {
    grid-column: 2;
    grid-row: 4;
}

#MegaMenu-Content-1 > ul > li:nth-child(5) {
    grid-column: 2;
    grid-row: 5;
}

#MegaMenu-Content-1 > ul > li:nth-child(8) {
    grid-column: 2;
    grid-row: 6;
}

#MegaMenu-Content-1 > ul > li:nth-child(10) {
    grid-column: 2;
    grid-row: 7;
}

#MegaMenu-Content-1 > ul > li:nth-child(7) {
    grid-column: 2;
    grid-row: 8;
}

#MegaMenu-Content-1 > ul > li:nth-child(13) {
    grid-column: 3;
    grid-row: 3;
}

And Save. 

Result:

Please don't forget to Like and Mark Solution to the post that helped you. Thanks!

[ayoume88]

Thank you! But it doesn't look like yours. I added the code in base.css and at the very bottom.

Mine's pushed to the left and kinda everywhere.

Please see the image attached.

[Made4uo-Ribe]

Check this one again. 

Same Instruction. 

.mega-menu__list {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr!important;
    text-align: center !important;
}

#MegaMenu-Content-1 > ul > li:nth-child(2) {
    grid-column: 1;
    grid-row: 2;
}

#MegaMenu-Content-1 > ul > li:nth-child(4) {
    grid-column: 1;
    grid-row: 3;
}

#MegaMenu-Content-1 > ul > li:nth-child(15) {
    grid-column: 1;
    grid-row: 4;
}

#MegaMenu-Content-1 > ul > li:nth-child(3) {
    grid-column: 3;
    grid-row: 1;
}

#MegaMenu-Content-1 > ul > li:nth-child(6) {
    grid-column: 2;
    grid-row: 1;
}

#MegaMenu-Content-1 > ul > li:nth-child(11) {
    grid-column: 2;
    grid-row: 2;
}

#MegaMenu-Content-1 > ul > li:nth-child(12) {
    grid-column: 2;
    grid-row: 3;
}

#MegaMenu-Content-1 > ul > li:nth-child(9) {
    grid-column: 2;
    grid-row: 4;
}

#MegaMenu-Content-1 > ul > li:nth-child(5) {
    grid-column: 2;
    grid-row: 5;
}

#MegaMenu-Content-1 > ul > li:nth-child(8) {
    grid-column: 2;
    grid-row: 6;
}

#MegaMenu-Content-1 > ul > li:nth-child(10) {
    grid-column: 2;
    grid-row: 7;
}

#MegaMenu-Content-1 > ul > li:nth-child(7) {
    grid-column: 2;
    grid-row: 8;
}

#MegaMenu-Content-1 > ul > li:nth-child(13) {
    grid-column: 3;
    grid-row: 3;
}
#MegaMenu-Content-1 > ul > li:nth-child(2) {
    grid-column: 3;
    grid-row: 1;
}
#MegaMenu-Content-1 > ul > li:nth-child(3) {
    grid-column: 2;
}

And Save. 

Please don't forget to Like and Mark Solution to the post that helped you. Thanks!

[Jamesrank]

To organize your product submenu with the desired vertical listing and categorization, you’ll need to structure the HTML and CSS accordingly. Here’s a general approach you can use: I also used the same approach for my kitchen remodeling project. Anyhow, here is the code, you can use. 

<div class="submenu-container">
<div class="submenu-column">
<h3>Shop All</h3>
<ul>
<li><a href="#">Best Sellers</a></li>
<li><a href="#">Clearance</a></li>
<li><a href="#">Gift Card</a></li>
</ul>
</div>
<div class="submenu-column">
<h3>Apparel & Accessories</h3>
<ul>
<li><a href="#">Car Accessories</a></li>
<li><a href="#">Consultation</a></li>
<li><a href="#">Electronic</a></li>
<li><a href="#">Keychains & Car Ornaments</a></li>
<li><a href="#">Kitchen & Dining</a></li>
<li><a href="#">Office & Stationary</a></li>
<li><a href="#">Pet</a></li>
</ul>
</div>
<div class="submenu-column">
<h3>Sakura Collection</h3>
<ul>
<li><a href="#">Holiday Themed</a></li>
<li><a href="#">KANAKO</a></li>
</ul>
</div>
</div>

.submenu-container {
display: flex;
justify-content: space-between;
width: 100%;
padding: 20px;
}

.submenu-column {
width: 30%;
}

.submenu-column h3 {
font-size: 18px;
margin-bottom: 10px;
}

.submenu-column ul {
list-style-type: none;
padding-left: 0;
}

.submenu-column ul li {
margin-bottom: 8px;
}

.submenu-column ul li a {
text-decoration: none;
color: #333;
}

.submenu-column ul li a:hover {
text-decoration: underline;
}