Cómo crear una cabecera fija responsive con HTML y CSS

Поделиться
HTML-код
  • Опубликовано: 27 янв 2025

Комментарии • 857

  • @rocodev23
    @rocodev23 3 года назад +27

    Tres años tarde llegué, pero que bien explicas! Sos de los pocos que va explicando claro y sin enredarse el paso a paso de lo que vas haciendo, estoy aprendiendo CSS y el hecho de que vayas explicando cada cosa me ayuda a reforzar el conocimiento. Me suscribo 😁🖖

  • @josecmartinez4569
    @josecmartinez4569 3 года назад +6

    eres la primera persona de estos temas que explica de una manera excelente y eficas , muchas Gracias..!!!

  • @RJSPVIDEO
    @RJSPVIDEO Год назад +1

    Excelente Francisco seguí paso a paso y todo muy bien.. Gracias por tu tiempo. Excelente tutorial.

  • @onavlogd388
    @onavlogd388 3 года назад +9

    muy buen tutorial y bien explicado, quiero dar un consejo para que cuando se ponga en css margin-top: no tengas que medir donde se pone el margen si no que al dar margin-top: auto; se adapta solo a tope de la pagina. Esto lo pongo porque en el video el margin-top es de 6rem.

  • @franciscogarcia807
    @franciscogarcia807 4 года назад +1

    Estoy comenzando en esto de la creación de sitios web y tengo que agradecerte por este tutorial. El tutorial mejor explicado que he encontrado, gracias en verdad

  • @thepurpleside271
    @thepurpleside271 2 года назад +7

    Una observación, cuando hagas que la cabecera esté fija lo recomendable es poner la propiedad z-index en un número algo grande, ya que si hay otros elementos de css como carruseles se puede poner atrás de estos y no adelante, fuer de eso un excelente video, fue de mucha utilidad

    • @Kevin_Asper_Master
      @Kevin_Asper_Master Год назад +1

      Justamente este era el problema que tenía, gracias

    • @kevo5729
      @kevo5729 Год назад +1

      justo me surgió ese problema :D, tenkiu.

  • @juscein
    @juscein Год назад

    Excelente !!! Francisco eres lo máximo, la explicación paso a paso es un clase extraordinaria, funciona de maravillas.
    Muchas Gracias !!!

  • @alejandrosette4995
    @alejandrosette4995 3 года назад

    sos crack ! , te conoci por este video y ahora miro mucho tu contenido.saludos desde argentina

    • @alejandrosette4995
      @alejandrosette4995 3 года назад

      una pregunta sin compromiso de responder por que capaz es mucho laburo el que hay que meter, pero si quisiera que cuando se abra el menu ocupe todo el viewport como se haria ?

  • @nicoleperez8523
    @nicoleperez8523 3 года назад +1

    Dejame darte las gracias por este gran video y por tu tiempo para hacerlo, lo explicaste de una manera que es IMPOSIBLE no entenderlo. Me fue de muchísima ayuda.
    Saludos!

  • @fdo.eduardo1925
    @fdo.eduardo1925 4 года назад

    Hay muchos canales con tutoriales, ejemplos y ejercicios prácticos pero todos tienen su mérito y siempre se aprende algo nuevo en cada uno. Este video no fue la excepción y aprendí varias cosas nuevas al verlo. Gracias.

  • @vladek4296
    @vladek4296 2 года назад +1

    Excelente tutorial, vine por el problema del contenido que quedaba debajo del header, con esto me quedo solucionado.

  • @mei-senpai
    @mei-senpai 3 года назад +2

    Amigo, me encantó tu video, lo detallas tan bien y de una manera tan buena que se entiende paso a paso lo que estas haciendo. Muchas gracias! me sirvió de gran ayuda.

  • @lyrics-letra-
    @lyrics-letra- 4 года назад

    El mejor que he visto la verdad, me gusto mucho que explicaras todo muy sencillo y claro,
    Gracias, muchas gracias

  • @thegeomaster
    @thegeomaster 4 года назад

    Eres SECO! Con tu ayuda, logré aplicar una "ridícula" cantidad de código a la plantilla de un sitio en Wordpress para fijar la cabecera, quedando hermoso! Ahora voy a revisar el código para reducir el alto de la cabecera al hacer el scroll, y con eso pasará de hermoso a "maravilloso". Gracias inmensas, Pro!

  • @123kakano
    @123kakano 4 года назад +2

    Uhhh yo pensando que era lo mas dificil del mundo. Me hiciste aprenderlo sin ningun problema, muchisimas gracias!

  • @ramonlopez6375
    @ramonlopez6375 5 лет назад

    Estimado Francisco, quiero con estas breves palabras darte las gracias por este magnifico modo de ayudar enseñando a los demás, me ha resultado muy útil ya que como autodidacta quiero rehacer mi web personal y convertirla en 'responsive' para que la familia pueda acceder a ella desde cualquier medio. Muy agradecido recibe un cordial saludo y un fuerte abrazo desde Madrid.

  • @fabioadriandecandia6909
    @fabioadriandecandia6909 5 лет назад +1

    sinceramente super claro todo, es para considerar el curso, particularmente estoy cursando en un lugar y este video me abrio la cabeza tremendamente. Muchass gracias, probablemente cuando termine el curso me anote en este para mejorar.
    saludos

    • @FranciscoAMK
      @FranciscoAMK  5 лет назад

      Genial. Un gusto que mi contenido sea de utilidad :)

  • @buhochan
    @buhochan 6 лет назад +19

    muchas gracias, me has solucionado varios temas en un único tutorial. Se agradece muchísimo y ya tienes mi Like!

  • @AlanPereira0602
    @AlanPereira0602 2 года назад

    Llegue 4 años tarde pero me sirve muchísimo tu explicación ya que estoy haciendo un proyecto y necesitaba saber como hacer una cabecera fija y tu video me salvo ya que esta muy bien explicado y detallado. Muchas Gracias. Nuevo Sub

  • @crazzym0u5e
    @crazzym0u5e 3 года назад +1

    te encontré de de pura suerte googleando por un problema que tenía en css xD al final me di cuenta de mi error gracias a tu video c: excelente contenido, al detalle, bien visible el código y bien explicado, gracias :D me suscribí altoque xD

  • @guilllerminaponcio953
    @guilllerminaponcio953 3 года назад

    Francisco, me encanto tu video. Muy claro, lo fui haciendo con vos y quedo espectacular. Muchisimas gracias!

  •  2 года назад

    Acabo de terminal de ver tu video Francisco, excelente material y muy bien explicado, te felicito! saludos desde Cordoba, Argentina.

  • @sebastianmoyano7313
    @sebastianmoyano7313 4 года назад

    Ya vi 4 veces este video y sigue solucionando mis dudas, muchas gracias saludos de Mendoza Argentina!!

  • @nataliaclerici843
    @nataliaclerici843 8 месяцев назад

    Te adoro explicaste de una forma tan clara y concisa que entendí todo. Muchísimas gracias saludos

  • @bryanjoelmorasantana3537
    @bryanjoelmorasantana3537 2 года назад

    Te admiro, te respeto, te adoro, eres lo máximo. Muchas gracias por este muy bien explicado tutorial.

  • @erikamarino2846
    @erikamarino2846 4 года назад +4

    Amé tu forma de explicar! Muy buen tutorial

  • @davidalejandroballen4223
    @davidalejandroballen4223 3 года назад

    Muchas gracias Francisco Aguilera G me has ayudado con mi pagina y vaya que fui demasiado fácil hacerla fija Jajaja. Dios te bendiga!

  • @mauriciovillalba1065
    @mauriciovillalba1065 4 года назад

    Hola de cuarentena le dedique bastante tiempo hasta que lo entendí, y logré hacerlo, me dio bastante dolor de cabeza quise hacerle algunos cambios y me too volver al original en lo más posible pero por fin lo hice y me funcionó bien, debo hacerle algunos cambios y le envío el link. Muchas gracias muy buena explicación aunque la tuve que ver como 100 veces, pero no es culpa suya. muchos likes

    • @FranciscoAMK
      @FranciscoAMK  4 года назад

      Mauricio Villalba qué bueno que te haya resultado útil :)

  • @raulsalazarhernandez3441
    @raulsalazarhernandez3441 4 года назад +2

    buen tutorial amigo, explicas muy bien sin tanto rollo y con un lenguaje que se entiende perfectamente.

    • @FranciscoAMK
      @FranciscoAMK  4 года назад

      Gracias man :)

    • @antoniomardones9730
      @antoniomardones9730 4 года назад

      @@FranciscoAMK sii bro buenisimo vídeo, ideal para aprender lo que tenia que hacer para una actividad, quedo 10/10, el profe dijo que fue más que suficiente para lo que se necesitaba, mil gracias hrm ♥

  • @danielag5534
    @danielag5534 3 года назад +2

    help:(( no entiendo que estoy haciendo mal, no se despliega el menú al darle clic en ver, además, me dice que menú.hasClass no es una función;(

  • @tlaloc.design
    @tlaloc.design 4 года назад +4

    "Vamos a ver que barbaridad hemos conseguido con esto" jajajaj muy bueno!

    • @FranciscoAMK
      @FranciscoAMK  4 года назад +2

      A veces salen barbaridades buenas 😅

  • @misvideos9198
    @misvideos9198 3 года назад

    Excelente video, como en menos de una noche, conozco más que en 3 años. Muy buena explicación, le felicito.

  • @adrianpena6566
    @adrianpena6566 Год назад

    Hola muchas gracias por compartir.
    Me fue muy útil tu video..
    Saludos desde México!

  • @yulitzabarraza8537
    @yulitzabarraza8537 3 года назад

    señor me ha salvado la vida y ademas explica muy bien , muchas gracias por el contenido.

  • @lolamartinez5915
    @lolamartinez5915 4 года назад

    Muchisimas gracias, lo has explicado de maravilla y he disfrutado viendote programar. La de canas que me han salido intentando hacer un menu responsive otras veces. Millon de gracias. Ya tienes mi like :-)

  • @ramirezortegaalonso2840
    @ramirezortegaalonso2840 3 года назад

    Hermoso como explica y no se siente confuso, un grande este man

  • @brandonavila7628
    @brandonavila7628 4 года назад

    Me gustó como explicas todo muy sencillo y muy bien explicado, tomé un curso de html y css pero el que lo da no se explica bien y se revuelve mucho pero tu si haces buenas explicaciones así uno si aprende bien espero que subas mas videos de html5, css3 y js

  • @oscardanilol.a.9031
    @oscardanilol.a.9031 2 года назад

    Realmente esta bien explicado, sin duda es una buen forma de aprender solo siendo un autodidacta, gracias.

  • @raulsotelo3195
    @raulsotelo3195 2 года назад

    muchísimas gracias Francisco... muy claro, muy útil y muy didáctico

  • @DamarysAcostaGuette
    @DamarysAcostaGuette 5 лет назад +3

    Gracias Francisco. Dios te bendiga. Excelente video.

  • @SebaCoppola
    @SebaCoppola 3 года назад

    Sos un genio Fran!

  • @williamdiaz8307
    @williamdiaz8307 3 года назад

    Me acaba de agradar tu forma de explicar baia baia muy bien, respect

  • @kimarynuyu1818
    @kimarynuyu1818 4 года назад +1

    Gracias por enseñarme gracias a ti aprendí algo nuevo y pude entregar mi tarea a tiempo saludos desde Panamá

  • @agustinescolano2533
    @agustinescolano2533 2 года назад

    Me re sirvió, sos un tipazo, te quiero mucho bro.

  • @christianosorio9239
    @christianosorio9239 4 года назад +2

    Excelente vídeo. Entendí todo, motivado a aprender cada día más. Muchas gracias

  • @DarkdragonProYT
    @DarkdragonProYT 2 года назад

    buenas. si quiero que tenga un width the 80% y que este en el centro arriba como hago?

  • @Bartman138
    @Bartman138 4 года назад

    Muchas gracias. Eres un maestrazo. Mucho éxito con tu canal!!

  • @jcpirela65
    @jcpirela65 2 года назад

    Apenas estoy aprendiendo a usar la herramienta pero tus videos me sirven de mucho. Gracias

  • @agustinmoreno3088
    @agustinmoreno3088 3 года назад

    Sos un genio chabón, me sirvió muchísimo ya que estoy haciendo un curso de diseño web y este resumen me vino genial

  • @jexielstejeda508
    @jexielstejeda508 5 лет назад +10

    el unico tutorial que me ha servido en 2019

    • @cambiandodeportada9915
      @cambiandodeportada9915 5 лет назад

      Buenas noticias al menos

    • @juanpamontoyav
      @juanpamontoyav 5 лет назад

      Jaja pensé era yo comentando 😂😂 el 1 que veo con la misma imagen de perfil jaja.

  • @z3r0megamariox
    @z3r0megamariox 3 года назад

    puedo decir que te amo? porque me complicaba mucho para poder conseguir el mismo resultado ;;

  • @SpoonybradYT05
    @SpoonybradYT05 5 лет назад +1

    coloque un logo y una icono para el boton ver pero no resulto un resultado igual, el logo permanece en su lugar no se adapta al wrap y el boton ver no se ubica en la superior derecha

    • @FranciscoAMK
      @FranciscoAMK  5 лет назад

      Seguro hay un problema en CSS revisa los posicionamientos y los display de los elementos.

    • @SpoonybradYT05
      @SpoonybradYT05 5 лет назад

      @@FranciscoAMK en cuanto a los display están bien colocados y sus clases pero aún así no quiere ubicarse, intenté usar float y clear pero tampoco sirvió

  • @oesuite006
    @oesuite006 4 года назад

    Gracias Francisco... muy claro todo. Te mando un abrazo

  • @carlosalvert6117
    @carlosalvert6117 3 года назад

    exelente explicacionm me sir
    vió mucho enserio muchas gracias y sigue creando este tipo de contenido

  • @andersonesmithyundaguzman5955
    @andersonesmithyundaguzman5955 2 года назад

    Muchas gracias por darte el tiempo de compartir tus conocimientos, me ayudaste mucho

  • @reneegamer6599
    @reneegamer6599 4 года назад

    Me estás ayudando bastante a hacer mi proyecto de módulo de programación, muchísisimas gracias:')

  • @Ale01
    @Ale01 4 года назад

    Excelente video, bien explicado y entendible 👏👏👍👍 me sirvió de mucho y no fue a aburrido me encanto

  • @danielmarquez7811
    @danielmarquez7811 4 года назад

    tengo solo un par de palabras francisco ;genio!!!!! exelente maestro

  • @lZood
    @lZood 4 года назад +2

    Muchas gracias, quedo genial!, me inspiraste a seguir mejorando mis diseños

  • @yerefc
    @yerefc 2 года назад

    Tio me mate mas buscando como meter la extension jquery que otra cosa PERO LO LOGRE, gracias tito franci

  • @ricardoeducacion
    @ricardoeducacion 3 года назад

    O gracias, eres realmente capo, tu video me ayudo mucho a responder algunas preguntas que tenia, bueno es el tercer día de mi aprendizaje de Programación y tú me ayudaste bastante por tu contenido, bendiciones y saludos 🖖

  • @DANI-ne7wq
    @DANI-ne7wq 3 года назад

    he estado en clases en linea y la verdad mi profesor de especialidad no nos enseña casi nada es una pena que aprendamos de youtube y no por la cuenta de los profes y gracias a este video ya aprendi a hacer otra cosa mas gracias 💚

  • @jeremyangelG
    @jeremyangelG 4 года назад +3

    Se puede dar mil likes a esta joya de tutorial? Me emocione al ver que me salió exactamente igual!!! Muchas Gracias !!!

  • @1235allan
    @1235allan 3 года назад

    Bro, eres un genio compa, buen trabajo

  • @abigailmin2764
    @abigailmin2764 4 года назад +5

    Soy tan feliz, al fin me salió jaja, muchas gracias c:

  • @alexkillergamingtg3614
    @alexkillergamingtg3614 3 года назад

    Déjeme decirle que usted es un monstruo un profesional jajajaja, quedé impresionado

    • @FranciscoAMK
      @FranciscoAMK  3 года назад

      Soy un monstruo 👹

    • @alexkillergamingtg3614
      @alexkillergamingtg3614 3 года назад

      @@FranciscoAMK más que eso me encanto tu vídeo estudié mucho porque una d emos tarea es elaborar una página web pero mi teclado no tiene las teclas mayor y menor que y me toca ingresarlos por código y no puedo porque me identifica el mayor y menor que como emollis ☹️ y me tocó hacer mi página en bloc de notas y no me pudo salir bien

  • @cassany21
    @cassany21 4 года назад

    Amigo, muchas gracias por compartir tu conocimiento. Me ha sido de lo más útil. ¡Saludos!

  • @80RMG
    @80RMG Год назад

    tengo problemas con el menu.. no actua como un boton y no me funciona.
    jQuery('document').ready(function($){
    var menuBtn = $('.menu-icon'),
    menu = $('.navigation ul') ;
    menuBtn.click(function() {
    if( Menu.hasClass('show')) {
    menu.removeClass('show');

    } else {
    menu.addClass('show');
    }

    });
    });

  • @joseflorestarazona9344
    @joseflorestarazona9344 3 года назад

    me saliooo !! eres un capo, saludos desde Perú!

  • @federicodelvalle1227
    @federicodelvalle1227 2 года назад

    buenas, como hiciste el shortcut para que te abra el zen abreviattion code??

  • @luisgz1572
    @luisgz1572 5 лет назад

    Muchas gracias, muy bien explicado y facil de entender. Excelente, sigue compartiendo tus conocimientos con nosotros

  • @Andres_cali
    @Andres_cali 2 года назад

    Salu2 desde la 3ra región parsero. Que buena explicación parsero.

  • @vaquerogalactico
    @vaquerogalactico 3 года назад +1

    La verdad es que ni siquiera me interesa aprender HTML ni nada de programación, pero entré porque te veías muy buapo en la miniatura. Salu2, precioso. Bendíceme u.u

    • @FranciscoAMK
      @FranciscoAMK  3 года назад +1

      No sé cómo responder a esto [Insertar gif de travolta confundido]

  • @martianimartix9830
    @martianimartix9830 3 года назад

    espectacular cómo explicás, super like 😁😁👌👌

  • @javierantoniososaguzman9855
    @javierantoniososaguzman9855 2 года назад

    Excelente tutorial, súper explicado y súper detallado

  • @german2043
    @german2043 5 лет назад +1

    Muy bueno el tutorial, la verdad que andaba olvidado de muchas cosas.
    Tuve un problema con un error Missing "use strict" statement, usando dreamweaver.
    Lo solucione encontrando algo en un foro:
    1. Go to Preferences by pressing ctrl/Cmd+U (preferencias)
    2. Navigate to Linting category (buscar Linting, lo tengo en ingles el programa :'v)
    3. Select JS in the list box and click on "Edit & Apply Changes" (seleccionar donde dice JavaScript y luego editar..)
    4. Set "strict" to false and save the file (buscar donde dice strict y ponerle false)
    guardar el archivo (ctrl/cmd+U)
    5. Reopen the JS files (abrir de nuevo el index y quedó solucionado
    Paso el dato por si alguno más lo tuvo (lo se, usar dreamweaver.... pero ta, era lo que tenía mas a mano y ando a contra reloj xD)
    De nuevo Francisco, muchas gracias, muy bueno el tuto, felicidades. Saludos desde Uruguay.

  • @elianabethmk4027
    @elianabethmk4027 4 года назад

    Enesta temporada de cuarentena explicas mejor que mi profesor de web gracias por salvarme de tenerme que ir a recupereción virtual!!!
    psdt: muy buen video me ayudo mucho y sobretodo fácil de entender

  • @sashabianchini388
    @sashabianchini388 2 года назад

    Sos un genio, este video me ayudó banda. Graciassss

  • @carlosmarcucci3993
    @carlosmarcucci3993 4 года назад

    No mames, en mi país los que piensan que son diseñadores UI/UX nunca tocan HTML ni CSS, le tienen miedo al éxito, para nosotros desarrolladores eso no es programar, es maquetar por lo sencillo que es, me agrada este sujeto es un diseñador completo

    • @FranciscoAMK
      @FranciscoAMK  4 года назад +1

      Es que son dos cosas diferentes, una cosa es diseñar y otras es hacer desarrollo frontend. Algunos podemos hacer ambas cosas (quizás debido a los años en que empecé) pero no es requisito. A un diseñador se le debe juzgar por la calidad de sus diseños y la relación que crea con su equipo, no por si sabe o no sabe desarrollar.

  •  2 года назад

    debo estar haciendo algo mal porque al llegar a la linea siguiente,
    .navigation ul li {
    display: inline-block;
    }
    y actualizar, los items siguen uno encima del otro, vamos que no se alinean, lo he revisado todo varias veces y no doy con el problema.

  • @robertovillarreal666
    @robertovillarreal666 3 года назад

    Hola Francisco, tengo una duda, cuando coloco @media only screen and (max-width) { }, como que el css no lo reconozca al completo y por ende no lo usa, como podria solucionar tal problema.
    Gracias

  • @Mindy2812
    @Mindy2812 Год назад

    Cual es el plugin de abreviación y como se usa?

  • @MatiasLovato-MSL
    @MatiasLovato-MSL 2 года назад

    yo queria ver como solucionabas el problema de que al abrir alguna de las paginas que estarian en esos botones como harias para que se siga viendo el menu de arriba sin tener que volver a copiar y pegar lo mismo

  • @vidalsepulvedaivan
    @vidalsepulvedaivan 4 года назад

    excelente video francisco! muchas gracias, me sirvio mucho!!

  • @bryan501mx
    @bryan501mx 4 года назад

    te bajaste y te subiste tanto que no se que me ha faltado, deberías de subir los archivos finales para ahorrar tiempo. ya que te deprime eso de que ya lo hice, si no y te vuelves loco buscando. LLevo horas viendo este vídeo y me encanta lo que enseñas. Saludos

    • @FranciscoAMK
      @FranciscoAMK  4 года назад

      Esto lo hice hace tanto tiempo que ya no tengo los archivos y no me da el tiempo para hacerlos de nuevo.

  • @GregorDev
    @GregorDev 3 года назад

    francisco no se como hacer que elementor modifique una pagina ya creada por el tema si me podrias orientar te lo agradecerias

  • @juanorodrigo3654
    @juanorodrigo3654 2 года назад

    Francisco, Mi intelecto te ama. Thanks.

  • @matereal9487
    @matereal9487 3 года назад

    Muchas gracias por compartir tus conocimientos

  • @mateomino3d197
    @mateomino3d197 3 года назад +1

    tengo un problema, cuango ago el css de la cabezeta, solo me sale un pequeño cuadrado flotante y no ocupa toda la parte de arriba de mi pagina web

  • @erikpalomerareyes723
    @erikpalomerareyes723 4 года назад

    Muy buen video amigo, nuevo suscriptor.

  • @tusappsdeingresos1636
    @tusappsdeingresos1636 3 года назад

    Bueno, ya solucioné el problema de que el menú responsive aparecía desplegado, ahora como se hace para que se oculte dando clic en cualquier parte de la pantalla que no sea el menú?

    • @FranciscoAMK
      @FranciscoAMK  3 года назад

      Tienes que desarrollar una función que detecte el click afuera y que cambie la clase del menú.

  • @saulperaza1875
    @saulperaza1875 3 года назад

    no se si me podre poner en contacto con tigo para me ayudes con un problema hacerca del responsiv

  • @geovannyrios2453
    @geovannyrios2453 4 года назад

    Gracias maestro gran tutorial super claro sigue adelante eres grande

  • @gameroche
    @gameroche 3 года назад

    Aca viendo este excelente tutorial otra vez gracias aprendi mucho en este video

  • @franbx2554
    @franbx2554 3 года назад

    En vez de un padding-bottom , puede ir un Margin-top ?

  • @leidyd5414
    @leidyd5414 5 лет назад

    chico naguara me salvaste la existencia con tu video.

    • @FranciscoAMK
      @FranciscoAMK  5 лет назад

      No entendí lo de chico naguara, pero me alegra haber ayudado.

    • @leidyd5414
      @leidyd5414 5 лет назад

      @@FranciscoAMK naguara es una expresión Venezolana que se usa cuando uno está sorprendido o se desea expresar algo así: Qué genial eres o eres lo maximo, eso te dije jejeje.

    • @FranciscoAMK
      @FranciscoAMK  5 лет назад

      leidy d awww

  • @jorgemoralesn
    @jorgemoralesn 3 года назад

    superbueno tu video, me respondió varias dudas que tenía del tema

  • @dannaquinteromorelo5030
    @dannaquinteromorelo5030 8 месяцев назад

    Me encanto tu video, muy bien explicado y me sirvio mucho, pero tengo una pregunta, como abró la ventana para la abreviacion del codigo en visual estudio code?

  • @davidbrahyanlarotapilco567
    @davidbrahyanlarotapilco567 3 года назад

    2021 viendo tus videos me esta sirviendo tu manera de explicar