1

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

2 respuestas 2

3

La respuesta rapida a tu pregunta es el display: none que tienes para .nav-list

pero tienes varias cosas en tu HTML que se podrian mejorar. Por ejemplo podrias remover los z-index y otros atributos innecesarios (en este caso puedes deshacerte de los class de todos los links), revisa bien los vinculos. En ves de usar style para hacer cambios de estilos usa mas bien el stylesheet.

Suerte y te recomiendo que estudies un poco mas HTML/CSS - sino vas a seguir encontrando problemas de este estilo. Tienes bastante material en https://www.w3schools.com/html/

1
  • Muchas gracias, es cierto, en cuanto quito el display: none, ya funcionan. El problema es que ya no se oculta el menu. ¿Cómo podría hacer para que se ocultase y funcionasen los links? Y muchas gracias por el consejo, de hecho esto lo estoy haciendo para aprender. Puliré un poco código con lo que me has dicho.
    – Mar
    Commented el 28 nov. 2022 a las 16:55
1

Listo ya lo he conseguido arreglar, aunque es un arreglo un poco chapuza pero hasta que encuentre algo mejor creo que es buena opción.

Debajo de

.nav-list {
  display: none;
}

.nav-list:hover,
.nav-list:active {
  display: block;
  position: fixed;
  right: 0;
}

Y con eso ya funcionan bien los links y conserva más o menos el formato que quería.

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.