How do I make my menu items vertical

[Melanie_Bennett]

My store (sykes.com.au) displays one of it's menus horizontally. 

How can I change this so that they are shown vertically like my other menu items (see sample below)?

Any advice would be greatly appreciated.

[ankur-verma]

Hi Melanie

Just checked your store and found that you have a class "menu-parts-store" in the 'Parts Store'. You can just remove that class from that menu.
It will start coming properly. And if you did not want to remove this class then just change the styling attached with that particular class.

Please let me know if worked for you.

[Melanie_Bennett]

Thanks Ankur for your response.

I'm not sure how to remove that class from the menu. Would the 'menu-parts-store' you are referring to be within the timber.scss.liquid?

If so, what do I need to change from the below?

&.menu-parts-store {
position: static;
.nav-block {
display: none;
position: absolute;
top: 100%;
left:0;
width: 100%;
background: #ffffff;
z-index: 10;
border: 1px solid $colorBorder;
border-top: none;
.site-nav__dropdown {
display: block;
position: relative;
border: none;

li {
.sub-sub-nav {
> li {
> a {
background: lighten($colorBorder, 5%);
border-left: 3px solid lighten($colorBorder, 5%);

}
&:hover {
> a {
border-left: 3px solid $colorPrimary;
}
}
}
.sub-sub-sub-nav {
> li {
> a {
background: lighten($colorBorder, 2%);
height: auto;
min-height: 1px;
border: none;
border-left: 3px solid lighten($colorBorder, 2%);
}
&:hover {
>a {
border-left: 3px solid $colorPrimary;
}
}
}
}
}
&:hover {
.sub-sub-nav {
left: 100%;
top: -1px;

}
}
&:nth-child(3n) {
&:hover {
.sub-sub-nav {
left:auto;
right: 100%;
}
}
.sub-sub-nav {
li {
.sub-sub-sub-nav {
left: auto;
right: 230px;
}
}
}
}

}

> li {
display: inline-block;
vertical-align: top;
width: 32%;
margin-right: 1%;
&:first-child {
/* border-top: none; */
}

a {
border-right: none;
}
}

}
}
.site-nav__link {
background: #1f4377;

}

&:hover {
.nav-block {
display: block;
}
.site-nav__link {
background: #ffffff;
}
}

}
&:last-child {
.site-nav__link {
background: $colorSecondary;
}
&:hover {
.site-nav__link {
background: #ffffff;

[ankur-verma · Accepted solution]

Hi Melanie

Just paste these line of code in the last of your timber.scss.liquid file. Then everything will look fine.

.site-nav > li.menu-parts-store .nav-block {
position: relative; width: auto;
}
.site-nav > li.menu-parts-store .nav-block .site-nav__dropdown {
position: absolute;
}
.site-nav > li.menu-parts-store .nav-block .site-nav__dropdown > li {
width: 230px;
}

Please let me know if it works for you.

[Melanie_Bennett]

It worked - thank you so much. You're help is very much appreciated.

I noticed that some of the nested menu appear on the left and some on the right. See images below. How do I change this to ensure all appear on the right?

[ankur-verma · Accepted solution]

Hi Melanie

Just paste these line of code just after the last code you put

.site-nav > li.menu-parts-store .nav-block .site-nav__dropdown li:nth-child(3n):hover .sub-sub-nav, .site-nav--mobile > li.menu-parts-store .nav-block .site-nav__dropdown li:nth-child(3n):hover .sub-sub-nav {
left: 100%;
right: unset;
top: -1px;
}

Please let me know if it works for you.

[Melanie_Bennett]

Thank you kindly for your responses. I may need to change the nested menu's for the 'parts store' to show left instead of right. How would I alter the following code for this to occur?

.site-nav > li.menu-parts-store .nav-block .site-nav__dropdown li:nth-child(3n):hover .sub-sub-nav, .site-nav--mobile > li.menu-parts-store .nav-block .site-nav__dropdown li:nth-child(3n):hover .sub-sub-nav {
left: 100%;
right: unset;
top: -1px;
}

[ankur-verma · Accepted solution]

Hi Melanie

It quite simple. Just replace the css code I provided in last reply with this.

.site-nav > li.menu-parts-store .nav-block .site-nav__dropdown li:hover .sub-sub-nav, .site-nav--mobile > li.menu-parts-store .nav-block .site-nav__dropdown li:hover .sub-sub-nav {
left: unset;
top: -1px;
right: 100%;
}

It will work perfectly.

[Melanie_Bennett]

Hi Ankur,

Thank you for your help on this - your suggestions worked perfectly in chrome however in IE, the nested menus are showing on both the left and right sides of the menu. PLease see below. Is there a way to ensure all nested menus show on the left side?

 

[miraj2020]

Hi there,

I know this post is a year old, but hoping you can help... I don't have any liquid pages called "timber.scss.liquid".  I am using the Providence theme and really don't like the horizontal sub-menus?!  What liquid file should I be pasting your code into?

Thanks,

Leanne