Responsive Navigation Menu Bar using HTML CSS & JavaScript
HTML-код
- Опубликовано: 9 авг 2019
- Responsive Navigation Menu Bar using HTML CSS & JavaScript
Responsive Sticky Navbar using HTML & CSS
➤ • Responsive Sticky Navi...
Responsive Navbar with Search Box HTML & CSS
➤ • Responsive Dropdown Me...
Download Codes From Here - www.codingnepalweb.com
My Code Editor - • Best Text Editor for H...
Facebook - / coding.np
Instagram - / coding.np
Music Credit:
Track: Unknown Brain - Why Do I? (ft. Bri Tolani) [NCS Release]
Music provided by NoCopyrightSounds.
➤ Watch: • Unknown Brain - Why Do...
Track: Jordan Schor & Harley Bird - Home [NCS Release]
Music provided by NoCopyrightSounds.
➤ Watch: • Jordan Schor & Harley ...
Responsive Sticky Navigation Bar
Watch - ruclips.net/video/UHSeFxZIuv8/видео.html
i followed the all step but the menu bar button is not working,..?
@Joshua Chettiar still it's not working not showing bar ..can you help me ??
@Joshua Chettiar I am using vs code
an amazing lesson even though it was done with light speed. but generally, it was an informative quick tutorial brother.
Thanks a lot for sharing.
An amazing top bar coding tutorial. I subscribed! Hope you keep doing these great tutorials!
Fantastico! 👏👏👏👏 I prefer this to using all those css framework that look confusing.. Now I have known how to create my own navigation bar when building my own site.
Too easy to make a responsive nav from ur video. Thank so much.
You're welcome.. Stay tuned 😁
Instead i would follow your another tutorial where you made the same nav bar using only CSS. Adding a checkpoint and when it is checked the items will show up 😊
I made my first responsive design 🥳
tysm🙂coding nepal
Keep it up
Thank you, It's simple and clear! ☺♥
You're welcome 😊
Amazing tutorial! Thanks for sharing!
Nevermind, I found what I was looking for in this other video from your channel ruclips.net/video/AkK8yHC4TlI/видео.html. Thanks again!
You're most welcome.
I cant express my feelings for you, How much your videos are playing a vital role in my web development career. Really respect you and want to meet you sir!
great video, short and well done!
I always wondered how to do that it's so simple now with the jquery
Great sir ..... Lots of love from me ..... Pakistan 🇵🇰🇵🇰🇵🇰
Great video trying to learn js and your video helped. Do you have any suggestion on a video on js to close the menu once a nav link is clicked. Thanks in advance.
Thanks for the video, it helped me alot!
You're welcome 💙😁
Very Good it helped me a lot!
Thank you soo much!!! This was very helpful!!!!
This video is very helpful sir❣
Thank u so much 😇... Specifically for font awesome cdn
Easy to understand good video ......keep uploading
Thank you bro... Keep watching
Thank you soo much 🥺😄
Great job! And thanks for your share.
Thanks for watching!
Great Video
Really great tutorial! Just wondering is it possible to use pure vanilla Java-script instead of JQuery to have the exact looks and functions like your example? Thank you very much!
I made many responsive navbar using css only. Please visit channel.
@@CodingNepal Thanks I will!
just awesome bro..
Thank you bro.. Stay tuned 😁
Thank u for a responsive toggler navbar ☺
Hi, do you have a video on linking buttons on HTML on a website? Thanks.
good lesson i appreciate that.
thanks 4 help me , more one like 4 u .
Your welcome 💙
Thank you so much for sharing!
Subscribing to your channel :)
Thank you for subscribing 😄
Amazing tutorial ❤️
Awesome 👍
Thanks for the visit
really...helpfull...thanks ...👍
You're welcome... Stay tuned 😁
What is the name of the extension used to resize the page(checking responsiveness) in the beggining of the video??
This is a developer tool... Press ctrl+shift+i to open on chrome.
U r doing awesome
Very nice bro👍👍❤️❤️❤️❤️
amazing,nice ! Thanks ,I am from Azerbaijan write to you )
Hello! Im having a problem, At the first button or in the Home Button, The white border around the text button is not disappearing
Make sure you're connected with the internet for shows fontawesome Icons or maybe you've forgot to write some lines of codes or maybe you did any mistakes. Please watch video clearly and try once again. If same problems repeating twice then send me your code through Email - boyunknown864@gmail.com
Great video bro thanks.
Glad you enjoyed it
Really amazing
Hello I will have one question. I paused on 4:00 because have problem with bar when I try copy yours link with script these this bar don't showing me on web site please help me. I think that this script which is on yours tutorial is inaccessible. Did you could writing new script for this bar ? And could adding him in comment ? thanks :)
Same it's not showing
Thanks dor the amazing tutorial ! It worked all, accept of the @media command. idk why maybe anybody else can help ?
@media is used for add breakpoints on particular device width.. Please check your codes again.
subscribed, um excited for the next lesson
Awesome, thank you!
Thanks a lot !
You're welcome 💙
De Colombia, gracias sus videos son muy interesantes y gracias por los códigos, en este me falto el java por que no se si es tildes 0 comillas y no soy desarrollador por eso me confundo, pero muchas gracias.
Helpful Video
Thank you
I would have used flex to lay out the ul and you really didn't need jQuery to toggle a class. Vanilla javascript would have worked just fine.
Yes we don't need Javascript to toggle CSS is enough ruclips.net/video/AkK8yHC4TlI/видео.html
Awesome
Power of jQuery 🥶💥
Thank you for this but the button to get the menu to drop down does not appear. Everything else appears. Is there another link that I can use so that it can show up?
I'd you're doing display: none;. If you expand the window while the nav is closed ok mobile, wouldn't menu disappear at larger size?
Thank you Brother
Nice 😊
Thanks 😊
Is this coding style still okay for 2021? Great video by the way.
No I used float and now flex box use to make responsive.. Watch this video - ruclips.net/video/UHSeFxZIuv8/видео.html
@@CodingNepal Heyy nice! You're the best yooo, thanks so much for making an updated one.
Thanks you very much
You're welcome 💙
thank you very much
You're welcome 💙
Thanks for this video!
It was helpful, but i just want to know why my image doesn't appear in the section zone .
I inspected in chrome and consol doesn't show any error.
You mean your img is not showing on the webpage right?
@@CodingNepal exactly!
@SsniperR I did it and and it is working.
Thank you SsniperR!
@@adamabarry1856 How did you fix the problem with showing image ? I have a same problem. Thank you !
I like it😊
Thank you 💙
What resolution should the image have because my jpg (922x620px) does not appear?
If you've given height and width to your img and it's still not appearing then check you img file path.
@@CodingNepal thank you ! I didn' t put one space in "section" area. Now is all right !
Tu es génial
Nice video brother. I have a problem. I use it on blogger. Everything is working fine but when I watch it on mobile menu is going down the content. Halp me brother.
... I changed one thing because there was a lot of space between the nav bar and content.
You use - height: calc(100vh - 80px);
}
And I change it to - height: calc(10vh - 80px);
}
I'm a beginner. Halp me please. ❤️
try it height: calc(100vh - 200px);
good ...
Thank you 💙
Thnak you
cool 😎
Amazing tutorial but I am unable to set a background image... What should I do?
Very nice
Thanks
very nice
Thank you.. Stay tuned 😁
i have problem with that , when its a side menu the pages are not linked to their names in the menu while they work good when on the top bar
can you tell me what should i change in that code ??
// navigation
var OnePageNavigation = function() {
var navToggler = $('.site-menu-toggle');
$("body").on("click", ".main-menu li a[href^='#'], .smoothscroll[href^='#'], .site-mobile-menu .site-nav-wrap li a", function(e) {
e.preventDefault();
var hash = this.hash;
$('html, body').animate({
'scrollTop': $(hash).offset().top()
}, 600, 'easeInOutCirc', function(){
window.location.hash = hash;
});
});
};
OnePageNavigation();
Contact on me Instagram
4:11 I have a problem! I cant see the bars at all! I put the code right but it won’t show
You positioned the ul fixed then how will you scroll the page?
In the video ..there is no content so I gave position fixed..otherwise, you can give position:absolute;
I have problems with the bar icon. When I execute my script, a CORS error appears. How can I fix it?
Why those three lines are not showing?????? Pls.. help
Most probably because your internet connection isn't available or because your browser is out of date
thanks ❤
when im viewing on chrome iphone x size if you click the menu button it only halves the menu size it doesnt take it away from the page for some reason
Yes on some devices may have responsive issues and I didn't check on all devices while creating this navbar. If you know little bit css then you can easily add media break points in particular width and these solve issues.
@@CodingNepal cheers mate
@media screen is a very useful feature
which program you are not using when writing code
Good video, but my bar button just won't work even though I did the exact jQuery script
I am also get this issue
Hey sir i cant find the code on your website can u plz just tag the exact webpage of your code. Thanks.
where can i fount that kind of pictures u used ??
Pixaby, pexels, unsplash.. I used these 3 websites for free images.
thanks
Muito bom
Make a video on youtube or google like responsive navbar.
Sure..Keep watching :)
@@CodingNepal Thanks bro❤
esta super chida la canción del video
my burger symbol is completely in the top right corner and not in line with the logo?
You can use line-height for this
#icon{
line-height: 80px;
}
Bro if I add any content that s not working or it will hide can u tell me solution of that
Plz exact link of article i don't found it on the blog
wonderful video, but you should have used pure javaScript not jQuery😔
great video! but i am confused about the bar command because i am used to designing the bars myself. is it a command or something
why there is no header? I think it will be more interessting using flex-box
please make one video eith tutorial
I followed all the steps, initially it worked and the icon appeared to me, but now it doesn't appear anymore.
Make sure you're connected to the Internet and replace the line.no 8 with this line
@@CodingNepal Thanks, I followed another tutorial of yours and I solved it
😍😍👍👍
How do all guys in tutorials just type the colour codes.....???is there trick to know the colour codes or something else
You can get codes of color from here - flatuicolors.com/
click out side and closing menu bar. how to do this
sir i am doing every thing good but still i cant sea the menu bar on screen so please help me please help me as soon as possible
The body content are getting overlapping with sidebar..can anyone help
Is it compulsory to use JavaScript?
i dont know why , when i put icon , it doesnt appear , i did get library
Great video, but the fa bars is not showing.
Nowadays font awesome CDN link/script that I provided not support so your icons may not be showing. Just replace that script tag with this
How to implement the same for sidebar?