Responsive Dropdown Menu Bar with HTML & CSS | CodingNepal
HTML-код
- Опубликовано: 12 мар 2020
- Responsive Dropdown Menu Bar with HTML & CSS | CodingNepal
Responsive Dropdown Menu Bar (Part -2) [HTML] [CSS]
➤ • Responsive Drop-down M...
NOTE: Nowadays that font awesome link I provided not support so your icon may not be showing. Please use the latest CDN link which you can easily find on Google.
Dropdown Menu with Search Field using HTML & CSS
➤ • Responsive Dropdown Me...
Responsive Sticky Navbar on Scroll HTML & CSS
➤ • Responsive Sticky Navi...
Download Codes From Here (You may have to search the title of this video there)- codingnepalweb.com
Second Channel - bit.ly/3aHNkru
My Code Editor - • Best Text Editor for H...
Facebook - / coding.np
Instagram - / coding.np
Music Credit:
Track: BEAUZ & JVNA - Crazy [NCS Release]
Music provided by NoCopyrightSounds.
➤ Watch: • BEAUZ & JVNA - Crazy |...
Track: Culture Code - Feel Again (feat. Harley Bird) [NCS Release]
Music provided by NoCopyrightSounds.
➤ Watch: • Culture Code - Feel Ag...
Track: Naron - Imagination [NCN Release]
Music provided by NoCopyrightNation
➤ Watch: • Naron - Imagination (I...
You'll also Love this Responsive Navbar - ruclips.net/video/nKnrdABs7Zs/видео.html
If icons are not showing then replace the line.no 8 with this
@@CodingNepal thanks !!
Feels really good to see a Nepali coder at the top of my search result
Glad to hear that...Stay tuned with us :)
CodingNepal, Thank you very much for these 2 videos. I now have a responsive navigation bar. I really admire how you guys come up with these codes. I wish I was that smart hahahahaha.
Stunning videos... Stunning videos... Thank you for taking the time to make them... a strong embrace from Argentina...
Thank you so much 💙
i'm watching video while listening pantera, and dude.. this is an awesome tut. i'm beginner at css and learning a lot of thing with these videos and also having fun!
thank you so much
Glad to hear that... Stay tuned 😁
ayyy pantera gang xD
Thank you! This has helped me a lot!
Excelente aporte, gracias por compartir este tipo de material, me ha gustado mucho, saludos desde Colombia
English please
@@CodingNepal I am sorry, I speak very little the English.
Translator👇🏻👇🏻👇🏻
Excellent contribution, thanks for sharing this type of material, I really liked it, greetings from Colombia. You already have a new subscriber 😊
Thank you bro for loving my videos... Keep watching 💙
Love you man. A great menu
Thank you 💙
This is an awesome video. Thank you!
Dude I LOVE YOU!!!!!!!!!!! THANK YOU SO MUCH!
You're welcome 💙
Thank you CodingNepal.
You are very welcome
Awesome bro.. nice to c u coming this far ❤️❤️
Thanks a ton
Nice project bro, you're good!
Glad you like it!
Ah thank you, that's what I was looking for
You're welcome 💙
@@CodingNepal please help me. My fa fa-plus not showing the plus icon. Thanks.
Thank you...its a great help to me.
You're welcome 💙
amazing bro, waiting for responsive part
Video already published watch now - ruclips.net/video/1NC8G_zWDJY/видео.html
thanks a lot i appreace it
Glad I could help
Waao Amazing 👍 waiting for other parts
Part 2 has been published visit channel.
Ok
I learned a lot by watching your videos +subscribed
Thank you 💙
Fantastic work !!!!
And Thank you..
Thank you 💙
Thank you so much sir ❤️
Thanks a lot bro you are helping us lot of in css 3
Very cool and like you background music..😊
Thank you 💙
Thank you so much!
You're welcome.. Stay tuned 😁
I love when every last one of this kind of tutorial creates this component for ideal condition
what if your menu is on the left side of the screen and you have a sub-menu under the last menu button. then what? we will hope that no one will ever want to open it or that every user who wants should be familiar with HTML/CSS
So close to 100k!
Fantástic!!!
Im tô Brazil!
Thank you 💙😁
very nice fantastic......waiting for upcoming part..
Part already published... Check description
@@CodingNepal OK done
many thank very useful for me
Nice video. Which browser extension is used here?
thanks ... from India bro 😊
You're welcome bro 💙
Hello: I've been following your video up to the nav ul li a:hover. I've followed the color codes like you instructed. But, my box-shadow isn't working. Can you help me?
Thanks!!
Nice video dude
Thank you 💙
Love the content
Thank you 💙
Nepali bhaiya ne toh bilkul aag lga di !
Its not applicable in practice brother Css visible property still takes up space
But it was a good video if your taking about using only Css to get used to the properties in it.
Im working in Dreamweaver ant cant remove Blue Markings when hovering
Best codding sir
Bro which tool u use for html coding plz reply
Carry on daajai
Thank you 💙
thanks for course but i have got a question for you, how to make a slide menubar in responsive like for amazone without a burger thanks
Very nice video sir....
Thank you 💙
wow ,good man
Thank you 💙
Everytime im making css "THIS SHOULD WORK"
why is that when i change the text to a longer text in the dropdown, the text goes down instead of going vertically? Please help me
Inside css media query you need to change the font size of text according to the device width. If you can't do it contact me on Instagram and I will do it for you.
superb
great video
Thank you.. Stay tuned 😁
Awesome
Thank you 💙
Best Video
how to change the background color to background image on navigation bar?
May i know the full link located above the css file cause i wanna try this tutorial but can't see the full details of the link. Thanks
Check this part 2 video description. I've mentioned source code download link.
@@CodingNepal No source code mentioned anywhere ! ! !
@@ahmedch6633 Click download link and you scroll until bottom
hello , thanks for the course and you explain verry well but i have got a question for you,
how to make a responsive slide menubar like for amazone without a reduiced nav bar as in your course. thanks.
If i add slider below navigation, the dropdown is not working properly. I can see the dropdown list but unable to click the dropdown options. Please help.
Please contact me on Instagram.
In this nav bar position is not fixed. If I fix the same, menu is going to the left but I want it should be right aligned. How to fix this issue. Help me out
Please contact me on Instagram.
Sir please do one thing for me, when I click on hamburger menu. Then cannot visible that and collapsible menu(cross symbol) showing at down of the menu.
Please contact me on Instagram and I'll do for you.
Very cool ! Can you upload this project and give me link to download ?
I'll provide source code download link tonight or maybe tomorrow. Please keep patience.
ruclips.net/video/-eghPC-mpbo/видео.html
Sir , Please Make a complete Website with drop down menu
you are very good :D
turn down the music volume pleaaaaaaaaaaaaaaaaaaaaaaase
Thanks
Welcome
I have to click on the buttons to get them to glow and also my drop down menu does not work. please help :(
Please recheck your codes otherwise you can download code files of this tutorial from description link.
i love this
im added a slider below this menu bar but the dropdown appears behind my slider. how do i make the dropdown appear in front of everything else?
Add this code
nav{
position: relative;
z-index: 999;
}
@@CodingNepal thanks for the fast reply but it doesnt work when i put it into my css file. nothing seems to happen when i put that code in
If your problem still not solved send me your code on my Instagram.
@@CodingNepal can you reply to me on instagram i sent you a message
Me too
Hey When I add dropdown it doesn't stay open. Why?
the source is not found in the link given up.
there are many navs menu but this one
Here is the direct codes link - www.codingnepalweb.com/2020/04/responsive-drop-down-menu-bar-using.html
how can i replace the logo for an image instead of the text?
Watch this - ruclips.net/video/AkK8yHC4TlI/видео.html
somebody please help after i set the opacity to 0 visibility: hidden in nav ul ul and again i set opacity to 1 and visibility:visible i still cant see my drop down list someone please help
I think this is not right way to do menu bar using float these days. It seems using float & display:inline-block contradicts and ignores float while using display inline-block
True, float has become outdated nowadays
exactly, same noticed but anyway great video ;)
The Display: inline-block is being ignored in nav ul li due to the float:left?
Yes bro.
@@CodingNepal how to fix it bro
please can u make a video adding another drop down menu? but same as this html and css? i dont know how to add
Watch this - ruclips.net/video/_IHxhJlIPZA/видео.html
Hi
Why isn't it getting applied,when I change it to my phone ?
I have linked tablet, phone and desktop css pages to my html. I copied this code exactly to all those css pages. It works well on desktop, working good on tablet to some extent but fails when minimize to phone why brother ?
Plus it's list shows in separate blocks else from vertical drop down
Can you show me the screenshot of problems on my Instagram account... Link in the description
@@CodingNepal I sorted brother. Thank you so much. Your codes are just awesome. Please upload for e-commerce websites and other applications
which codeeditor you use
Here is the video of my text editor - ruclips.net/video/55VjXTeYkTE/видео.html
what was the use of nav:after in this?
In CSS, ::after creates a pseudo-element that is the last child of the selected element. It is often used to add cosmetic content to an element with the content property. It is inline by default.
@@CodingNepal But here in this video, why did you use display:table property under nav::after? I didn't see any changes
brother i need the source code but given link of the website doesn't have the source code if it has kindly give that link the direct one
cause i tried so many times but didn't able to code the same thing as you had coded
Here is the direct codes link - www.codingnepalweb.com/2020/04/responsive-drop-down-menu-bar-using.html
how to make this sticky ?? when i created slideshow , i cant click my navi now also
Here is the video - ruclips.net/video/UHSeFxZIuv8/видео.html
music?
BTW lots Of love from bhairahawa,nepal
Thank you :)
Bro can you tell which text editor are using to code?
Atom
Check description I've made video about it.
@@CodingNepal tqs
Sublime text editor is better or not ?
@@cguniverse3919 yes bro
Can i use this in mobile Format bootstrap
I didn't use Bootstrap
how did you learnt all these, I am not talking about this dropdrown menu. I just visited your blogs on php, xampp. I want to learn all these by step by step. Can you help me..!!
Why not.? You can contact me on Instagram.
@@CodingNepal sure👍
can I make dropdown without navbar
.show,.icon, input {
display: none;
}
this code is effected in contact form inputs are not showing. how can i modify this code to display the inputs?
Give a class name to input tag and style it.
@@CodingNepal tq it's working...
Sir tell me one think .
What is better responsive for blogger.
Only use HTML or With java.
can someone explain to me what was the role of this line:
nav:after{
content:' ' ;
display : table;
clear: both;
}
:after is a psuedo element or selector and the “clear: both” means floating the elements are not allowed to float on both sides.
@@CodingNepal nav :after is not high lighten in my code, what should I do?
You gave above link source code bro always give the page url compelet where your code exist so that we may easily copy that it is difficult to find it. Thanks!
If i do this.. Maximum my viewers only go to my website to get the codes of particular tutorial and after getting the codes they immediately exit from my website and it's increase the bounce rate of my website which is not good so I don't do this..
If I don't give the direct link of source codes.. First they go to my website then search the tutorial and get the codes.. With this method they spend some times on my website which helps me to maintain my website bounce rate.
.may I know what your using the software?
Check description
@@CodingNepal OK, thanks
can someone provide me the link to part-2? that would really help me
Good mgr bhai atleast thora saf to likho age peche kia hua he sara uper se youtube pe dala content thora saf to rakho li ek jaga sahi line mein dia he to dusra li uper rakh neche href dia he or bhi ese mistakes hein
You Super 💕😘
Thank you
sir code is not available on you website plz upload it
nav:after{
content ‘ ‘;
clear: both;
display: table;
}
//Can someone explain why this was written, failed to understand the purpose of this part :(
TIA🙏
The “clear: both” means floating the elements are not allowed to float on both sides. It is used when no need of any element float on the left and right side as related to the specified element and wanted the next element only shown below. It also indicates that no other element takes up space on the left and right side.
Display: block; will extend to 100% of the available space, while display: table; will only be as wide as its contents.
If you don't understand.. You can try with removing this codes from the css file and see what changes in the design.
Sir
Hum Janna chahte hai
Ki aapne kitne dino me HTML CSS and JavaScript Sikh liya
Please sir
If you watch this comment
Then, please answer
Mene 2 saal pehele siknaa suru kiya tha... Abhi bhi sik rahahu.
Great bro plz try to provide sorce Code
please also added imgae and logo. i want to downoad the image
Sure.. Stay tuned 😁
Can anyone help. The plus icon not showing here.
You may not connected to the Internet
Coding Nepal I'm done doing this drop down menu buy how am I going to turn this into an hamburger menu without starting all over again cause your other videos showed you starting all over again
I didn't understand
What I'm trying to say is that I did it dropdown navigation bar and it works fine on the laptop. But it doesn't work fine on my mobile phone how can I change it to appear as an hamburger menu on a mobile phone and still appear as a drop down on a laptop or computer
Have you watched video complete...? I've done this part in the video.
Here is the codes of this tutorial - www.codingnepalweb.com/2020/04/responsive-drop-down-menu-bar-using.html
Source Code Please?
The amount of ads absolutely kills me.
I'm really sorry for it.
i am unable to find this video source code. please help me out
Go through description link and search the title of this tutorial.
Why my background image don't load after using this header?
You may did some some mistakes on giving proper image path.
@@CodingNepal image path was right but when i remove header image appears
Then you should give z-index to the image.
Where is the responsive video of this series?
Float???
i can't get the font awesome it not working sir