Wed, 2018-10-03 19:26
Hello ! I am using a theme for my website and it seems like the menu for mobile it’s not working. Basically when i tap on the 3 lines icon of the menu it doesn’t open. I would really appreciate some help !
The mobile-nav code:
/*================ Mobile Site Nav ================*/ .mobile-nav { display: block; @include transform(translate3d(0, 0, <img src="https://csscreator.com/sites/all/modules/smileys/packs/Roving/innocent.png" title="Innocent" alt="Innocent" class="smiley-content" />); transition: $transition-drawer; .sub-nav--is-open & { @include transform(translate3d(-100%, 0, <img src="https://csscreator.com/sites/all/modules/smileys/packs/Roving/innocent.png" title="Innocent" alt="Innocent" class="smiley-content" />); } .third-nav--is-open & { @include transform(translate3d(-200%, 0, <img src="https://csscreator.com/sites/all/modules/smileys/packs/Roving/innocent.png" title="Innocent" alt="Innocent" class="smiley-content" />); } } .mobile-nav__link, .mobile-nav__sublist-link { display: block; width: 100%; padding: $nav-button-padding ($nav-button-padding * 2); font-size: $font-size-mobile-input; } .mobile-nav__link { position: relative; } .mobile-nav__sublist-link:not(.mobile-nav__sublist-header) { padding-left: $return-button-width + $nav-button-padding; padding-right: ($nav-button-padding * 2); } .mobile-nav__item { display: block; width: 100%; .icon { position: absolute; top: 50%; left: 50%; height: 12px; width: 10px; margin: -6px 0 0 -5px; } } .mobile-nav__return { border-right: 1px solid $color-border; } .mobile-nav__return-btn { position: relative; padding: 24px 0; width: $return-button-width; } .mobile-nav__icon { position: absolute; right: 0; top: 0; bottom: 0; padding-left: $gutter-site-mobile; padding-right: $gutter-site-mobile; pointer-events: auto; overflow: hidden; } .mobile-nav__table { display: table; width: 100%; } .mobile-nav__table-cell { display: table-cell; vertical-align: middle; width: 1%; text-align: left; white-space: normal; } .mobile-nav__toggle-button { padding: 20px 15px; } .mobile-nav__dropdown { position: absolute; background-color: $color-body; z-index: $z-index-sub-nav; width: 100%; top: 0; right: -100%; display: none; .is-active + & { display: block; opacity: 1; } // Need the transition so `prepareTransition` removes class &.is-closing { transition: $transition-drawer; opacity: 0.99; } .mobile-nav__sublist-header { font-family: $font-stack-header; font-style: $font-style-header; font-weight: $font-weight-header; display: table-cell; vertical-align: middle; padding-left: $nav-button-padding; } .mobile-nav__sublist-header--main-nav-parent { color: $color-body-text; } } /*================ Mobile nav wrapper ================*/ .mobile-nav-wrapper { @include transform(translateY(-100%)); position: absolute; top: 0; left: 0; background-color: $color-body; transition: $transition-drawer; display: none; overflow: hidden; width: 100%; z-index: 300; &::after { content: ''; position: absolute; bottom: 0; left: 0; right: 0; border-bottom: 1px solid $color-border; } &.js-menu--is-open { display: block; } } .mobile-nav--open { .icon-close { display: none; } } .mobile-nav--close { .icon-hamburger { display: none; } } .site-header__mobile-nav { z-index: 999; position: relative; background-color: $color-body; @include media-query($small) { @include display-flexbox(); @include align-items(center); } }