Responsive Navigation Menu Bar using HTML CSS & JavaScript
ฝัง
- เผยแพร่เมื่อ 6 ต.ค. 2024
- 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.codingnepa...
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 ...
If your icons aren't showing, replace the line no.8 script of index.html with this:
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
I made my first responsive design 🥳
tysm🙂coding nepal
Keep it up
Too easy to make a responsive nav from ur video. Thank so much.
You're welcome.. Stay tuned 😁
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.
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!
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
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 😊
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
An amazing top bar coding tutorial. I subscribed! Hope you keep doing these great tutorials!
Amazing tutorial! Thanks for sharing!
Nevermind, I found what I was looking for in this other video from your channel th-cam.com/video/AkK8yHC4TlI/w-d-xo.html. Thanks again!
You're most welcome.
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.
Good video, but my bar button just won't work even though I did the exact jQuery script
I am also get this issue
Great sir ..... Lots of love from me ..... Pakistan 🇵🇰🇵🇰🇵🇰
Hi, do you have a video on linking buttons on HTML on a website? Thanks.
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.
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);
This video is very helpful sir❣
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 - th-cam.com/video/UHSeFxZIuv8/w-d-xo.html
@@CodingNepal Heyy nice! You're the best yooo, thanks so much for making an updated one.
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 !
Thank u for a responsive toggler navbar ☺
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
I always wondered how to do that it's so simple now with the jquery
Thank you, It's simple and clear! ☺♥
You're welcome 😊
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.
Thank u so much 😇... Specifically for font awesome cdn
4:11 I have a problem! I cant see the bars at all! I put the code right but it won’t show
JavaScript Code :
let myIcon = document.getElementById('icon');
myIcon.addEventListener('click', myToggle);
function myToggle() {
let myList = document.querySelector('ul');
//console.log(myList)
myList.classList.toggle("show");
}
Thanks for the video, it helped me alot!
You're welcome 💙😁
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.
Easy to understand good video ......keep uploading
Thank you bro... Keep watching
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 th-cam.com/video/AkK8yHC4TlI/w-d-xo.html
can u paste the coding here :)
🤣
😂😂😂😂
Lazy like me😂
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?
Thank you soo much 🥺😄
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!
Thank you soo much!!! This was very helpful!!!!
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
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;
}
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?
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;
which program you are not using when writing code
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
just awesome bro..
Thank you bro.. Stay tuned 😁
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
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 have problems with the bar icon. When I execute my script, a CORS error appears. How can I fix it?
Great job! And thanks for your share.
Thanks for watching!
Amazing tutorial but I am unable to set a background image... What should I do?
Very Good it helped me a lot!
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
why there is no header? I think it will be more interessting using flex-box
Great video bro thanks.
Glad you enjoyed it
Power of jQuery 🥶💥
Awesome 👍
Thanks for the visit
really...helpfull...thanks ...👍
You're welcome... Stay tuned 😁
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/
i followed your steps letter by letter but it wont work for me.
What didn't work?
How to implement the same for sidebar?
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
i dont know why , when i put icon , it doesnt appear , i did get library
I don't know why but when i shrink that website it is not showing more menu options. It is only showing Home button
Please help me☹️
Everything was going perfect but then that happened 🙁
And it is also not showing background, just white page and HOME showing on it 🤷🏻♂️
Contact me on Instagram - instagram.com/coding.np
@@CodingNepal ok sir
@@CodingNepal Bro, reply on insta please
Saksham.___18
😄
where can i fount that kind of pictures u used ??
Pixaby, pexels, unsplash.. I used these 3 websites for free images.
Plz exact link of article i don't found it on the blog
Sir are you using notepad or something else
It's a Atom Text Editor
@@CodingNepal its paltform independent language then it's was run in notepad/notepad++
Bro if I add any content that s not working or it will hide can u tell me solution of that
Hey sir i cant find the code on your website can u plz just tag the exact webpage of your code. Thanks.
Make a video on youtube or google like responsive navbar.
Sure..Keep watching :)
@@CodingNepal Thanks bro❤
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.
click out side and closing menu bar. how to do this
The body content are getting overlapping with sidebar..can anyone help
Is it compulsory to use JavaScript?
Thanks you very much
You're welcome 💙
subscribed, um excited for the next lesson
Awesome, thank you!
wonderful video, but you should have used pure javaScript not jQuery😔
amazing,nice ! Thanks ,I am from Azerbaijan write to you )
Please song name bata do koee jo 3:45 minutes me chal rhaa the
Song name - Unknown Brain - Why Do I
I will send my Html,CSS and image files instead so you can check the mistakes
OK send these to me on codingnepalweb@gmail.com
Can you help me to learn front end project
please make one video eith tutorial
@media screen is a very useful feature
Amazing tutorial ❤️
@media (max-width: 1048px) does not work for me!
Why you put check box?
When you make this type video. Why you playing music??
Why is that bars doesn't appear on my screen :(
Instead of music and song, if you explain what are you doing and how.. that would had been better
Nice 😊
Thanks 😊
good lesson i appreciate that.
I can't found source code on your website
Here is a link - www.codingnepalweb.com/2020/04/responsive-menu-bar-in-html-css.html
i cant find the source code on your website
If you haven't found codes on my... Please contact on me Instagram.
Which IDE tool ia used for this code..
I think vs code
it is not fully responsive
in iphone X also it is not responsive please
@media (max-width: 375px) {
nav #icon {
display: block;
border: 0;
margin: 0;
padding-right: 30px;
}
label.logo {
padding-left: 30px;
}
}
@media (max-width: 333px) {
nav #icon {
border: 0;
padding: 0;
padding-right: 25px;
}
label.logo {
padding-left: 15px;
}
}
ADD THIS MEDIA TAG IF YOU WANT IT FULLY RESPONSIVE :)
Yes you have to add some media breakpoints according to the device width.
Awesome but I can't find the source code on your website help
You can contact me on Instagram if codes not found.
@@CodingNepal I contacted you but you didn't replied
great video, short and well done!
Bhai JQuery use karte ho likhte ho java script
Thank you so much for sharing!
Subscribing to your channel :)
Thank you for subscribing 😄
What package you are using on that atom???
Here is the video of my text editor - th-cam.com/video/55VjXTeYkTE/w-d-xo.html
U r doing awesome
No flexbox?
Very nice bro👍👍❤️❤️❤️❤️