How to Create Responsive Navbar using HTML & CSS

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

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

  • @sparrowyt007
    @sparrowyt007 11 месяцев назад +7

    Up until now I didn't know collapsible navbars can be made without JavaScript. Learned something new today. Thanks a lot !!!

  • @sparrowyt007
    @sparrowyt007 11 месяцев назад +3

    with every passing minute, this video just keeps getting better and better !!

  • @FancyCode-Channel
    @FancyCode-Channel Год назад +8

    The power of CSS meets Arts....Beautifull....

  • @mboe94
    @mboe94 Год назад +2

    I watch a lot of these videos but don't usually comment. This video was outstanding and deserves praise. Thanks!

  • @AyseOnal-d7n
    @AyseOnal-d7n Год назад +2

    it helped me sm to understand how the responsive works for the navbar. thank you very much ^^

  • @reaganwokorach5957
    @reaganwokorach5957 Год назад +6

    Codehal! You guys are so amazing!
    I've learnt a lot just from watching you people.
    Kudos to you!

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

    Honestly one of the best tutorials i have seen for a navbar, helped me a ton

  • @5p2zunayd97
    @5p2zunayd97 Год назад +2

    Top-notch content ever seen on RUclips. 😍

  • @juanignacioillesca
    @juanignacioillesca 9 месяцев назад

    that last effect with "after" ahah GOLD, thanks for that I loved although I got lost at times.

  • @julienheng3880
    @julienheng3880 10 месяцев назад

    I didn't know you can create dropdown navbar without javascript. Thank you so much!

  • @Bebonkin
    @Bebonkin Год назад +4

    love this - Beatutiful. I would add some styling on the menu item hover though.

  • @SammerTime-o6e
    @SammerTime-o6e Месяц назад

    🔥🔥🔥🔥🔥🔥🔥🔥🔥😍😍😍😍😍😍Incredibly beautiful work

  • @nicole_macias03
    @nicole_macias03 9 месяцев назад

    Vaya! no sabes lo cuan agardecida estoy por tu video es maravilloso lindo y elegante ademas de ser animado me encanto! lo aplique en mi sitio web y quedó a la perfeccion. no sabes cuanto te lo agradezco, sos un genio!!!!!🤗🤗🤗🤗🤗

  • @agustinromeowiner9896
    @agustinromeowiner9896 10 месяцев назад

    I've been trying to find a solution to the backdrop filter only working in either the nav or the items for a long time, thank you so much!!

  • @herhos71
    @herhos71 3 месяца назад

    Great job! Congratulations!

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

    Excellent work i lot learn your website make new projets with new skills.

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

    Obrigado por esse conteúdo maravilhoso, sucesso sempre...

  • @gunavanshakd1568
    @gunavanshakd1568 24 дня назад

    just amazing!

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

    This is an amazing video. So many videos promise so much and fail to deliver; this one delivers, and MORE!! Each step is perfect and you are never at a point when what you have at home is different to that shown on screen. Great work. Thank you.

  • @ThihaAungAung-b3s
    @ThihaAungAung-b3s 11 месяцев назад +1

    Great
    😍

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

    maravilloso trabajo, espero llegar a alcanzar ese nivel de perfección... gracias por tus video

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

    Wonderful. My best navbar in 2024

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

    Holy shieeeet, its 1st class content.

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

    Beautiful work brother new subsriber.😊

  • @nobi-on-guitar
    @nobi-on-guitar Год назад

    Thank you so much.. this video helped me a lot. ❤

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

    Thank you man, I've been expecting fresh content from you 🙂💕...
    God bless you brother 😌❤

  • @Haihay_
    @Haihay_ 2 месяца назад

    Omg this what i want 😮😍

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

    Best video ,
    Using CSS hamburger menu

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

    Excellent, I hope I can write code like you.😊

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

    Thanks man, it helped.

  • @tanbirpradhan
    @tanbirpradhan Месяц назад

    Great

  • @johnfrieddy0032
    @johnfrieddy0032 7 месяцев назад

    thats perfect 🎉

  • @SnailLing-zs5tu
    @SnailLing-zs5tu 6 месяцев назад

    Thank you ❤

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

    Great ❤

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

    Thank uu soo much sirr ❤

  • @alexanderseidel1907
    @alexanderseidel1907 9 месяцев назад

    Nice Work, thx. Which Extensions do you use for the Responsible Reviews?

  • @AthylaKing
    @AthylaKing 10 месяцев назад

    I have a problem, when I want to see the page in full screen (1080 in my case) the bar options do not appear, only the logo. Now when I reduce it the menu appears and it has all the functionality.

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

    Thanks very much!!!

  • @yeremicarrion2684
    @yeremicarrion2684 9 месяцев назад

    its soo beautofull

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

    This small small projects creat hug logics how to use this and this 😳😳😳. While practicing your projects i able to do anything which i want to do thanks brother for helping me

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

    amazing, thanks for this, for ma as a beginner it helps very much!
    I have a question, to do a closing nav at mobile after I choose to go to section, how to to do it?
    And how should I get to the section that title of section is , and that title is not hide by a navbar ?

  • @ahmedghallab5342
    @ahmedghallab5342 11 месяцев назад

    شكرا Thanks it was helpful

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

    nice !!! 😍

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

    Hello, is this type of closing or opening menu while at mobilescreen is good way or it just quick explanation?

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

    helpful ❤

  • @Hiiteshhh
    @Hiiteshhh 7 месяцев назад

    THANKS BUDDY

  • @LosIngDelFuturo
    @LosIngDelFuturo Год назад +2

    Thank you for always bringing content that has personally helped me on my path to Front-end development.

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

    if you put video on the hero instead of the image that will look so cool

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

    This is so amazing

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

    Wonderful

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

    Awesome video, thanks!! What is the vscode theme that you use in this video?

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

    Thank you for your excellent contribution, new subscriber!!
    How do I hide the responsive menu, when I have already clicked on a link?

  • @nightmare003s2
    @nightmare003s2 Месяц назад

    Can it be made into a side model?

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

    I have a problem with the icon and the menu box; the icon see in the border of the box, in the right = 0 and the botton=0; but I don't not, where I can change that; and in the menu box, all the menus has a box in black opacity

  • @Sriraam_2k3
    @Sriraam_2k3 10 месяцев назад

    How to crop this width, I mean you just adjusting the frame edges how to do that.... 0:25

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

    I've made a mistake somewhere. When I changed the body to a div container, the menu button isn't working anymore. And when I change it back to body, everything is ruined 😭

  • @samdesmedt24
    @samdesmedt24 9 месяцев назад

    What is that program called that makes you see the width and height ?

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

    i have a problem why If I make the page bigger elements wont go back to normal position ?

  • @estefaniasalazar3545
    @estefaniasalazar3545 11 месяцев назад +1

    When I click a link the input disappear how can I fix this?

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

    Use just header instead of .header class on css, just a tip :)

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

      why? I didn't know which one to use but figured people use it for specificity, 10 for a class and 1 this, any advice would be appreciated, thanks!

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

      Why? interested for the answer as well

  • @mertavlamaz6708
    @mertavlamaz6708 5 месяцев назад

    Where did you find back ground image

  • @CS_HimanshuVishwakarma
    @CS_HimanshuVishwakarma Год назад +17

    Nice but didn't understand

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

    I'm having problems with the image, I downloaded it, putted it in the same folder as this navbar but still not showing as it is in the video. The browser keeps staying white, someone can help me?

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

      agregale. background: url("../ y coloca la carpeta donde esta la imagen

  • @heffe-gq6sv
    @heffe-gq6sv Год назад

    merci!!!

  • @sumyatyadanar-h3y
    @sumyatyadanar-h3y Год назад

    Thanks millions tr

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

    Great video! Helped me understand alot, quick question though ive tried to add text over the top but it doesnt seem to budge from underneath the picture in the top right. How would you do this? Planning to have a header and paragraph middle of the page (as a home page welcome) Thanks!

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

    Ficou responsivo, mas infelizmente quando coloco para o formato grande tipo computador, ele nao volta o menu fica tipo em coluna. tentei de tudo e não consegui, mas obrigado pela experiencia, ja vi que responsivo não vai ser facil pra mim.

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

    It's amazing but the menu goes on my text how can I fix this?

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

    ❤️

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

    This is cool... thanks. I am having a problem with the height of the navbar changing between the two states. In your video, the navbar height seems to be fixed, but for me. the navbar becomes shorter when the hamburger icon is showed. This causes my logo (an image, not text) to be hard to size. I'd like to either have a fixed height for the navbar or dynamically resize the logo (not sure how to do that).
    EDIT: I was able to deal with it by changing the padding in the .logo CSS. Not sure why the stock settings caused the navbar to change height though...

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

      Did You
      practiced it??

    • @lockedarren
      @lockedarren 11 месяцев назад

      I think you may have missed the part where they added "position: absolute;" to the ".icons" class in the main CSS (not the breakpoint section). I noticed the same thing! It's at 6:18 in the video.

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

    how to make the header not fixed?

  • @alirıza-r3k
    @alirıza-r3k Год назад

    hello bro. all style code needed. uploaded pls?

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

    I need that intro music

  • @AHMDMOHY-k5l
    @AHMDMOHY-k5l 10 месяцев назад

    backdrop-filter not working

  • @Arcturuc
    @Arcturuc 4 месяца назад

    bro if you do that projects free may be many people watch and sub you. it is my idea pls

  • @ahijados8667
    @ahijados8667 9 месяцев назад

    Te la lacto

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

    MERCI SEN221

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

    MERCI sn221