Menu Navbar responsive parte II

Clase 19 de 32 • Curso de Responsive Design 2015

Miguel Mendoza Molina

student•

La solucion para el problema del menu se encuentra en cambiar el los valores del padding en esta linea de codigo

 &-item  
        a  
          text-decoration none  
          color $white  
          /*Utilidad de bordes para ver espaciado             
          border 1 px solid red */  
          width 100%  
          /* Aqui esta el valor necesario que cambiar*/  
          padding 0 1em  
          display block

Erick Orlando Velasco Martínez

student•

Perfecto! Me funcionó

Luis Alvarez Almeida

student•

Excelente, Ya tengo mi primera Custom barra responsive.

Erick Orlando Velasco Martínez

student•

Yo tambien!!

Michel Ayala Galvan

student•

En lugar de utilizar

document.getElementById('navbarMenu');

Podrías utilizar

document.querySelector('#navbarMenu');

Fabio Rojas

student•

para el enredo del centrado vertical del hack mencionado con vertical-align ya que estamos usando magia negra( flex) se hubiera utilizado align-items center.

Esteban Figueroa

student•

si es lo que yo utilice "falling in love with flexbox" :3

Alfonso Hernández Montoya

student•

chicos como puedo acceder desde mi celular a la aplicacion estoy en la misma red de wifi Gracias Saludos

Ángela Pulido

student•

Accede con tu ip o con http://localhost:8080

Alejandro Irimia Mesa

student•

Si accedes desde tu equipo (el mismo que corre el servidor) a través de la URL:

Si accedes desde otro dispositivo (tablet ó smartphone) y quiere comprobar los avances:

J Alexander AsTaiza

student•

<script src="//code.jquery.com/jquery-1.12.0.min.js"></script>

    <script type="text/javascript">

        $(document).ready(function(){

            $('#btn_menu').click(function(){

                $('#navbarMenu').toggleClass('header-menu-list--show')

});

});

    </script>

Julian

student•

En el javascript cuando accedo a los elementos con document.getElementById('btnMenu') o una opcion que esta en los comentarios document.querySelector('#navbarMenu'); las variables a las que les estoy asignando el valor no esta obteniendo informacion y llega null, que puede estar sucediendo?

Julian

student•

Ya vi que es, tenia el javascript al comienzo de la pagina y no al final, ahora lo que me pasa es que le doy click y se entra a la funcion onClickMenu, y vuelve y carga el javascript de fuction() donde esta contenido todo asi que vuelve a desparecer la barra, porque puede ser esto? que ingrese dos veces al javascript

Juan Carlos Quevedo Moran

student•

al final creo que solo era necesario un line-height a los items del menu.

Fabio Rojas

student•

si no estoy mal si usas line-height solo permananece tu texto como area clickiable y con padding todo el area se vuelve clickiable.

Jose Pabon

student•

Estoy probando desde mi celular (Moto G) y solo me lo muestra "mobile" cuando coloco @media (min-width: 981px) en adelante. Agradecería su ayuda, pues se supone deberia ser desde 768px

Alejandro Irimia Mesa

student•

Aunque aún no la ha puesto en este vídeo, si estás haciendo pruebas desde el móvil incluye la meta etiqueta para el responsive en el <head> del HTML.

<meta name="viewport" content="width=device-width,initial-scale=1">

Así te debería ya funcionar correctamente.

Christopher Guzman Reyes

student•

A alguien mas le pasa que al expandir la pantalla los objetos no se ven o no aparecen en forma de inline-block?

Álvaro René Sánchez Serrano

student•

Cual es la diferencia entre

(function(){  
  
}());

$(document).ready(function(){  
});

Eduardo de Mei

student•

En la segunda estas usando Jquery

Christopher Guzman Reyes

student•

Ya revise mi index y mi styl, incluso descargue e hize copy paste de los archivos en ambas hojas y sigo con el mismo problema, el menu al hacer mas grande el viewport no se desplega.

J Alexander AsTaiza

student•

Para los que les interese el codigo pero con Jquey

    </script>

Menu Navbar responsive parte II

Bienvenidos

Nuevas clases de Responsive Design: ¿Dónde quedo el curso anterior?

¿Dónde encuentro los archivos del curso?

Introducción a responsive design

Preguntas antes de la clase

¿Qué es Responsive Design?

Concepto de Viewport

Patrones de Diseño Responsive: Tiny Tweaks

Progressive Enhancement vs Graceful Degradation

Column Drop

Mostly Fluid

Layout Shifter

Off-Canvas

Preguntas y respuestas después de clase

Diseñando en Mobile First

Preguntas antes de la clase

Entorno de desarrollo

Automatización de tareas con Gulp.js

Index.html del proyecto

Normalize.css

Menu Navbar responsive parte I

Menu Navbar responsive parte II

Videos reponsive

Preguntas y respuesta de la clase

Conceptos avanzados de responsive design

Preguntas antes de clase

Video responsive

Patrones de diseño responsivo

Imagenes responsive

Fuentes de iconos

Usando Browserify para JavaScript

Optimizando para produccion

Preguntas y respuestas en clase

Contenido complementario

Tablas-Responsive

Lazy Loading De Imagenes

¿Cómo hacer Remote Debuggin?