Estoy haciendo un menu con nav-bar (menu hamburguesa) que funciona perfectamente en modo pantalla grande pero al visualizarlo. En el momento de poner la web en modo pantalla móvil los link del menu no funcionan, no responden a la referencia, ni a los id ni a los link donde debe redirigir. He intentado arreglarlo con z-index pero no hay manera con eso. ¿Alguna solución? Muchas gracias de antemano.
Es posible que en el css y el html haya cosas que no hagan mucho pero era ensayo y error todo el rato y ya no se que borrar. En cuanto a la función principal de los enlaces es redirigir a varios id para una landing page. He metido un link para que se viera que no están funcionando los links en modo móvil, solo por eso.
@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@900&display=swap');
@import url("Untitled-1.css");
* {
box-sizing: border-box;
}
body,
html {
width: 100%;
height: 100%;
background: #ddd;
font-family: 'Montserrat', sans-serif;
scroll-behavior: smooth;
}
img {
position: relative;
}
div.div {
position: absolute;
}
.div {
font-family: 'Montserrat', sans-serif;
font-size: 50px;
font-weight: 600;
text-align: center;
}
.text1 {
text-shadow: black 0.1em 0.1em 0.1em
}
@media only screen and (min-width: 50px) and (max-width: 1400px) {
.main {
width: 300%!important;
}
}
@media only screen and (min-width: 1000px) and (max-width: 1400px) {
.div {
font-family: 'Montserrat', sans-serif;
font-size: 40px!important;
font-weight: 600;
text-align: center;
padding-left: 20%!important;
box-shadow: 0 0 4px rgb(0 0 0 / 40%);
}
}
@media only screen and (min-width: 50px) and (max-width: 1000px) {
.div {
font-family: 'Montserrat', sans-serif;
font-size: 25px!important;
font-weight: 600;
text-align: center;
padding-left: 40%!important;
box-shadow: 0 0 4px rgb(0 0 0 / 40%);
}
}
/*star header*/
/* universal styling*/
html {
height: 100%;
}
body {
min-height: 2000px;
}
header {
position: fixed;
top: 0;
left: 0;
right: 0;
width: 100%;
z-index: 10;
background: rgba(255, 255, 255, 0.70);
color: #004F9F
}
header a {
text-decoration: none;
color: inherit;
display: inline-block;
min-width: 45px;
height: 45px;
line-height: 45px;
text-align: center;
font-weight: 500;
}
.submenu {
background-color: rgba(255, 255, 255, 0.47)
}
.mail {
display: inline-block;
border: 2px solid transparent;
letter-spacing: 0.5px;
text-transform: uppercase;
width: 100%!important;
font-family: 'Montserrat', sans-serif;
font-weight: 600;
transition-duration: 0.3s;
transition-timing-function: ease-in-out;
background: #ffffff;
border-color: #ffffff;
color: black;
border-radius: 50px;
padding: 0px 23px 0px 23px!important;
font-size: 9px;
line-height: 0px;
margin-top: 7px;
text-align: center;
white-space: nowrap;
vertical-align: middle;
cursor: pointer;
user-select: none;
box-shadow: 0 0 4px rgb(0 0 0 / 40%);
box-sizing: border-box;
}
.mail:hover {
background-color: transparent;
color: #555555;
}
header a:hover {
font-weight: 900;
}
.logo {
float: left;
padding: 0 10px;
}
.logo span {
text-transform: uppercase;
line-height: 35px;
vertical-align: middle;
height: 30px;
margin-top: 0px;
font-size: 4vw;
position: absolute;
top: 0;
left: 100px;
right: 0;
bottom: 3px;
margin: auto;
color: black;
font-weight: 600;
letter-spacing: 1px;
}
.logo span:hover {
color: #525252;
font-weight: 400;
}
header.nav-bar img {
height: 30px;
width: auto;
padding: 0px;
vertical-align: middle;
}
nav {
float: right;
padding-right: 10px;
text-align: center;
}
nav ul {
list-style: none;
}
/* body styling*/
#top {
position: relative;
margin-top: 50px;
}
/* mobile styling*/
.nav-list {
display: none;
}
.nav-icon {
font-size: 35px!important;
display: inline-block;
border: 2px solid transparent;
letter-spacing: 0.5px;
text-transform: uppercase;
width: 100%!important;
font-family: 'Montserrat', sans-serif;
font-weight: 600;
transition-duration: 0.3s;
transition-timing-function: ease-in-out;
background: #ffffff;
border-color: #ffffff;
color: #004F9F;
border-radius: 50px;
padding: 0px 23px 0px 23px!important;
line-height: 0px;
margin-top: 0px;
text-align: center;
white-space: nowrap;
vertical-align: middle;
cursor: pointer;
user-select: none;
box-shadow: 0 0 4px rgb(0 0 0 / 40%);
box-sizing: border-box;
}
.nav-icon:hover {
background-color: transparent;
color: #525252;
}
.menu-icon {
padding: 0 10px;
z-index: 2000;
}
.inicio {
z-index: -1
}
/* mobile w/ active menu styling*/
.menu-icon:active,
.menu-icon:focus {
background: #143577;
z-index: 2000;
}
.menu-icon:active+ul,
.menu-icon:focus+ul {
display: block;
position: absolute;
border-top: #143577 solid 2px;
background: rgba(255, 255, 255, 0.29);
right: 10px;
text-align: center;
width: 50%;
padding: 0;
}
.menu-icon:active+ul li,
.menu-icon:focus+ul li {
text-align: center;
display: block;
width: 100%;
float: left;
}
.menu-icon:active+ul li a,
.menu-icon:focus+ul li a {
display: inline-block;
position: relative;
width: 100%;
}
.nav-list li a.mail {
width: auto;
height: 35px;
line-height: 30px;
vertical-align: bottom;
z-index: 2000;
}
/* full screen styling w/ media query */
@media only screen and (min-width: 1066px) {
.menu-icon {
display: none;
}
header.nav-bar img {
height: 50px!important;
width: auto;
padding: 0px;
vertical-align: middle;
}
.nav-list {
display: inline-block;
position: relative;
margin: 0;
padding: 0;
}
.nav-list li {
float: left;
min-width: 50px;
width: auto;
text-align: center;
height: 45px;
margin: 0;
padding: 0;
}
.nav-list li a {
width: 4rem;
line-height: 50px;
}
.nav-list li a.mail {
width: auto;
height: 35px;
line-height: 35px;
vertical-align: bottom
}
.logo span {
text-transform: uppercase;
line-height: 35px;
vertical-align: middle;
height: 30px;
margin-top: 0px;
font-size: 25px;
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 1px;
margin: auto;
}
.submenu {
background-color: transparent!important;
color: black;
font-weight: 600;
letter-spacing: 1px;
}
.submenu:hover {
color: #525252;
font-weight: 400;
}
}
<!--start header-->
<div style="position: fixed; z-index: 1000">
<header class="nav-bar">
<a class="logo" href="https://saturnalia-show.com/"><img src="imagen.png"></img>
</a><a style="z-index: -1;" class="logo" href="#inicio"><span style="z-index: -1; width: 2%; margin-right: 5px">BODAS</span></a>
<header class="nav-bar">
<a class="logo" href="https://ejemplo.com/"><img src="ejmplo.png"></img>
</a><a style="z-index: -1;" class="logo" href="#inicio"><span style="z-index: -1; width: 2%; ">BODAS</span></a>
<nav class="navigation" role="navigation"><a class="menu-icon" href="#0"><i class="nav-icon fa fa-navicon"></i></a>
<ul class="nav-list" style="font-size: 12px; color: black">
<li><a class="submenu" href="#comentarios" style="margin: 0 20px 0 0">OPINIONES</a></li>
<li><a class="submenu" href="#ideas">IDEAS</a></li>
<li><a class="submenu" href="https://www.web.com/" style="padding-right: 15px">WEBS</a></li>
<li><a class="submenu" href="www.ejemplo.com" style="padding-right: 15px">EJEMPLO</a></li>
<li><a class="mail" href="#contacto">[email protected] <i class="fa fa-envelope"></i></a></li>
</ul>
</nav>
</header>
</div>
<!--end header-->