How do I column my navigation for a certain screen size?-CodePudding

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 >
        <div >
            <div >
                <a href="#" >Marvie</a>
            </div>
            <div >
                <div >
                    <i ></i>
                </div>
            </div>
            <div>
                <ul >
                    <li >
                        <a href="#">Home</a>
                    </li>
                    <li >
                        <a href="#">Category</a>
                    </li>
                    <li >
                        <a href="#">Pages</a>
                    </li>
                    <li >
                        <a href="#">Contact Us</a>
                    </li>
                </ul>
            </div>
            <div >
                <a href="#"><i ></i></a>
                <a href="#"><i ></i></a>
                <a href="#"><i ></i></a>
                <a href="#"><i ></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

CodePudding user response：

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 :D

CodePudding user response：

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

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