Почему display: none не работает?

Хочу сделать меню - гамбургер в мобильной версии. Но чтобы видно было только в мобильной версии. А в полноэкранном режиме обычное меню. У меня видно и в моб.версии и в полноэкранном режиме, display: none не работает. Что можно сделать?
Есть html код:

<div class="col-xl-auto">
	<button class="top-nav_btn">
		<i class="icon-menu"></i>
	</button>
		<ul class="top-nav_menu">
			<li><a href="#">Главная</a></li>
			<li><a href="#">О компании</a></li>
			<li><a href="#">наши услуги</a></li>
			<li><a href="#">Структура</a></li>
			<li><a href="#">инвесторам</a></li>
			<li><a href="#">контакты</a></li>
		</ul>
	</div>

Sass:

.top-nav
    background-color: $white
    padding: 15px
    position: relative
    &_btn  
        display: none 
        width: 30px
        height: 30px
        background-color: transparent
        border: none
        font-size: 18px  
        position: absolute
        right: 15px
        top: -50px

Вот media.sass:

@media (max-width: 480px)
	.top-nav
		&_btn
			display: block