Hola, tenemos la solución a lo que necesitas, has scroll y la verás aquí.
Ejemplo 1: navegación receptiva css
#header
position:fixed;
z-index:1000;
left:0;
top:0;
width:100vw;
height:auto;
#header .header
min-height:8vh;
background-color: rgba(0,0,0,0.3);
#header .nav-bar
display:flex;
align-items:center;
justify-content:space-between;
width:100%;
height:100%;
max-width:1300px;
padding:0 10px;
#header .nav-list ul
list-style:none;
position:absolute;
background-color:rgb(31,30,30);
width:100vw;
height:100vh;
left:0;
top:0;
display:flex;
flex-direction:column;
justify-content:center;
align-items:center;
z-index:1;
overflow-x:hidden;
#header .nav-list ul a
font-size:2.5rem;
font-weight:500;
letter-spacing: .2rem;
text-decoration:none;
color:white;
text-transform:uppercase;
padding:20px;
display:block;
Ejemplo 2: menú css receptivo
DOCTYPEhtml><html><head><metaname="viewport"content="width=device-width, initial-scale=1"><linkrel="stylesheet"href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"><style>bodymargin:0;font-family: Arial, Helvetica, sans-serif;.topnavoverflow: hidden;background-color:#333;.topnav afloat: left;display: block;color:#f2f2f2;text-align: center;padding:14px16px;text-decoration: none;font-size:17px;.topnav a:hoverbackground-color:#ddd;color:black;.topnav a.activebackground-color:#4CAF50;color:white;.topnav.icondisplay: none;@media screen and(max-width:600px).topnav a:not(:first-child)display: none;.topnav a.iconfloat: right;display: block;@media screen and(max-width:600px).topnav.responsiveposition: relative;.topnav.responsive.iconposition: absolute;right:0;top:0;.topnav.responsive afloat: none;display: block;text-align: left;style>head><body><divclass="topnav"id="myTopnav"><ahref="#home"class="active">Homea><ahref="#news">Newsa><ahref="#contact">Contacta><ahref="#about">Abouta><ahref="javascript:void(0);"class="icon"onclick="myFunction()"><iclass="fa fa-bars">i>a>div><divstyle="padding-left:16px"><h2>Responsive Topnav Exampleh2><p>Resize the browser window to see how it works.p>div><script>functionmyFunction()var x =document.getElementById("myTopnav");if(x.className==="topnav")
x.className+=" responsive";else
x.className="topnav";script>body>html>valoraciones y comentarios
¡Haz clic para puntuar esta entrada!
(Votos: 0 Promedio: 0)