0

Una consulta! haber si me pueden ayudar.

Estoy trabajando en un proyecto de una página web sencilla (soy junior aun :D). En el Index para visualizar en pc cada uno de los elementos del menu llevan a una seccion especifica de la pagina (eso funciona perfectamente).

Sin embargo a la hora de querer trabajar con media query para tratar de hacer responsive la web con pantallas mas pequeñas -tablets/celulares- agregue un icono Bars para que aloje los elementos del menu y los muestre al hacer clic.

Sin embargo no se como hacer para que cuando despliega la lista en responsive me redireccione a las mismas secciones (por que simplemente no me redirecciona por arte de magia) como cuando esta en pantalla normal -PCs-.

Les comparto el codigo que he avanzado del media query.

Espero me haya explicado bien. Saludos!

@media screen and (max-width: 768px) {
  p {
    font-size: 130%;
  }
  h3 {
    font-size: 150%;
  }
  header {
    height: 80px;
    position: relative;
  }
  header #logo {
    margin: 15px 0 20px -25px;
  }

  #menu-icon {
    display: inline-block;
  }

  nav:hover ul {
    display: block;
  }

  nav ul, nav:active ul {
    display: none;
    z-index: 1000;
    position: absolute;
    padding: 20px;
    background: #f5f5f5;
    border: 1px solid #a5bdcd;
    right: 20px;
    width: 25%;
    opacity: .90;
  }
   nav li {
     text-align: center;
     width: 100%;
   <!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Bahá'ís de Nicaragua</title>
        <!--Iconos FontAwesome-->
      <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">

        <!--Slider Jquery BxSlider-->
      <link rel="stylesheet" href="https://cdn.jsdelivr.net/bxslider/4.2.12/jquery.bxslider.css">
      <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
      <script src="https://cdn.jsdelivr.net/bxslider/4.2.12/jquery.bxslider.min.js"></script>
      <link rel="stylesheet" href="css/style.css">
  </head>
  <body>
    <div id="wrapper">

   <div id="banner-wrapper">
        <header>
          <div href="#" id="header-inner">
            <a href="index.html" id="logo">
              <img src="img/pics/estrella3.jpg" alt="Logo Bahá'í">
            </a>
            <nav>
              <a href="#" id="menu-icon">
                <i class="fa fa-bars "></i>
              </a>
              <ul href="#" id="menu-lista">
                <li>
                  <a href="index.html" class="current">INICIO</a>
                </li>
                <li>
                  <a href="#skills">HABILIDADES</a>
                </li>
                <li>
                  <a href="#portfolio">PORTAFOLIO</a>
                </li>
                <li>
                  <a href="#services">SERVICIOS</a>
                </li>
                <li>
                  <a href="#contact">CONTACTO</a>
                </li>
              </ul>
            </nav>
          </div>
        </header>
        </div>

1 respuesta 1

0

El problema lo esta ocasionando esta regla:

nav ul, nav:active ul {
    display: none;
    z-index: 1000;
    position: absolute;
    padding: 20px;
    background: #f5f5f5;
    border: 1px solid #a5bdcd;
    right: 20px;
    width: 25%;
    opacity: .90;
  }

Yo la he dejado así:

 nav ul {
        display: none;
        z-index: 1000;
        position: absolute;
        padding: 20px;
        background: #f5f5f5;
        border: 1px solid #a5bdcd;
        right: 20px;
        width: 25%;
        opacity: .90;
 }

Creo que es porque la pseudo clase :active hace que cuando hagas click en la etiqueta nav la lista desaparece y eso impide que hagas click en los enlaces, piensan que los enlaces estan dentro de la etiqueta nav

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.