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

Поделиться
HTML-код
  • Опубликовано: 9 окт 2019
  • Responsive Navigation Menu Bar using HTML & CSS | CSS Media Query
    Download Codes From Here - www.codingnepalweb.com
    Responsive Navigation Bar [ Hindi ]
    ➤ • How to Create Responsi...
    My Code Editor - • Best Text Editor for H...
    Facebook - / coding.np
    Instagram - / coding.np
    Music Credit:
    Track: Jordan Schor & Harley Bird - Home [NCS Release]
    Music provided by NoCopyrightSounds.
    ➤ Watch: • Jordan Schor & Harley ...
    Track: Rival x Cadmium - Seasons (feat. Harley Bird) [NCS Release
    Music provided by NoCopyrightSounds.
    ➤ Watch: • Rival x Cadmium - Seas...
    Track: TULE - Fearless pt.II (feat. Chris Linton) [NCS Release]
    Music provided by NoCopyrightSounds.
    ➤ Watch: • Lost Sky - Fearless pt...

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

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

    Responsive Sticky Navigation Bar
    Watch - ruclips.net/video/UHSeFxZIuv8/видео.html

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

      There are no codes

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

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

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

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

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

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

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

      ddr

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

    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,

  • @mkamranusmanipk
    @mkamranusmanipk 10 месяцев назад +3

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

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

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

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

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

  • @ademyildizlanguages
    @ademyildizlanguages 4 года назад +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  4 года назад +1

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

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

      Keep watching nd supporting ❤️

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

      @ademyldzlanguages7867 You can slow down the play speed

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

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

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

    mind blowing bro good keep it up

  • @yuyu-ui7fq
    @yuyu-ui7fq 2 года назад +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

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

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

    Awesome tutorial. Keep up the good work

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

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

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

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

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

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

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

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

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

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

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

      You're welcome... Stay tuned 😁

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

    thanks

  • @user-tw2uj3hp6u
    @user-tw2uj3hp6u 3 года назад +1

    Thanks codingnepal. Your videos are really useful

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

    thanks bro, your contents is very usufull for all

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

    Thank You So Much Sir ❤️

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

    Very good. Thank you very much!

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

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

  • @user-hb7gi5rq2q
    @user-hb7gi5rq2q 6 месяцев назад

    Tanx bro❤

  • @amiram.6620
    @amiram.6620 6 месяцев назад

    Thank you it really helpful 🙏

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

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

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

      You're welcome... Stay tuned 😁

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

    Vlw cara, ótimo video!

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

    thank you very much it's really great

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

    Awesome bro really appreciate 👌👌👌👍👍👍

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

    Talent...❤️

  • @TanveerMohammed-xr3pz
    @TanveerMohammed-xr3pz 3 года назад +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

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

    thank you 👍

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

    Thanks bro👍👍👍

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

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

    Thank you so much

  • @ernestukut2767
    @ernestukut2767 6 месяцев назад

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

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

    tq so much l learn a lot from you

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

    awesome

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

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

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

    Thanks, awesome!!!

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

    thansk bro

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

    Very Helpful..

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

    thank you

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

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

    nice tutorial bro.

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

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

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

    😍😍

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

    Crack

  • @ShubhamSharma-xo9fq
    @ShubhamSharma-xo9fq 3 года назад +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  3 года назад

      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.

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

    Very informative video

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

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

    Wow superb

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

      Thank you... Keep watching nd supporting ❤️

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

    Awesome tutorial.

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

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

    Interesting

  • @user-rx5yz7hp6t
    @user-rx5yz7hp6t 3 года назад +1

    Thanks

  • @estrellacarolinaaritamatut3031

    Gracias!!

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

    awesome dude

  • @swathedorange7412
    @swathedorange7412 3 года назад +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 3 года назад +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 3 года назад +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  3 года назад

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

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

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

  • @pkfrdrum1256
    @pkfrdrum1256 3 года назад +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  3 года назад

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

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

      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?

  • @user-ny8ip4tb2i
    @user-ny8ip4tb2i 3 года назад +1

    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?

    • @user-ny8ip4tb2i
      @user-ny8ip4tb2i 3 года назад +1

      I got it after I imported the Sans font from google

    • @user-ny8ip4tb2i
      @user-ny8ip4tb2i 3 года назад +1

      I have the under line but now it does not do the motion...

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

      Please send the screenshot of your problems on my Instagram account - instagram.com/coding.np

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

    Super Cool Bruhhh

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

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

  • @khachatrian001
    @khachatrian001 3 года назад +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  3 года назад

      Contact me on Instagram

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

      Im facing same problem bro

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

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

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

      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

  • @GauravKumar-ui7ow
    @GauravKumar-ui7ow Год назад

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

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

      Replace that whole line with this one:

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

    Great video. What size is the logo? thanks

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

    Speed fast bro....but awesome work

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

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

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

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

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

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

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

      You're welcome... Stay tuned 😁

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

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

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

    Make one video on dashboard

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

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

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

      I follow u since i watched ur first video

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

      Plz do help me brother

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

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

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

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

    • @CodingNepal
      @CodingNepal  3 года назад +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.

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

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

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

      Already made a video on it.. Please visit channel

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

    Not working

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

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

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

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

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

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

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

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

    kindly mention the font api path used.

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

      Please check description link for codes.

  • @AbdulKhan-fb6mo
    @AbdulKhan-fb6mo 11 месяцев назад

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

  • @danceldpm
    @danceldpm 3 года назад +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  3 года назад

      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

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

    What is your website? I need those source codes.

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

      Website link - www.codingnepalweb.com

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

      Thank you

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

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

  • @carlok6949
    @carlok6949 3 года назад +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  3 года назад +1

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

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

    Kosley banako khatra xa

  • @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 3 года назад +1

    Bro código fuente por favor :(

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

    can i use your code for my website ??

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

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

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

    bro slowly🤐

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

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

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

      Where you want to Overlap?

    • @josedaviddiazprada3176
      @josedaviddiazprada3176 3 года назад +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  3 года назад +1

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

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

    when press X pace not close and open =

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

    i cant scroll why ?

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

    What is transform origin and scalex()

    • @CodingNepal
      @CodingNepal  3 года назад +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 3 года назад

      @@CodingNepal Thank you.

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

    7:13

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

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

    Blue colour of link is not going away. Plz help

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

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

  • @user-cv4rt8sy2o
    @user-cv4rt8sy2o 10 месяцев назад

    Bi

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

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

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

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

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

    Just fine. But not drop down menu. :(

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

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

    • @josemanuelcabezasberrios380
      @josemanuelcabezasberrios380 3 года назад +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  3 года назад

      Thank you.. Stay tuned.

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

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

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

    Thank you so much