Responsive Navbar Tutorial In React JS
HTML-код
- Опубликовано: 22 фев 2022
- Responsive Navbar Tutorial In React JS
In this video I'm gonna show you how you can create a responsive navbar in react js.
----------------------------------------------------------------------------------------
Source code: github.com/Index-Zero-0/Respo...
Please LIKE and SUBSCRIBE for more content and supporting!
#responsivenavbar#navbar#reactjs#reactjstutorial
Simple and straightforward, all tutorials had to be like this, congratulations!
Amazing tutorial mate, thank you.
He just earned my subscription, great tutorial.
This tutorial has solved my react responsive challenge. Many thanks
Simply The best RUclips video on this Topic.
But a suggestion would be for you to change your intro part with you talking because it seems the video has an audio of Music not your Explanation.
Very Nice explanation and you did a great work
Great! Thanks for helping
Thanks Bro... Excelent Tutorial!
great tutorial! thank you a lot for helping me fix this in my page
Great tutorial ...Thanks man !
Guys....
use "display:none" instead of "visibility:none"
visibility:hidden hides the element, but it still takes up space in the layout. display:none removes the element from the document. It does not take up any space.
Yes, It's true. I first used visibility and it was giving me problems as you said so I later used display: none;
Thanks! You just answered my question before I asked it lol
Thank you for this tutorial.
Very helpful thanks ❤🎉
Great tutorial thank you!!
Great tutorial. I would suggest explaining briefly what a font icon is for people with less experience (ex. The Font Icons are a subset of icon groups that you can access through the react-icons package)
Thank you for share your knowledge :)
Wow Awesome tutorial
💥💥💥💥💥
Thank you Bro !!!
great tutorial thank you so much
thank you very much! God bless you
Thanks ❤️
Thank you!
in case you are using react LINK .. you have to execute the following on onClick
const hideNavbar =()=>{
navRef.current.classList.remove("responsive_nav")
}
otherwise, navbar won't close in responsive view when user clicks on the nav link
Bro you saved my day
@@learningtocode4261 😅😅
thanks👍
Where will it put, inside the onClick function.
I entered the hidenavbar function inside onClick, it got error.
Will you please help me out
@@athul__4614 check it well because i tried the same thing and it worked for me
great. thank you
Thanks!!
buddy you need to increase your font size cause when we use split screen while practising i don't think its easier to read
thank you so much
Nice video bro
good job ♥
Thanks a lot))
thank u so much sir
Very nice video
Thank you
thanks bro 👍 👍
Good!!
NICE🎉
thank you
Beauty nav
Awesome.....:)
Hi, I'm just curious why did you use href on the menu links instead of nav link?
Love this tutorial, im new in react and im trying to figure out how can I navigate through pages when I press the
For navigating between pages use "React router".
Great tutorial, everything works as it should, but I want to get rid of the transition when the window gets smaller (the menu going up) and can't figure out how. I've tried explicitly setting "transition: none" everywhere but no effect, can anyone help?
I'v fixt it you can check the source code again
Hello! Where can I find the code? I have some errors and I don't know how to fixed them
how do i input submenus into this and to make the submenus look different for both mobile and desktop
Why I have an error with pressing the button and says can not read properties of undefined (reading class list)
Awesome tutorial! Thank you so much. But i have a problem, why is my error code indicating that useRef is not defined?
Did you import it?
@@index-zero I have imported and there's another error hat's popped up, the error reads: React Hook "useRef" is called in function "navbar" that is neither a React function component nor a custom React Hook function. React component names must start with an uppercase letter. React Hook names must start with the word "use"
@@teenawinsor4982 useRef didnt worked for me so i guess its better to use useStatge and useEffect witch worked for me u can check these hooks code on stackoverflow
Please help me. I need to make the hamburger menu appear since the beginning. And the functionality to be the same. Can you please help me ??
quick question great video btw! when i ran my code I came across this error that says ./src/App.js module not found: cant be solve './components/Navbar/Navbar'
control the path of navbar component
and how to add other pages to navbar for navigation ?????????
I noticed that the hamburger menu does not disappear when clicked on
i have a problem
actually i am using navLink so when i click on navLink navbar is still open so please tell me what i have to do
for auto close navbar when i click on any navLink
Add this "onClick={showNavbar}" to your navlinks.
how to implement using jsx file instead of using js file as a component?
jsx and js are the same thing.
at least you have to give us a source code
Anyone know how he typed "ffc" and got a skeleton of a component on the screen?
when im resizing the window animation of transition is playing, what i supossed to do to fix that?
you have the same problem on the video time-code 19:29 19:34
I wonder the same!
so how to fix it?
I do not think that's an issue coz when we implement it in an actual project, users won't constantly change screen sizes, that can only be done in desktop when resizing or using in screen pop-ups in tablets/phones, so mostly screen size would be static, hence we just have to ensure proper functioning in constant screen size, although I do not know how to fix that too
but how can i create new empty react file? sorry imma newbie in this:)
When the screen size is minimized and i press the fabars. It doesn't display the nav items. I've checked the codes multiple times. Not sure what to do.
Same
If you will figure it out please tell me
Got it! make sure that the spelling of responsive_nav is the same in css and js :D
add onClick on both button with the same value
This doesn't work with module css files
When clicking the links, the menu does not hide again 🤣 we have to implement that behaviour
Exactly😢 it is so irritating
I'm getting this error: TypeError: Cannot read properties of null (reading 'classList')
I just tried , but can't fix it
please has this been resolved?
i have issues with it too
same error
My useRef isn't working. When I click on the navbar icon it doesn't respond. Can I get help please? Thanks.
Did you import it properly?
Awesome tutorial but please I need a help what if I want to move the nav link to right side not center on the desktop view how can I please will be glad if anyone can be of help
move Logo inside nav and add this to css:
nav h3 {
display: inline-block;
margin-right: 1rem;
}
@@index-zero thanks for taking your time to reply but please after i did as u said at desktop view it move both the logo and link to the left side not right and on media view it move the icon to the left side also looking forward to hear from you please
@@agboluajelateef7467 In that case change the return in then Navbar component to:
Home
My work
Blog
About me
LOGO
then remove nav h3 {
display: inline-block;
margin-right: 1rem;
}"
and add these styles :
header div,
nav {
display: flex;
align-items: center;
}
@@index-zero thanks so so much it now work but the changes I made is i just put the nav link inside a div and Add CSS as u said now what I need thanks
please sir, why did you use visibility: "hidden" and not display: "none"
visibility: "hidden" will hide it but it's still included in the DOM (Document Object Model) / "your website"
while the display: "none" will completely remove it from the DOM.
My buttons didn't work to drop down the nav or remove the nav
Chech the call back function that runs when you click the button also check the css file and see if it is correct.
Okay i will do that once I'm home
I enjoyed the video you where not fast
how to add route with this navbar ?
First import Link from react router then just change a tags to Link.
@@index-zero icant bro , can u help me ? u have discord or smtng ? , wen i import the router, the navbar is gone
@@muhammadajiefarhanedopange9568 ruclips.net/video/bdOHxlrS5UM/видео.html&ab_channel=TovCode
واضح انك عربي
اتوقع ايراني مو عربي من اللهجة مبين
why didn't show the screen. you just write and after that show us...
u even didnt click on some button....
Using classlist with react ?? really ??
DON'T WASTE YOUR TIME! This video shows a full-screen navbar and not a sidebar.
The video is really helpful, besides you could implement a sidebar by tweaking the code and using translateX()
@@lenduking I found it useless
videos without source code are useless just sayin
Thank you
thank you