Create a Responsive Hamburger Menu using only HTML and CSS | Responsive Navigation Menu

แชร์
ฝัง
  • เผยแพร่เมื่อ 1 ม.ค. 2025

ความคิดเห็น • 75

  • @Lama-Code
    @Lama-Code  4 หลายเดือนก่อน

    Subscribe for more videos : www.youtube.com/@Lama-Code

  • @Chuppe_g
    @Chuppe_g ปีที่แล้ว +4

    This is one of the best videos I've watched so far bro. it's a very good one. Keep making stuff more and more greater and better. Kudos 🙌

    • @Lama-Code
      @Lama-Code  ปีที่แล้ว

      Thanks! Will do!

  • @Aminchik
    @Aminchik ปีที่แล้ว +1

    OMG, tnx my friend, definitely a subscription from a Russian speaker :)

  • @IndraNeijs
    @IndraNeijs 9 หลายเดือนก่อน +5

    The hamburger icon and the cross are not showing up. Anyone else has the same problem or knows how to fix it? Besides that, great tutorial and awesome nav bar!🤩

    • @rawafkarim4469
      @rawafkarim4469 5 หลายเดือนก่อน +1

      Fonts might not be loading sometimes if used any library

    • @antonius254
      @antonius254 3 หลายเดือนก่อน

      install fa icon dude.

  • @simbacrypto
    @simbacrypto 3 หลายเดือนก่อน

    You just got one sub right now bro! You just solve a serious problem for me with this video

    • @Lama-Code
      @Lama-Code  3 หลายเดือนก่อน

      Enjoy 😉

  • @buttercutsgolf3
    @buttercutsgolf3 9 หลายเดือนก่อน +1

    I must be missing something, when i shrink it the nav menu items are there but at the top and not centered when making a smaller screen

  • @AntLovesPlants
    @AntLovesPlants ปีที่แล้ว +2

    Great video! Thanks for providing source code I have styled it to my liking and it works perfectly for my website!

  • @dmanakell
    @dmanakell 3 หลายเดือนก่อน

    followed the steps and it worked perfectly. The only thing is that the hamburger icon and the X icon are slightly misaligned vertically, but in yours they are in the same position. I didn't change a line of code, so that's odd

  • @narcos1024
    @narcos1024 ปีที่แล้ว +1

    Was looking for a basic solution and this is perfect. Very clean. Thanks. 😎

  • @worthex_2
    @worthex_2 2 ปีที่แล้ว +1

    Can you please explain how this works? I mean...
    • What does the checker do?
    • How do these buttons open / close the menu?

    • @Lama-Code
      @Lama-Code  2 ปีที่แล้ว

      It toggles the checkbox input

  • @ipdev-c1c
    @ipdev-c1c 11 หลายเดือนก่อน

    Thank You Sir, It's realy helpful for me.❤❤❤

  • @a1ex718
    @a1ex718 ปีที่แล้ว +1

    it doesn't do anything at all when u click the buttons. Where do you start by putting text so it can appear each click?

    • @Lama-Code
      @Lama-Code  ปีที่แล้ว

      You can download the source code of this navbar from the link in the description section.

  • @hxtem6405
    @hxtem6405 2 ปีที่แล้ว

    A quick responsive would be amazing, can you do a quick tutorial on how you could link all the pages to the nav bar and burger menu

  • @lnl_alpha
    @lnl_alpha 6 หลายเดือนก่อน

    Awesome tutorial, thank you so much!

    • @Lama-Code
      @Lama-Code  6 หลายเดือนก่อน

      Enjoy 😉

  • @brianlarsson3788
    @brianlarsson3788 ปีที่แล้ว

    Great Job Just what i needed

  • @bluecollarscrooge3981
    @bluecollarscrooge3981 2 ปีที่แล้ว +1

    how would i center the menu itself after removing the image? thanks

    • @Lama-Code
      @Lama-Code  2 ปีที่แล้ว +1

      you can use flex box

    • @bluecollarscrooge3981
      @bluecollarscrooge3981 2 ปีที่แล้ว +2

      @@Lama-Code thank you very much but im kinda newbi where do i write flex-box in? also am i literally writing the words flex-box into a place in css and where thanks again!

  • @helioerfan
    @helioerfan 9 หลายเดือนก่อน

    Thanks for your useful video
    that's awesome
    😉

  • @nicolastovar3239
    @nicolastovar3239 ปีที่แล้ว

    you should talk in your videos i would like the explanation, but i love it thank u

  • @jeevankamble9791
    @jeevankamble9791 ปีที่แล้ว

    super navbar video tutorials I like it and a very helpful video for all students thanks, sir. 🤩😍😇

    • @Lama-Code
      @Lama-Code  ปีที่แล้ว

      You’re welcome ☺️

  • @antonius254
    @antonius254 9 หลายเดือนก่อน

    thanks dude very helpful :)

    • @Lama-Code
      @Lama-Code  9 หลายเดือนก่อน

      😉

    • @antonius254
      @antonius254 3 หลายเดือนก่อน

      @@Lama-CodeStupid question, but why put classes everywhere and not use the id?

  • @tonytony-fc6gq
    @tonytony-fc6gq 11 หลายเดือนก่อน

    THANK UOU VERY MUCH !!!☺☺☺

  • @yourUPlight
    @yourUPlight 4 หลายเดือนก่อน

    you saved my time. TNX

  • @chinenyeoluyede2511
    @chinenyeoluyede2511 ปีที่แล้ว

    My own menu doesn't open when I click the bars, what could I be doing wrong? I didn't use the checkboxes by the way

    • @Lama-Code
      @Lama-Code  ปีที่แล้ว

      You, can get the source code of this menu from the link in the description section and then see what missing

  • @parsaliundilashvili8091
    @parsaliundilashvili8091 2 ปีที่แล้ว +1

    Thanks for the great tutorial, I have a question: can you also make a tutorial on how to make a movie series slider, an animation like a burger menu... you know what I mean? ^_^

  • @SRAVANKUMARMAHESHWARAM
    @SRAVANKUMARMAHESHWARAM ปีที่แล้ว

    Two hamburger icons are overlapping on each other.
    How can I fix that issue?

    • @Lama-Code
      @Lama-Code  ปีที่แล้ว

      CSS z-index property will fix this for you

  • @adamhardin3678
    @adamhardin3678 ปีที่แล้ว

    How can i move the menu the link like home products contatc to the right

    • @Lama-Code
      @Lama-Code  ปีที่แล้ว

      Use flex-box for that

  • @priscillatagoe525
    @priscillatagoe525 ปีที่แล้ว

    Video on point!

  • @israelojehonmon-nf6ql
    @israelojehonmon-nf6ql ปีที่แล้ว

    pls help it not showing any list on my side is just clickable that's all

    • @Lama-Code
      @Lama-Code  ปีที่แล้ว

      Hi, you can get the source code of this side menu from the link in the description section.

  • @JamesPaulSilayan
    @JamesPaulSilayan หลายเดือนก่อน

    what kind of theme did you use

    • @Lama-Code
      @Lama-Code  หลายเดือนก่อน

      Monokai

  • @DrCrisp-gm1bv
    @DrCrisp-gm1bv 2 ปีที่แล้ว

    I've tried to follow the instructions but mine doesn't work. is it possible for me to send you my script so you can tell me what I'm doing wrong

    • @Lama-Code
      @Lama-Code  2 ปีที่แล้ว

      First try to download the source code of this project from the description section and replace images with yours and see if it works otherwise u can send me ur code on the Facebook page to see it .

  • @Md.Foysal-b8l
    @Md.Foysal-b8l 11 หลายเดือนก่อน

    Thanks Bro❤❤

    • @Lama-Code
      @Lama-Code  11 หลายเดือนก่อน

      You’re welcome 😉

  • @najafhabibov
    @najafhabibov 10 หลายเดือนก่อน

    Thank you so much!

  • @Crazyopgamerz87
    @Crazyopgamerz87 ปีที่แล้ว

    bro how can i add website name in just right side of logo .........

    • @Lama-Code
      @Lama-Code  ปีที่แล้ว

      You can put your logo and website name side by side in a wrapper like span or div and adjust that with flex box 😉

    • @Crazyopgamerz87
      @Crazyopgamerz87 ปีที่แล้ว

      @@Lama-Code thanks bro i have done 😀🤗

    • @Crazyopgamerz87
      @Crazyopgamerz87 ปีที่แล้ว

      @@Lama-Code you can make video on this that how to animate hameburger menu open menu and close menu 😉.....

  • @stephanechataignie
    @stephanechataignie ปีที่แล้ว

    Very cool method to avoid JS. But, how can we close the menu when a link is clicked ?
    Thanks

    • @Lama-Code
      @Lama-Code  ปีที่แล้ว +1

      Hi, you just need to toggle the checkbox.
      You can check if checkbox is the checked or not using the :checked CSS pseudo-class and based on that you can open or close your menu

  • @FavourIfunanya-s2o
    @FavourIfunanya-s2o ปีที่แล้ว

    nice one

  • @rastaboy6626
    @rastaboy6626 ปีที่แล้ว

    great job thx a lot

  • @ciprian5158
    @ciprian5158 ปีที่แล้ว

    not work

  • @bunniebyun7567
    @bunniebyun7567 2 ปีที่แล้ว

    Thank you so much.

  • @souadslife5012
    @souadslife5012 3 ปีที่แล้ว

    👍👍👍

  • @shahidgamingforce5416
    @shahidgamingforce5416 ปีที่แล้ว

    Thank you so much

  • @lazy-hero.
    @lazy-hero. 2 ปีที่แล้ว

    Hey where is script??

    • @Lama-Code
      @Lama-Code  2 ปีที่แล้ว

      Hi @Lazy-Hero , I didn’t use JavaScript for this hamburger 🍔 menu , only HTML & CSS.

  • @yankeesfan3961
    @yankeesfan3961 ปีที่แล้ว

    goes too fast.

    • @seniorgonzalez9291
      @seniorgonzalez9291 ปีที่แล้ว

      For real ? You can slow down the the video 😅