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%;
}
}
And this is the theme.scss.liquid code
/*================ 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.
