Responsive Navigation Menu Bar using HTML & CSS | CSS Media Query

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

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

  • @CodingNepal
    @CodingNepal  4 года назад +12

    If your icons aren't showing, replace the line no.8 script of index.html with this:

    • @beethebuilder6191
      @beethebuilder6191 3 года назад +3

      There are no codes

    • @GauravKumar-ui7ow
      @GauravKumar-ui7ow 2 года назад +1

      Cross cut button is not appearing although I used your link from w3 font awesome 5 intro.... help
      ..please ...

    • @GauravKumar-ui7ow
      @GauravKumar-ui7ow 2 года назад +1

      Cross cut button is not appearing although I used your link from w3 font awesome 5 intro.... help
      ..please ...

    • @GauravKumar-ui7ow
      @GauravKumar-ui7ow 2 года назад +1

      Cross cut button is not appearing although I used your link from w3 font awesome 5 intro.... help
      ..please ...

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

      ddr

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

    bro i was stuck very badly in responsive nav bar. I tried many options but your video made my life easy. Great work bro. Thanks,

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

    After many try I decide it will not possible by myself but you make it possible. Thanks buddy👍

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

    bro ur website is just awesome bro.....i copied few of ur codes from there nd use it in my project....literally u r the saviour

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

    I have learn many code in your tutorials,thank much code Nepal...real appreciate your work.

  • @ademyildizlanguages
    @ademyildizlanguages 5 лет назад +11

    I yesterday discovered this channel and already watched two tutorials pretty well. It's really good but what worries me, you're a little fast to catch codes. If you pay attention this then it would be great.

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

      Thank you so much for your comment. Next time I'll improve it.

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

      Keep watching nd supporting ❤️

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

      @ademyldzlanguages7867 You can slow down the play speed

  • @mkamranusmanipk
    @mkamranusmanipk Год назад +3

    Well-done CodingNepal you did well. Your work is indeed very impressive and helpful to web designers. thanks😍

  • @국민약속-무료모바일
    @국민약속-무료모바일 4 года назад +2

    3:15 My codes do not work with this white under line part. Which other parts do I have to check if I have all "nav ul li a:before{ ..... } part just same as the video?

  • @yuyu-ui7fq
    @yuyu-ui7fq 3 года назад +6

    Thank you so much sir ,really awesome work ....no one will support by giving there code for free to learn
    i have never commented anyone personally in any website .This is my first comment for you because you deserve it.Most of the people share there knowledge for cost,Thank you once again
    Very helpful , God bless you

  • @DavidDavid-cz9sy
    @DavidDavid-cz9sy 3 года назад +1

    this video was very helpful .....thank you so much

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

    That's all i'm looking for! Thanks for sharing this. sucribed your channel'

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

    thanks bro, your contents is very usufull for all

  • @АйдосБайбурин
    @АйдосБайбурин 4 года назад +1

    Thanks codingnepal. Your videos are really useful

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

    Thank you sir for this awesome video 🙌🙌.
    We really liked the most this video ❤

  • @TanveerMohammed-xr3pz
    @TanveerMohammed-xr3pz 4 года назад +1

    i had no issues at all i dont know why people are complainig also by watching this vid fixed one of my recent pages bug

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

    Awesome tutorial. Keep up the good work

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

    tq so much l learn a lot from you

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

    merci beaucoup, ca m'a fait gagner du temps.

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

    Excellent! Thank you :)

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

    Awesome bro really appreciate 👌👌👌👍👍👍

  • @amiram.6620
    @amiram.6620 Год назад

    Thank you it really helpful 🙏

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

    mind blowing bro good keep it up

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

    Its great using this video and adding our creativity we can do some more

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

    Talent...❤️

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

    Thank you so much boss💞

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

    Very informative video

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

    thank you very much it's really great

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

    thank you very much sir, you really help a lot!

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

    all your videos are awesome you deserve much more views ;)
    keep up the good work and tysm

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

    Awesome tutorial.

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

    Thank you so so much, this is exactly what I need xd

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

      You're welcome... Stay tuned 😁

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

    Very good. Thank you very much!

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

    Wow superb

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

      Thank you... Keep watching nd supporting ❤️

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

    Thank You So Much Sir ❤️

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

    Great video. What size is the logo? thanks

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

    awesome

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

    Speed fast bro....but awesome work

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

    Very Helpful..

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

    nice tutorial bro.

  • @davidelomonaco9423
    @davidelomonaco9423 3 года назад +3

    Cool video! Everything works fine except one thing. On mobile, when I click on a section the menu doesn't disappear automatically. I have to click manually on X icon. Could you help me? Thanks

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

      Yes I didn't code for it... So you've to click on cross icon to hide navbar

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

      @@CodingNepal could you help me to find a solution? Thanks

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

    Thanks bro👍👍👍

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

    Nice job dude! Noticed Font Awesome CDN has been reviewed. The W3 school code isn't working.

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

    Thank you so much

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

    Super Cool Bruhhh

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

    Amazing !!! But I cant found the code in your website :(

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

    1:27 there you added css code to star (*) but when i did the same it not working
    please help

  • @ShubhamSharma-xo9fq
    @ShubhamSharma-xo9fq 4 года назад +2

    bro how did you manage the checkbox to be perfectly placed on #button ....??? can u explain me here... ..... it was creative though.....

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

      No i didn't manage the checkbox on perfect place.. I just gave the id name of checkbox to for attribute of label tag. So label tag can handle the checkbox means label can checked and unchecked the checkbox.

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

    That's waht i was looking for. Is it posible to do this wiht fade animation instead of the slide?

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

      Yes but it won't look attractive

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

    Interesting

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

    When i try adding ::before nothing shows below the , typed the same code you did, do you maybe know the reason why

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

      okay i managed to get it shown on the screen, but the line's width when set to 100% covers the whole screen for some reason, and its not placed below a but way above

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

      It is because I didnt set the 's position to relative, can you please explain why does it have to be on relative

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

      Sorry I didn't understand... Send me your problems/codes on my Instagram account

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

    awesome dude

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

    thank you 👍

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

    I am folllowinng ur steps..but that icons(#btn, #cancel) can't moving right side even i gave float right ...? could u help me plz

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

      Contact here - instagram.com/coding.np

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

    hi can you please show us reponsive carousal with Hero text and copy on it - thanks

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

      Already made a video on it.. Please visit channel

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

    looks very good so far, but i have an issue when adding ~ tilde symbol behind #check id. Nothing happens than. I don´t know how to continue, could you please help me?

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

      Please check your checkbox id name and for attribute value of label and remember it must be same.

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

      I i'm like you, even though id of checkbox and for attribute in label are the same, it doesn't work, how can I fixed that?

  • @AmirAkbari-w4c
    @AmirAkbari-w4c Год назад

    Tanx bro❤

  • @وليدالنادي-ح3ق
    @وليدالنادي-ح3ق 3 года назад +1

    Thanks

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

    Can you please tell me the name of your code editor name?

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

    why the #check:checked ~ ul part doesnt work? " the menu doesnt open when i pressed the check bars"

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

      You may did some mistakes.. Please recheck the codes.

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

      @@CodingNepal oh yea, i typed something wrong hehe. thanks sir,

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

      You're welcome... Stay tuned 😁

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

      ​@@dumbneshberkelana can you tell me what's wrong? I need to know, because mine same too

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

    kindly mention the font api path used.

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

      Please check description link for codes.

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

    What is your website? I need those source codes.

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

      Website link - www.codingnepalweb.com

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

      Thank you

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

      @@CodingNepal i didn't found the code there. Need help.

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

    Thanks, awesome!!!

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

    Bro editing ur css code doesn't cause any changes.plz help me

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

      I follow u since i watched ur first video

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

      Plz do help me brother

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

      Please contact me on my Facebook Page for further explanation - facebook.com/coding.np Thank you for watching my videos.

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

    Hello, how to 'overflow hidden' in media query? Because even though i used overflow hidden in my body when i got to the media query part it just wont work.

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

    can i use your code for my website ??

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

    Bro im doing like you but when i clicking that menu links, after my click im in that link page but menu not closing automaticly.. i mean staying and not closing until i press close button... What to do?

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

      Contact me on Instagram

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

      Im facing same problem bro

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

      You need add some JavaScript codes... Please contact on me Instagram and I'll do it for you.

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

      Thanks for the info bro.. Im new on your channel. and a beginner... Didnt learn js so far.. If I need it in future ill gonna ask you and thank you❤

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

      I have the same issue bro

  • @MuhammadAslam-cd8vv
    @MuhammadAslam-cd8vv 3 года назад

    Make one video on dashboard

  • @GauravKumar-ui7ow
    @GauravKumar-ui7ow 2 года назад

    Cross cut button is not appearing although I used your link from w3 font awesome 5 intro.... help
    ..please ...

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

      Replace that whole line with this one:

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

    thanks

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

    Vlw cara, ótimo video!

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

    thansk bro

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

    - Not a single dropdown
    - Doesn't close on a link click
    - Doesn't close when clicking anywhere outside
    Conclusion - not user friendly and sloppy.

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

    Sir how I use marquee paragraph with this responsive navigation.
    Please help me

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

    My class fas fa-bars is not working..its not showing the buttons....help me please..

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

      Make sure your system is connected with the Internet.

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

    I want overlap this menu, how i doi it? thx

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

      Where you want to Overlap?

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

      @@CodingNepal I have al slideshow in my page, but when i resize the project, the slideshow hidden the menu, how can i fix?

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

      Give the z-index css property to menu i.e nav {
      position: relative;
      z-index: 999;
      }

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

    sir what is the name of the music you played

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

      All music links are in the video description.

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

    I tried this method but I can't show the menu because I have the hero image on it. Please help me

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

      Give z-index: 5 to navbar because image overlap the navbar and the navbar gone behind of this image.

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

      @@CodingNepal ty sir, it helps me a lot, i was struggling with it :D

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

    What is transform origin and scalex()

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

      The transform-origin CSS property sets the origin for an element's transformations and the scaleX() function is used to scale an element up or down, making it bigger or smaller, in the direction of the x-axis.

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

      @@CodingNepal Thank you.

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

    Bro I'm unable to find source code of this navigation bar

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

      You may found similar like this right..? You can contact me on Instagram if you need source of this or download codes from my website that design is similar like this and only colors are different.

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

    😍😍

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

    Kosley banako khatra xa

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

    Gracias!!

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

    I replaced body in * place.and i get lost for 3 hour from 1 pm to 3pm .i can't find any mistakes.and finally i misplaced that *. Fck!!!!!!

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

    Not working

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

    Hello, I'm unable to fix a padding-right for feedback when i drag my window from right to left, i tried % not working

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

      Contact me on Instagram - instagram.com/coding.np

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

    Crack

  • @AbdulKhan-fb6mo
    @AbdulKhan-fb6mo Год назад

    How do you collapse the menu when you click a link?

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

    Do I need the: @import url('fonts.googleapis.com/css?fa???????')

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

    7:13

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

    Blue colour of link is not going away. Plz help

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

      Remove # and put the url inside href attribute of tag.

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

    I didn't find the codes on the website. Could you send the direct link?

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

    when press X pace not close and open =

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

    Just fine. But not drop down menu. :(

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

      Here is the video of drop down menu - ruclips.net/video/Iyx_809qwoc/видео.html

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

      @@CodingNepal thanks. I watched it but to be honest, i would like the dorp down menu with the style of this video. It looks more elegant and runs better.

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

      Thank you.. Stay tuned.

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

    I have so I think followed the code exactly apart from using my own Jquery code but the hamburger does not seem clickable in mobile mode. Any Ideas where to look

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

      Does hamburger menu is appear?

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

    Bro código fuente por favor :(

  • @FS-qv1mb
    @FS-qv1mb 4 года назад +2

    Dude for real change the music, it makes my ears bleed

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

      It's old video... Check out our new videos.

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

    bro slowly🤐

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

    Thank you sir for this awesome video 🙌🙌.
    We really liked the most this video ❤

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

    thank you very much. this video, it helped me a lot

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

      You're welcome... Stay tuned 😁