How do I make my menu items vertical

Solved
Excursionist
20 1 3

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

 

Parts Store.png

 

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

 

Vertical Menu.png

 

Any advice would be greatly appreciated.

0 Likes

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.

0 Likes
Excursionist
20 1 3

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;

 

0 Likes

Success.

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.

1 Like
Excursionist
20 1 3

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?

 

left.png

right.png

0 Likes

Success.

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.

1 Like
Excursionist
20 1 3

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;
}

0 Likes

Success.

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.

1 Like
Highlighted
Excursionist
20 1 3

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?

 

parts store 1.png 

 

parts store 2.png

0 Likes