Frontend. Проблема с "гамбургер" меню для мобильных.

[Anelya8596]

Всем привет! Помогите новичку-программисту, кому несложно)
Создала гамбургер-меню для сайта в мобильном разрешении, но отображается оно не так как мне надо. При нажатии на значок - меню скрывается, и нажав на крестик - появляется. Мне же необходимо их поменять местами, т. е. чтобы меню появлялось только когда щелкаем на значок и закрывалось при нажатии на крестик. Надеюсь, что смогла объяснить понятно))
Вот код меню:

//код html
<a href="#" class="toggle-mnu hidden-lg"><span></span></a>
<nav class="main-mnu hidden-mnu hidden-lg">
<ul>
<li class="active"><a href="#">О нас</a></li>
<li><a href="">Прайс - лист</a></li>
<li><a href="">Наше видео</a></li>
<li><a href="">Контакты</a></li>
</ul>
</nav>

//и стили в sass
.toggle-mnu
display: block
width: 28px
height: 28px
margin-top: 14px

span:after, span:before
content: ""
position: absolute
left: 0
top: 9px

span:after
top: 18px

span
position: relative
display: block

span, span:after, span:before
width: 100%
height: 2px
background-color: #222222
transition: all 0.3s
backface-visibility: hidden
border-radius: 2px


&.on span
background-color: transparent

&.on span:before
transform: rotate(45deg) translate(-1px, 0px)

&.on span:after
transform: rotate(-45deg) translate(6px, -7px)


Буду очень благодарна за вашу помощь, ибо мне она жизненно необходима))
Снимок экрана (4).jpg
Снимок экрана (5).jpg