How can I create a horizontal nested menu in the Crave theme?

Store Design
, ,
1

Hi, I just discovered a post related to this, I implemented solution given by User Dmwwebartisan

at https://community.shopify.com/c/shopify-design/nested-menu-is-vertical/m-p/1570541#M417846.

The space between the columns is a little uneven in my implementation, but I can live with it!!

Thank you Dmwwebartisan!!

Hi, Hope all are doing well!

I created a nested menu for the header links but they are lengthy as they appear vertically-oriented column. Am wondering how to make the nested links appear in a horizontal row instead. Can you please help?

Thank you!

Allie

2

If you want to display your nested menu links in a horizontal row instead of a vertical column, you will need to modify the CSS code of your menu.

You can try the solution provided by Dmwwebartisan in the Shopify community post you mentioned, but if the space between the columns is uneven, you may want to adjust the CSS to make it more even.

Without seeing your code, it’s hard for me to give specific advice, but here are some general steps you can take:

  1. Find the CSS code that controls the layout of your menu.

  2. Look for the CSS property that controls the display of the menu items. It may be set to “block” or “inline-block”, which will cause the menu items to appear in a vertical column. Change it to “inline”, which will cause the menu items to appear in a horizontal row.

  3. If the space between the menu items is uneven, look for the CSS property that controls the spacing between the items. It may be set to “margin” or “padding”. Adjust the value of this property to make the spacing more even.

  4. Save your changes and preview your menu to see if it looks the way you want it to.

3

Thanks EcomGraduates, but I was not able to find the margin or padding. This is the code in the file component-list-menu.css:

.list-menu–right {
right: 0;
}

.list-menu–disclosure {
position: absolute;
min-width: 100%;
width: 20rem;
border: 1px solid rgba(var(–color-foreground), 0.2);
}

.list-menu–disclosure:focus {
outline: none;
}

.list-menu__item–active {
text-decoration: underline;
text-underline-offset: 0.3rem;
}

.list-menu__item–active:hover {
text-decoration-thickness: 0.2rem;
}

.list-menu–disclosure.localization-selector {
max-height: 18rem;
overflow: auto;
width: 10rem;
padding: 0.5rem;
}

@media only screen and (min-width: 700px){
.header__submenu.list-menu{
width: 50rem !important;
}
.header__submenu.list-menu li {
width: calc(100%/3);
display: inline-block;
}
}