Navbar

Topic: Navbar

Mugetsu free asked 6 years ago

Hello. I recently discovered MDB and I want to use it in my project but currenty Im having some problems with the navbar.. First one is that when I do have NavbarBrand with some custom name and image I want to hide the name on view ports with max-width: 768px. I was unable to achieve this with the class .d-sm-none nor d-md-none. Seems like they dont work. The .d-lg-none and bigger are working... Secondly I feel like the navbar hamburger menu misses core functionality... For me in thesedays the approiate behaviour of the hamburger menu on small devices should be like:

when its open and I click some navlink or dropdownitem it should redirect me to specific page and close the navbar collapse
when its open and I do click outside it it should collapse.

Currently im able only to close collapse when its open by clicking on hamburger icon whis is ...... bad.. How to get my desired behaviour?? P.S. Also I didn't implemented yet the react-router but wondering if clicking on any navitem would always refresh whole page ? If yes how to avoid it.

Add comment

Jakub Strebeyko staff answered 6 years ago

1 0 Best answer

Hi there,

You specify the components rendered upon clicking the <NavLink> (that take in a to path prop) in a Routes.js file, in Routes' component render() method, as <Switch> children. I think you could find our app's a helpful example - just see docs/App.js and docs/Routes.js.

With Best Regards,
Kuba

Add comment

pcdavis pro answered 6 years ago

0 0 Best answer

How do you specify the <Route path="/" component={Home} /> or <Route path="/product" component={Product} /> ???

Add comment

Jakub Strebeyko staff answered 6 years ago

0 0 Best answer

Hi there Magetsu,

Thanks for reaching out and contributing to the forum! To answer your questions in order:

1. The functionality you describe first - different display utilities applied to different elements <strong>within</strong> <code>NavbarBrand</code> - is just not there yet. The component is rather straight-forward for the time being, but thanks for suggestion - we just might consider it.

2. We also appreciate you sharing your thoughts on modern hamburger menus - <em>food for thought</em>. To achieve the desired design (having a navbar menu collapse with clicking away), I suggest creating a fully transparent overlay component with a click event (that would be collapsing the menu, for example "<code>handleOverlayClick()</code>") and displaying it beneath the dropped down navigation.

3. React Router is fun to use and it's fully React-y: clicking on a link does not necessarily re-render the whole page, what's more - you as a developer can decide on what changes and what stays. A great tool.

With Best Regards,
Kuba

Please insert min. 20 characters.

Hi there Magetsu, Thanks for reaching out and contributing to the forum! To answer your questions in order: 1. The functionality you describe first - different display utilities applied to different elements within NavbarBrand - is just not there yet. The component is rather straight-forward for the time being, but thanks for suggestion - we just might consider it. 2. We also appreciate you sharing your thoughts on modern hamburger menus - food for thought. To achieve the desired design (having a navbar menu collapse with clicking away), I suggest creating a fully transparent overlay component with a click event (that would be collapsing the menu, for example "handleOverlayClick()") and displaying it beneath the dropped down navigation. 3. React Router is fun to use and it's fully React-y: clicking on a link does not necessarily re-render the whole page, what's more - you as a developer can decide on what changes and what stays. A great tool. With Best Regards, Kuba

pcdavis pro commented 6 years ago

Where do you specify what components show up when clicking on NavLinks? I have a single page app and need it to show different components based on the link they click.

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: Yes
Provided link: No

Mugetsu

2Support score
6Questions 0Answers 0Snippets