So.. I’ve found the solutions and it’s the nav_menu in:

@media only screen and (max-width:750px){ 
.nav .nav_menu, .nav .nav-items{ 
flex-direction: column; 
}

It should be nav-menu not nav_menu, My bad.
but thanks for the answer 😀

https://ingrom.com/u/101916/media-query-class

@media screen and (max-width 600px) { display: none; }

I’m learning HTML and CSS Right now and I’m watching this tutorial: https://www.youtube.com/watch?v=CrSC1ZA9j0M&t=1956s

I follow the code but at 59:40 only my Home and Social media buttons that wont dissapear or columned under 750px width but the Category, Pages and Contact us buttons are dissapear. Social buttons dissapear at under 345px and the Home button disspear at undere 250px. Any solutions? I’m really stuck here 🙁

This is the code for my Nav in index.html and style.css:

<!--------------------------index.html code-------------------------->
<nav class="nav">
        <div class="nav-menu flex-row">
            <div class="nav-brand">
                <a href="#" class="text-gray">Marvie</a>
            </div>
            <div class="toggle-collapse">
                <div class="toggle-icons">
                    <i class="fas fa-bars"></i>
                </div>
            </div>
            <div>
                <ul class="nav-items">
                    <li class="nav-link">
                        <a href="#">Home</a>
                    </li>
                    <li class="nav-link">
                        <a href="#">Category</a>
                    </li>
                    <li class="nav-link">
                        <a href="#">Pages</a>
                    </li>
                    <li class="nav-link">
                        <a href="#">Contact Us</a>
                    </li>
                </ul>
            </div>
            <div class="social text-grey">
                <a href="#"><i class="fa-brands fa-facebook-f"></i></a>
                <a href="#"><i class="fa-brands fa-instagram-square"></i></a>
                <a href="#"><i class="fa-brands fa-twitter"></i></a>
                <a href="#"><i class="fa-brands fa-youtube"></i></a>
            </div>
        </div>
    </nav>

<!--------------------------style.css code-------------------------->

 .nav .nav-items{ 
display: flex; margin: 0; 
}

.nav .nav-items .nav-link{ 
padding: 1.6rem 1rem; 
font-size: 1.1rem; 
position: relative; 
font-family: var(--Abel); 
font-size: 1.1rem; 
}
.nav .nav-items .nav-link:hover{ 
background-color: var(--cream); 
}

.nav .nav-items .nav-link:hover a{ 
color: var(--white); 
}

.nav .social{ 
padding: 1.4rem 0; 
}

.nav .social i{ 
padding: 0 .2rem; 
}

.nav .social i:hover{ 
color:var(--text-light); 
}


@media only screen and (max-width:750px){ 
.nav .nav_menu, .nav .nav-items{ 
flex-direction: column; 
} 

.nav .toggle-collapse{ 
display: initial; 
} }

I’ve tried to move the nav-items class to the div but only Home button that appears under and above 750px width