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

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

[@CodingNepal]

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

[@beethebuilder6191]

There are no codes

[@GauravKumar-ui7ow]

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

[@GauravKumar-ui7ow]

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

[@GauravKumar-ui7ow]

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

[@kimberlydelmundo1688]

ddr

[@aamir117]

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]

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

[@amanjoseph6173]

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

[@CodingNepal]

Thank you 💙

[@janvihatwar9123]

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

[@hemantsoni211]

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

[@ademyildizlanguages]

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]

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

[@CodingNepal]

Keep watching nd supporting ❤️

[@gwh1984]

@ademyldzlanguages7867 You can slow down the play speed

[@angryguy2189]

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

[@CodingNepal]

It's my pleasure

[@RuiOut8]

Very good. Thank you very much!

[@yuyu-ui7fq]

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

[@CodingNepal]

Many many thanks to you

[@luishuang4001]

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

[@CodingNepal]

Your welcome 💙

[@huuphinguyen3533]

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

[@CodingNepal]

Thanks for the sub!

[@teddyahamide3813]

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

[@hellocodeur]

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

[@CodingNepal]

You're welcome... Stay tuned 😁

[@RandomGames513]

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

[@CodingNepal]

Yes..keep learning

[@kgowanekgokolo6967]

Awesome tutorial. Keep up the good work

[@CodingNepal]

Thank you.. Stay tuned 😁

[@abduxalilraxmonberdiyev9425]

thanks bro, your contents is very usufull for all

[@CodingNepal]

Glad you think so!

[@DavidDavid-cz9sy]

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

[@CodingNepal]

You're welcome!

[@subhanprofessionalittech4858]

mind blowing bro good keep it up

[@user-tw2uj3hp6u]

Thanks codingnepal. Your videos are really useful

[@CodingNepal]

You're welcome 💙

[@professeurdrissa1313]

thank you very much it's really great

[@CodingNepal]

Welcome :) keep watching

[@rixshaikh397]

Thank You So Much Sir ❤️

[@amiram.6620]

Thank you it really helpful 🙏

[@timepass_coding4469]

Awesome bro really appreciate 👌👌👌👍👍👍

[@TanveerMohammed-xr3pz]

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

[@CodingNepal]

Glad to hear that 😁

[@irzfanfarizan3001]

tq so much l learn a lot from you

[@CodingNepal]

You're welcome 💙

[@vuanh857]

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

[@CodingNepal]

You're welcome... Stay tuned 😁

[@williamarineli]

Vlw cara, ótimo video!

[@gamingtiktok9616]

Very Helpful..

[@CodingNepal]

Thank you :)

[@yashparekh5192]

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

[@CodingNepal]

Thank you so much!

[@mickey_mouse7464]

Talent...❤️

[@sriparnasinha1635]

Thank you so much

[@contrerashuillcayenielisa7259]

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

[@davidelomonaco9423]

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]

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

[@davidelomonaco9423]

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

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

[@cuteandfunnypets6527]

Very informative video

[@CodingNepal]

Thank you.. Stay tuned 😁

[@bhagirathiverma2627]

awesome

[@ernestukut2767]

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

[@prdobymat]

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

[@CodingNepal]

Yes but it won't look attractive

[@tyres9]

nice tutorial bro.

[@CodingNepal]

Thank you... Keep watching

[@user-hb7gi5rq2q]

Tanx bro❤

[@rzstudio5204]

Awesome tutorial.

[@CodingNepal]

Thank you!

[@willygamboa7726]

Thanks, awesome!!!

[@CodingNepal]

You're welcome 💙

[@sureshrajan3152]

Wow superb

[@CodingNepal]

Thank you... Keep watching nd supporting ❤️

[@shaxzodalimov2965]

Thanks bro👍👍👍

[@Mashael_96]

thank you 👍

[@sarankumar2767]

thansk bro

[@RandomGames513]

Interesting

[@CodingNepal]

Thank you 💙

[@vyshnav3355]

thank you

[@patrickbresnahan6611]

Great video. What size is the logo? thanks

[@CodingNepal]

Let me check

[@swathedorange7412]

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

[@swathedorange7412]

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]

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

[@CodingNepal]

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

[@ShubhamSharma-xo9fq]

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

[@CodingNepal]

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.

[@mrayyanali183]

Speed fast bro....but awesome work

[@CodingNepal]

Sorry for that

[@HUMOROUSGUY]

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

[@pkfrdrum1256]

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]

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

[@huuthuannguyen9806]

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?

[@amitbabani6798]

awesome dude

[@CodingNepal]

Thanks!

[@hashemalattas4835]

thanks

[@tysonsingh1731]

Not working

[@rohanv2574]

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]

Contact here - instagram.com/coding.np

[@estrellacarolinaaritamatut3031]

Gracias!!

[@user-ny8ip4tb2i]

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]

I got it after I imported the Sans font from google

[@user-ny8ip4tb2i]

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

[@CodingNepal]

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

[@user-rx5yz7hp6t]

Thanks

[@CodingNepal]

You're welcome 💙

[@khachatrian001]

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]

Contact me on Instagram

[@refatmohammad7491]

Im facing same problem bro

[@CodingNepal]

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

[@refatmohammad7491]

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]

I have the same issue bro

[@abdulrahimbasravi539]

Super Cool Bruhhh

[@CodingNepal]

Thank you bro 💙

[@abdulrahimbasravi539]

@@CodingNepal Welcome bro

[@majedshrahili7293]

😍😍

[@ummeshamsi781]

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

[@MuhammadAslam-cd8vv]

Make one video on dashboard

[@nimaleshdroid4388]

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

[@CodingNepal]

Already made a video on it.. Please visit channel

[@tiktokskillu6868]

Crack

[@webdevelopement6887]

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

[@CodingNepal]

atom.io

[@carlok6949]

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]

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

[@tejaswianand2519]

can i use your code for my website ??

[@CodingNepal]

Yes you can use...

[@nimaleshdroid4388]

kindly mention the font api path used.

[@CodingNepal]

Please check description link for codes.

[@GauravKumar-ui7ow]

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

[@CodingNepal]

Replace that whole line with this one:

[@sparshnigam4470]

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

[@CodingNepal]

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.

[@romanchhaque3668]

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

[@CodingNepal]

Make sure your system is connected with the Internet.

[@dumbneshberkelana]

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

[@CodingNepal]

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

[@dumbneshberkelana]

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

[@CodingNepal]

You're welcome... Stay tuned 😁

[@reza7897]

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

[@eTechAssam]

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

[@eTechAssam]

I follow u since i watched ur first video

[@eTechAssam]

Plz do help me brother

[@CodingNepal]

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

[@SBShuvoTv]

What is your website? I need those source codes.

[@CodingNepal]

Website link - www.codingnepalweb.com

[@SBShuvoTv]

Thank you

[@codewithaayan]

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

[@danceldpm]

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

[@CodingNepal]

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

[@fuadajkic9167]

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

[@narrowboatadventures4235]

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]

Does hamburger menu is appear?

[@AbdulKhan-fb6mo]

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

[@bsgamer5069]

Kosley banako khatra xa

[@leticiaqueirozcarvalho2367]

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

[@josedaviddiazprada3176]

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

[@CodingNepal]

Where you want to Overlap?

[@josedaviddiazprada3176]

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

[@CodingNepal]

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

[@PIRAKAS666]

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

[@sazzadOn]

What is transform origin and scalex()

[@CodingNepal]

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]

@@CodingNepal Thank you.

[@killerz7545]

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

[@tajudeenquadrioluwaseun8023]

sir what is the name of the music you played

[@CodingNepal]

All music links are in the video description.

[@kohtoo8838]

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

[@jamesgiraldo1915]

Bro código fuente por favor :(

[@ahmedutuber]

when press X pace not close and open =

[@CodingNepal]

Recheck the codes

[@purushotamsahu9919]

Blue colour of link is not going away. Plz help

[@CodingNepal]

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

[@FS-qv1mb]

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

[@CodingNepal]

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

[@josemanuelcabezasberrios380]

Just fine. But not drop down menu. :(

[@CodingNepal]

Here is the video of drop down menu - kzbin.info/www/bejne/f6rbkGtmbtaqpcU

[@josemanuelcabezasberrios380]

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

Thank you.. Stay tuned.

[@BhavinsOfficial]

7:13

[@muhammedmidlaj7661]

bro slowly🤐

[@user-cv4rt8sy2o]

Bi

[@harshwebdeveloper]

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

[@wangechikimani9764]

Thank you so much

[@CodingNepal]

You're most welcome