How to Create Responsive Navbar using HTML & CSS

Поділитися
Вставка
  • Опубліковано 27 лис 2024

КОМЕНТАРІ • 89

  • @sparrowyt007
    @sparrowyt007 9 місяців тому +6

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

  • @sparrowyt007
    @sparrowyt007 9 місяців тому +2

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

  • @mboe94
    @mboe94 Рік тому +2

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

  • @TheTeamuscle
    @TheTeamuscle 6 місяців тому

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

  • @reaganwokorach5957
    @reaganwokorach5957 Рік тому +6

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

  • @FancyCode-Channel
    @FancyCode-Channel Рік тому +8

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

  • @5p2zunayd97
    @5p2zunayd97 Рік тому +2

    Top-notch content ever seen on UA-cam. 😍

  • @AyseOnal-d7n
    @AyseOnal-d7n 10 місяців тому +1

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

  • @juanignacioillesca3978
    @juanignacioillesca3978 8 місяців тому

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

  • @nicole_macias03
    @nicole_macias03 7 місяців тому

    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!!!!!🤗🤗🤗🤗🤗

  • @julienheng3880
    @julienheng3880 9 місяців тому

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

  • @agustinromeowiner9896
    @agustinromeowiner9896 8 місяців тому

    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!!

  • @diegosimancas2911
    @diegosimancas2911 11 місяців тому

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

  • @Bebonkin
    @Bebonkin Рік тому +4

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

  • @zainabshakoor9458
    @zainabshakoor9458 Рік тому

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

  • @tanbirpradhan
    @tanbirpradhan 6 днів тому

    Great

  • @nobi-on-guitar
    @nobi-on-guitar Рік тому

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

  • @onciaq
    @onciaq Рік тому

    Holy shieeeet, its 1st class content.

  • @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

  • @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.

  • @swapniladkine2135
    @swapniladkine2135 Рік тому

    Beautiful work brother new subsriber.😊

  • @jkspeaks9069
    @jkspeaks9069 Рік тому +1

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

  • @mauricioreguete466
    @mauricioreguete466 6 місяців тому

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

  • @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 ?

  • @herhos71
    @herhos71 Місяць тому

    Great job! Congratulations!

  • @ufukbosnali492
    @ufukbosnali492 Рік тому

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

  • @Theakashganga9305
    @Theakashganga9305 Рік тому

    Thank uu soo much sirr ❤

  • @bilalpathan919
    @bilalpathan919 Рік тому

    Thanks man, it helped.

  • @rustygamer8419
    @rustygamer8419 Рік тому +1

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

  • @AthylaKing
    @AthylaKing 9 місяців тому

    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.

  • @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?

  • @namessis
    @namessis 11 місяців тому

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

  • @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 10 місяців тому

      Why? interested for the answer as well

  • @agustinpena2752
    @agustinpena2752 Рік тому

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

  • @kakoozaxenyondo00
    @kakoozaxenyondo00 10 місяців тому

    Wonderful. My best navbar in 2024

  • @ThihaAungAung-b3s
    @ThihaAungAung-b3s 10 місяців тому +1

    Great
    😍

  • @Haihay_
    @Haihay_ Місяць тому

    Omg this what i want 😮😍

  • @johnfrieddy0032
    @johnfrieddy0032 5 місяців тому

    thats perfect 🎉

  • @LosIngDelFuturo
    @LosIngDelFuturo Рік тому +2

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

  • @sophietc10
    @sophietc10 7 місяців тому

    Thanks very much!!!

  • @ankursrvsrivastava8439
    @ankursrvsrivastava8439 Рік тому

    Best video ,
    Using CSS hamburger menu

  • @SnailLing-zs5tu
    @SnailLing-zs5tu 5 місяців тому

    Thank you ❤

  • @alexanderseidel1907
    @alexanderseidel1907 7 місяців тому

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

  • @yeremicarrion2684
    @yeremicarrion2684 8 місяців тому

    its soo beautofull

  • @SimohmdSawi
    @SimohmdSawi Рік тому

    Great ❤

  • @Hiiteshhh
    @Hiiteshhh 6 місяців тому

    THANKS BUDDY

  • @heffe-gq6sv
    @heffe-gq6sv Рік тому

    merci!!!

  • @nightmare003s2
    @nightmare003s2 4 дні тому

    Can it be made into a side model?

  • @jhonathandomingos4566
    @jhonathandomingos4566 11 місяців тому

    nice !!! 😍

  • @RayTrades-t2l
    @RayTrades-t2l 10 місяців тому

    This is so amazing

  • @ahmedghallab5342
    @ahmedghallab5342 9 місяців тому

    شكرا Thanks it was helpful

  • @dhiren_23
    @dhiren_23 11 місяців тому

    helpful ❤

  • @JonnakutiKiranBabuBVCE
    @JonnakutiKiranBabuBVCE Рік тому

    Wonderful

  • @edvisualdesign
    @edvisualdesign 11 місяців тому

    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

  • @jerinsujith4404
    @jerinsujith4404 Рік тому +1

    ❤️

  • @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 😭

  • @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.

  • @samdesmedt24
    @samdesmedt24 8 місяців тому

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

  • @CS_HimanshuVishwakarma
    @CS_HimanshuVishwakarma Рік тому +17

    Nice but didn't understand

  • @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!

  • @estefaniasalazar3545
    @estefaniasalazar3545 9 місяців тому +1

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

  • @sumyatyadanar-h3y
    @sumyatyadanar-h3y 10 місяців тому

    Thanks millions tr

  • @mrseroth
    @mrseroth 10 місяців тому

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

  • @Sriraam_2k3
    @Sriraam_2k3 8 місяців тому

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

  • @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 11 місяців тому

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

  • @mertavlamaz6708
    @mertavlamaz6708 3 місяці тому

    Where did you find back ground image

  • @P1EPICE
    @P1EPICE 11 місяців тому

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

  • @alirıza-r3k
    @alirıza-r3k 10 місяців тому

    hello bro. all style code needed. uploaded pls?

  • @prakharpandey7745
    @prakharpandey7745 6 місяців тому

    I need that intro music

  • @janka_x
    @janka_x 10 місяців тому

    how to make the header not fixed?

  • @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 9 місяців тому

      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.

  • @AHMDMOHY-k5l
    @AHMDMOHY-k5l 9 місяців тому

    backdrop-filter not working

  • @ahijados8667
    @ahijados8667 7 місяців тому

    Te la lacto

  • @Arcturuc
    @Arcturuc 3 місяці тому

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

  • @ThiernooumaribaSall
    @ThiernooumaribaSall 6 місяців тому

    MERCI SEN221

  • @ThiernooumaribaSall
    @ThiernooumaribaSall 6 місяців тому

    MERCI sn221