menú receptivo que no se muestra

Quiero mostrar los elementos del menú como filas separadas en una pantalla más pequeña. Esto es bastante básico y se ve en muchos lugares. El efecto que estoy buscando es:

enter image description here

Con lo que tengo hasta ahora (código a continuación) los elementos del menú solo aparecen al lado del logotipo (así es como están allí para el escritorio).

También necesito agregar una imagen de fondo a los elementos de los menús. Una imagen que llena toda el área y no la misma imagen que se repite para cada menú

Ya he agregado:

 

Aquí está mi violín

 //make the topnav responsive for mobile screens function topNav() { var x = document.getElementById("myTopnav"); if (x.className === "myTopnav") { x.className += " responsive"; } else { x.className = "myTopnav"; } } 
 .topnav { background-repeat:no-repeat; background-size:cover; overflow:visible; width: 100%; padding-bottom: 0px; } .topnav nav{ padding-top: 5px; padding-bottom: 8px; background: -webkit-linear-gradient(left, transparent, black, black, transparent); /* For Safari 5.1 to 6.0 */ background: -o-linear-gradient(left, transparent, black,black, transparent); /* For Opera 11.1 to 12.0 */ background: -moz-linear-gradient(left, transparent, black,black, transparent); /* For Fx 3.6 to 15 */ background: linear-gradient(to right, transparent, black, black, transparent); /* Standard syntax (must be last) */ width:100%; } .topnav nav div{ width: 85%; margin-left: 7.5%; margin-right: 7.5% ; display:flex; align-items: center; justify-content: center; } .link { color: white; text-decoration: none; font-size: 11px; font-weight: 700; /* this is futura heavy*/ width:11.25%; letter-spacing: 2px; word-wrap:true; display:inline-block; vertical-align: top; text-align: center; /*line-height: 5em;*/ } .notlink { width:30.4%; margin-left: 1%; margin-right: 1%; display: inline-block; } .notlink img { width: 100%; } .topnav nav .link:hover { color: #008ed2; } .icon { display: none; font-size: 32px; color: white; text-decoration: none; text-align: center; line-height: 40px; min-width: 40px; min-height: 40px; } /* When the screen is less than 600 pixels wide, hide all links, except for the first one ("Home"). Show the link that contains should open and close the topnav (.icon) */ @media only screen and (max-width: 767px) { .myTopnav a.link {display: none;} .topnav nav div{ width: 100%; margin-left: 0; margin-right: 0; position: relative; top: 0; left: 0; } .icon { display :inline-block; position : absolute; right : 0; } .notlink { width: 70%; display : flex; align-items: center; justify-content : center; } .notlink img { max-width:100%; max-height:75px; width: auto; height: auto; } } @media screen and (max-width: 767px) { .myTopnav.responsive {position: relative;} .myTopnav.responsive .icon { position: absolute; right: 0; top: 0; } .myTopnav.responsive a { float: none; display: block; text-align: left; } } 
  

Aquí mi solución (cambio de marcado, js y css):

HTML:

  

JS:

 function topNav() { var topNav = document.querySelector('.topnav'); topNav.dataset.mobile = (topNav.dataset.mobile == "false") ? true : false; } 

CSS:

 html, body { height : 100%; margin : 0; padding : 0; background-color : white; } .topnav { overflow:hidden; width: 100%; padding-bottom: 0px; } .topnav nav:first-of-type{ padding-top: 5px; padding-bottom: 8px; background: -webkit-linear-gradient(left, transparent, black, black, transparent); /* For Safari 5.1 to 6.0 */ background: -o-linear-gradient(left, transparent, black,black, transparent); /* For Opera 11.1 to 12.0 */ background: -moz-linear-gradient(left, transparent, black,black, transparent); /* For Fx 3.6 to 15 */ background: linear-gradient(to right, transparent, black, black, transparent); /* Standard syntax (must be last) */ width:100%; } .topnav .myTopnav{ width: 85%; margin-left: 7.5%; margin-right: 7.5% ; display:flex; align-items: center; justify-content: center; } .link { color: white; text-decoration: none; font-size: 11px; font-weight: 700; /* this is futura heavy*/ width:11.25%; letter-spacing: 2px; word-wrap:true; display:inline-block; vertical-align: top; text-align: center; /*line-height: 5em;*/ } .notlink { width:30.4%; margin-left: 1%; margin-right: 1%; display: inline-block; } .notlink img { width: 100%; } .topnav nav .link:hover { color: #008ed2; } .icon { display: none; font-size: 32px; color: white; text-decoration: none; text-align: center; line-height: 40px; min-width: 40px; min-height: 40px; } #mobile-menu { width : 100%; height : 100%; padding : 20px; background: url(https://pbs.twimg.com/profile_images/638771889339404289/h64dZ4wh_400x400.png) no-repeat center center fixed; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover; display: flex; flex-direction: column; /*justify-content: center; --> add this to center vertically*/ align-items: center; box-sizing : border-box; } #mobile-menu > * { color : black; } .topnav[data-mobile=false] #mobile-menu { display : none; } @media only screen and (max-width: 767px) { .myTopnav a.link { display: none; } .topnav[data-mobile=true]{ height : 100%; } .topnav nav div{ width: 100%; height : 100%; margin-left: 0; margin-right: 0; position: relative; top: 0; left: 0; } .icon { display :inline-block; position : absolute; right : 0; } .notlink { width: 70%; display : flex; align-items: center; justify-content : center; } .notlink img { max-width:100%; max-height:75px; width: auto; height: auto; } } 

Después de esto, debe colocarlo correctamente sobre su siguiente contenido cuando se expande el menú móvil.

violín

Aquí está el violín

Debe agregar flex-direction:column Flex flex-direction:column para barra superior para mostrarla como columna para dispositivos móviles.

  .topnav nav div{ flex-direction:column; } .myTopnav.responsive a.link:first-child{ margin-top:30px; } .myTopnav.responsive a.link{ width : 100%; } .myTopnav.responsive a.notlink{ width: 70%; position: absolute; top: 0px; text-align: center; }