Topic: React navbar example not appearing as in demo
Jakub Strebeyko staff answered 7 years ago
Hi there Adam,
Welcome to the support board! And hey - it's not about you missing something, you're perfect the way you are. And thanks, it turns out that the example, in turn, was missing a few things, including the essential left
/ right <NavbarNav>
props and appropriate inline styling of the input. Check it out now.
With Best Regards,
Kuba
adamm answered 7 years ago
Hey Kuba,
Thanks for the update (and general motivation haha), still think there may be something not quite right with it though.
Here (https://ibb.co/nPRfsH) is a screenshot I took after setting up a brand new CRA project, and following the getting started guide. Still seems alignment is off, colours aren't quite right and the input still doesn't have the click effect like the buttons do.
Cheers,
Adam
Jakub Strebeyko staff commented 7 years ago
Hey Adam, Your perseverance is already making MDB better! The example has been fixed already (again), the issue was in the<NavbarNav>
still holding its className - getting rid of it allows for the left
prop to work properly and align the elements within. When it comes to the color, both navbars (I mean the one created with the snippet and the one in the docs) are using the .indigo
class, dying them in the beautiful #3f51b5
. Finally, regarding the input - you are right. The input field in the <Navbar>
is merely an html element, and as such does not provide wave effects as a full-fledged inline MDB form element would - but we're getting there, creating it is scheduled. Before that - I am sure you could fiddle with the insides of src/
and achieve the effect you're after yourself - just see how wave effect is applied to your favorite wave-y components and do the same for a custom input element. Just a thought!
Take Care,
Kuba
FREE CONSULTATION
Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.
Answered
- User: Free
- Premium support: No
- Technology: MDB React
- MDB Version: -
- Device: -
- Browser: -
- OS: -
- Provided sample code: No
- Provided link: No