#burgermenu { position: absolute; top: 10px; right: 10px; display: none; cursor: pointer; .bar1, .bar2, .bar3 { width: 35px; height: 5px; background-color: $text-color; margin: 6px 0; transition: 0.4s; } &.change .bar1 { -webkit-transform: rotate(-45deg) translate(-9px, 6px); transform: rotate(-45deg) translate(-9px, 6px); } &.change .bar2 {opacity: 0;} &.change .bar3 { -webkit-transform: rotate(45deg) translate(-8px, -8px); transform: rotate(45deg) translate(-8px, -8px); } } @media only screen and (max-width: $mobile-max-width) { .dropdown:hover .navLink, .navLink:hover { transform: none; } #burgermenu{ display: inline-block; } .visible{ display: inline-grid !important; } .mainmenuContainer{ display: none; text-align: left !important; background-color: $back-color-3; width: 100% !important; a { text-align: left !important; border-bottom: #111721 solid 2px; width: 100% !important; } .dropdown-content{ display: block; position: relative; left: 0; transform: none; width: 100%; a{ padding-left: 40px !important; border-bottom: #111721 solid 2px; } } } #mainmenu{ display: block; position: absolute; top: 0; left: 0; right: 0; } }