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.
Solved! Go to the solution
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.
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;
This is an 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.
This is an 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.
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;
}
This is an 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.
User | Count |
---|---|
458 | |
189 | |
139 | |
61 | |
42 |