React navbar example not appearing as in demo

Topic: React navbar example not appearing as in demo

adamm free asked 6 years ago

I copied and pasted the basic Navbar example from https://mdbootstrap.com/react/components/navbar into a brand new CRA project after following the Getting Started instructions (and installing React Router). The resulting navbar isn't the same as the example.The links/search input are spread out evenly across the entire bar, and the input is unstyled (beyond the ordinary bootstrap style) and has no click effect or border colouring. Have I missed something in the example?

Add comment

adamm free answered 6 years ago

0 0 Best answer

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 6 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

Hey Adam,

Your perseverance is already making MDB better! The example has been fixed already (again), the issue was in the <code><NavbarNav></code> still holding its className - getting rid of it allows for the <code>left</code> 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 <code>.indigo</code> class, dying them in the beautiful <code>#3f51b5</code>. Finally, regarding the input - you are right. The input field in the <code><Navbar></code> 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 <code>src/</code> 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

Please insert min. 15 characters.

Add comment

Jakub Strebeyko staff answered 6 years ago

0 0 Best answer

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

Add comment

Write

Create snippet

FREE CONSULTATION

Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.

Status

Answered

Specification of the issue

ForumUser: Free
Premium support: No
Technology: MDB React
MDB Version: -
Device: -
Browser: -
OS: -
Provided sample code: No
Provided link: No

adamm

12Support score
1Questions 1Answers 0Snippets