Skip to main content

Una consulta! haber si me pueden ayuadarayudar. 

Estoy trabajando en un proyecto de una paginapá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

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

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

Espero me haya explicado bien. Saludos!

Una consulta! haber si me pueden ayuadar. Estoy trabajando en un proyecto de una pagina 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!

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!

Origen Enlace

¿trabajar con el icono bars para que funcione el list en modo responsive?

Una consulta! haber si me pueden ayuadar. Estoy trabajando en un proyecto de una pagina 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>