Liquid, JavaScript, themes, sales channels
Hey everyone! I am working on my website. The dropdown menu doesn't work the way I want.
See photo for example.
I want it to be like this:
This is the timber.scss.liquid code:
/*================ Module | Site Nav and Dropdowns ================*/
.site-nav {
cursor: default;
margin: 0;
margin-left: -$gutter / 2;
}
.site-nav__item {
position: relative;
display: inline-block;
margin: 100;
li {
display: inline;
}
}
.site-nav--mobile {
@extend .site-nav;
margin-left: -10px;
&.text-right {
margin: 0 -10px 0 0;
}
}
.site-nav__link {
display: inline;
text-decoration: none;
padding: $gutter / 2;
white-space: nowrap;
font-size: em(14px);
.icon-arrow-down {
position: relative;
top: -2px;
padding-left: $gutter / 4;
font-size: 10px;
}
}
.site-nav__dropdown-link {
.icon-arrow-down {
position: absolute;
top: 50%;
right: $gutter / 2;
font-size: 10px;
@include transform("translateY(-50%) rotate(-90deg)");
}
.site-nav__dropdown-grandchild & {
white-space: normal;
}
}
.site-nav__link--icon {
padding-left: $gutter / 4;
padding-right: $gutter / 4;
}
.site-nav--mobile {
.site-nav__link {
display: inline-block;
}
.icon {
font-size: em(30px);
}
}
/*================ Dropdowns ================*/
.site-nav__dropdown {
opacity: 0;
display: inline-block;
position: absolute;
left: 0;
margin: 0;
z-index: $zindexNavDropdowns;
pointer-events: none;
a {
background-color: $colorNav;
text-align: left;
&:hover,
&:active {
background-color: darken ($colorNav, 10%);
}
}
&.nav-outside {
left: auto;
right: 0;
}
}
.site-nav__dropdown-grandchild {
position: absolute;
top: -10px; // Match dropdown padding
left: 100%;
width: 100%;
margin: 0;
z-index: $zindexNavDropdowns;
opacity: 0;
pointer-events: none;
a {
background-color: $colorNav;
&:hover,
&:active {
background-color: ($colorNav, 10%);
}
}
ul {
background-color: $colorNav;
padding: ($gutter / 3) 0;
// Grand children dropdown is 2px off parent dropdown
margin: 0 0 0 2px;
}
&.nav-outside {
left: -100%;
}
}
/*================ Nav Links ================*/
.site-nav,
.site-nav--open {
white-space: normal;
opacity: 0; }
.no-js .site-nav, .site-nav.site-nav--init, .no-js
.site-nav--open,
.site-nav--open.site-nav--init {
opacity: 1;
-webkit-transition: color 0.2s, opacity 0.1s;
-moz-transition: color 0.2s, opacity 0.1s;
-ms-transition: color 0.2s, opacity 0.1s;
-o-transition: color 0.2s, opacity 0.1s;
transition: color 0.2s, opacity 0.1s; }
.burger-icon {
display: block;
height: 2px;
width: 18px;
left: 25px;
margin-left: -9px;
position: absolute;
transition: all 0.25s ease-out;
background: var(--shopify-editor-setting-color_headings); }
.js-drawer-open-left .burger-icon {
width: 24px;
top: calc(50% - 1px);
left: calc(50% - 4px); }
@media screen and (min-width: 769px) {
.burger-icon {
width: 20px;
left: 27px;
margin-left: -12px; }
.js-drawer-open-left .burger-icon {
width: 25px;
top: calc(50% - 1px);
left: calc(50% - 2px); } }
.burger-icon--top {
top: 17px; }
.js-drawer-open-left .burger-icon--top {
top: 25px;
-webkit-transform: rotate(45deg);
-moz-transform: rotate(45deg);
-ms-transform: rotate(45deg);
-o-transform: rotate(45deg);
transform: rotate(45deg); }
.burger-icon--mid {
top: 24px; }
.js-drawer-open-left .burger-icon--mid {
opacity: 0; }
.burger-icon--bottom {
top: 31px; }
.js-drawer-open-left .burger-icon--bottom {
top: 25px;
-webkit-transform: rotate(-45deg);
-moz-transform: rotate(-45deg);
-ms-transform: rotate(-45deg);
-o-transform: rotate(-45deg);
transform: rotate(-45deg); }
.site-nav__link--burger {
width: 50px;
height: 50px;
padding: 0;
text-align: center;
line-height: 50px;
background-color: white;
border: 0;
position: relative;
top: 4px;
transition: transform 0.15s ease-out; }
.site-nav__link--burger svg {
width: 20px;
height: 30px; }
.site-nav__link--burger::after {
border-color: #000; }
.site-nav__item {
white-space: normal; }
.site-nav__link {
font-family: Roboto, sans-serif;
font-weight: 700;
font-style: normal;
letter-spacing: 0.1em;
text-transform: uppercase;
-webkit-transition: color 0.2s;
-moz-transition: color 0.2s;
-ms-transition: color 0.2s;
-o-transition: color 0.2s;
transition: color 0.2s;
font-size: 16px; }
.site-nav--has-dropdown > a {
position: relative;
z-index: 6; }
.site-nav--has-dropdown:hover > a,
.site-nav--has-dropdown > a.nav-focus, .site-nav--has-dropdown.nav-hover > a {
color: var(--shopify-editor-setting-color_headings);
background-color: #FFFFFF;
opacity: 1;
-webkit-transition: none;
-moz-transition: none;
-ms-transition: none;
-o-transition: none;
transition: none; }
.site-nav--has-dropdown:hover > a:before,
.site-nav--has-dropdown > a.nav-focus:before, .site-nav--has-dropdown.nav-hover > a:before {
content: "";
position: absolute;
left: 15px;
right: 30px;
bottom: 0;
display: inline;
background-color: var(--shopify-editor-setting-color_headings);
height: 1px;
z-index: 6; }
.site-nav--has-dropdown.site-nav--has-dropdown-grandchild a:before {
display: none; }
/*================ Dropdown Animation ================*/
.site-nav__dropdown {
background-color: var(--shopify-editor-setting-color_body_bg);
min-width: 100%;
padding: 10px 0;
box-shadow: 0px 10px 20px rgba(0, 0, 0, 0.09);
-webkit-transform: translate3d(0px, -12px, 0px);
-moz-transform: translate3d(0px, -12px, 0px);
-ms-transform: translate3d(0px, -12px, 0px);
-o-transform: translate3d(0px, -12px, 0px);
transform: translate3d(0px, -12px, 0px); }
.supports-no-touch .site-nav--has-dropdown:hover .site-nav__dropdown, .site-nav--has-dropdown.nav-hover .site-nav__dropdown, .nav-focus + .site-nav__dropdown {
opacity: 1;
pointer-events: auto;
-webkit-transform: translate3d(0px, 0px, 0px);
-moz-transform: translate3d(0px, 0px, 0px);
-ms-transform: translate3d(0px, 0px, 0px);
-o-transform: translate3d(0px, 0px, 0px);
transform: translate3d(0px, 0px, 0px); }
.supports-no-touch .site-nav--has-dropdown:hover .site-nav__dropdown, .site-nav--has-dropdown.nav-hover .site-nav__dropdown {
-webkit-transition: transform 300ms cubic-bezier(0.2, 0.06, 0.05, 0.95);
-moz-transition: transform 300ms cubic-bezier(0.2, 0.06, 0.05, 0.95);
-ms-transition: transform 300ms cubic-bezier(0.2, 0.06, 0.05, 0.95);
-o-transition: transform 300ms cubic-bezier(0.2, 0.06, 0.05, 0.95);
transition: transform 300ms cubic-bezier(0.2, 0.06, 0.05, 0.95); }
.site-nav__dropdown-grandchild {
min-width: 100%;
box-shadow: 0px 10px 20px rgba(0, 0, 0, 0.09);
-webkit-transform: translate3d(-12px, 0px, 0px);
-moz-transform: translate3d(-12px, 0px, 0px);
-ms-transform: translate3d(-12px, 0px, 0px);
-o-transform: translate3d(-12px, 0px, 0px);
transform: translate3d(-12px, 0px, 0px); }
.nav-outside + .site-nav__dropdown-grandchild {
-webkit-transform: translate3d(12px, 0px, 0px);
-moz-transform: translate3d(12px, 0px, 0px);
-ms-transform: translate3d(12px, 0px, 0px);
-o-transform: translate3d(12px, 0px, 0px);
transform: translate3d(12px, 0px, 0px); }
.supports-no-touch .site-nav--has-dropdown-grandchild:hover .site-nav__dropdown-grandchild, .site-nav--has-dropdown-grandchild.nav-hover .site-nav__dropdown-grandchild, .nav-focus + .site-nav__dropdown-grandchild {
opacity: 1;
pointer-events: initial;
-webkit-transform: translate3d(0px, 0px, 0px);
-moz-transform: translate3d(0px, 0px, 0px);
-ms-transform: translate3d(0px, 0px, 0px);
-o-transform: translate3d(0px, 0px, 0px);
transform: translate3d(0px, 0px, 0px); }
.supports-no-touch .site-nav--has-dropdown-grandchild:hover .site-nav__dropdown-grandchild, .site-nav--has-dropdown-grandchild.nav-hover .site-nav__dropdown-grandchild {
-webkit-transition: transform 300ms cubic-bezier(0.2, 0.06, 0.05, 0.95);
-moz-transition: transform 300ms cubic-bezier(0.2, 0.06, 0.05, 0.95);
-ms-transition: transform 300ms cubic-bezier(0.2, 0.06, 0.05, 0.95);
-o-transition: transform 300ms cubic-bezier(0.2, 0.06, 0.05, 0.95);
transition: transform 300ms cubic-bezier(0.2, 0.06, 0.05, 0.95); }
/*================ Submenu items ================*/
.site-nav__dropdown a,
.site-nav__grandchild-dropdown a {
background-color: white; }
.site-nav__dropdown a:hover, .site-nav__dropdown a:active, .site-nav__dropdown a:focus,
.site-nav__grandchild-dropdown a:hover,
.site-nav__grandchild-dropdown a:active,
.site-nav__grandchild-dropdown a:focus {
background-color: white; }
.site-nav__dropdown-link {
font-style: italic;
display: inline;
white-space: normal;
padding: 5px 15px;
font-size: 0.94118em; }
.site-nav--has-grandchildren .site-nav__dropdown-link {
padding-right: 45px; }
/*================ Compressed nav if too many links ================*/
.site-nav--compress .site-nav__item:not(.site-nav__item--compressed) {
display: none; }
@media screen and (min-width: 769px) {
.site-nav--open {
display: none; } }
.site-nav--open.site-nav--open__display {
display: inline; }
/*================ Search bar ================*/
.site-nav--search__bar {
vertical-align: middle;
padding: 0 10px 7px 0; }
.site-nav--search__bar input {
background-color: var(--shopify-editor-setting-color_input); }
I hope someone can tell me what I'm doing wrong.
User | RANK |
---|---|
11 | |
11 | |
8 | |
6 | |
6 |
Learn these 5 things I had to learn the hard way with starting and running my own business
By Kitana Jan 27, 2023Would you love to unleash the unbridled power of the Google Shopping Channel into your sho...
By Gabe Jan 6, 2023How can you turn a hobby into a career? That’s what Emmanuel did while working as a wa...
By Skye Dec 30, 2022