react navbar howto collapse and adjust navbar height


Topic: react navbar howto collapse and adjust navbar height

bgining2this asked 6 years ago

Hello everyone.-

Im new to MDB and i am trying it with npm and react, the examples from your website dont work for me with a MDBNavbar when i click the toggle button, which is only a line, it doesnt collapse, and all my MDBNavLinks doesnt "disappear", they are still visible, also the MDBNavLinks are the whole with of the web page, dont know how to explain this, they are not only "buttons" they are the whole wide of the page. In the same Navbar i have added a MDBNavbarNav with a right aligment, but it stays always at the bottom, it doent collapse, disappear, and it is not neither at the right of all the Navbar. Unfortunately theres very few working examples of MDB in react, so i dont know how to fix this, any help would be awesome, thank you.


Jakub Mandra staff premium answered 6 years ago

Hi,

Could you please send us link to example repo with your code so we could debug, or chunks of code like: src/index.js and your main App component code?

I think there is a problem with css imports. You can find informations about how to implement mdbreact in your project here. If you installed mdbreact by npm in your existing project, you also have to do step 4 from the guide:

Import style files into the src/index.js before the App.js file:

import "@fortawesome/fontawesome-free/css/all.min.css";
import 'bootstrap-css-only/css/bootstrap.min.css'; 
import 'mdbreact/dist/css/mdb.css';

Best,

Jakub


bgining2this commented 6 years ago

The code is from your React and navbar section code, heres my component, i have modified it slightly in order to make it work, my index.js is nothing special, but i dont have any bootstrap or MDB css there. As you say maybe its a css problem now that i analyze it. If you can tell me aditional tips it would be great !!! Btw you should make this info more accesible to everyone, your site is good but excellent content is more dificult to find in it.


import React, { Component } from 'react';
import { MDBNavbar, MDBNavbarBrand, MDBNavbarNav, MDBNavItem, MDBNavLink, MDBNavbarToggler, MDBCollapse } from 'mdbreact';
import styles from './Navega.css';
import 'mdbreact/dist/css/mdb.css';

export default class Navega extends Component { constructor(props) { super(props); this.state = { isOpen: false }; }

    toggleCollapse = () => {
        this.setState({ isOpen: !this.state.isOpen });
    }

    render() {
        return (
            <MDBNavbar className={ styles.topnavcollapse } style={{ backgroundColor: '#FF0100' }} dark expand='md'>
                <MDBNavbarBrand>
                    <strong className="black-text">PGB</strong>
                </MDBNavbarBrand>
                <MDBNavbarToggler onClick={this.toggleCollapse}>Cerrar / Abrir</MDBNavbarToggler>
                    <MDBCollapse id='navbarCollapse3' isOpen={ this.state.isOpen } navbar>
                        <MDBNavbarNav style={{ listStyleType: 'none' }} className='ml-auto, text-justify, text-center' left>
                            <MDBNavItem style={{ width: '45' }}active>
                                <MDBNavLink className='nav-link, black-text' style={{ textDecoration: 'none' }} to='/'>home</MDBNavLink>
                            </MDBNavItem>
                            <MDBNavItem>
                                <MDBNavLink className='nav-link, black-text' style={{ textDecoration: 'none' }} to='/whoweare'>Quienes Somos ?</MDBNavLink>
                            </MDBNavItem>
                            <MDBNavItem>
                                <MDBNavLink className='nav-link, black-text' style={{ textDecoration: 'none' }} to='/services'>Seguros</MDBNavLink>
                            </MDBNavItem>
                            <MDBNavItem>
                                <MDBNavLink className='nav-link, black-text' style={{ textDecoration: 'none' }} to='/contact'>Contacto</MDBNavLink>
                            </MDBNavItem>
                        </MDBNavbarNav>
                        <MDBNavbarNav style={{ listStyleType: 'none', textDecoration: 'none', backgroundColor: '#1793D1', ':hover': { backgroundColor: '#52ba31' } }} right>
                            <MDBNavItem>
                                <MDBNavLink className='nav-link, black-text, text-center, text-justify' to='#!'>Admin Login</MDBNavLink>
                            </MDBNavItem>
                        </MDBNavbarNav>
                    </MDBCollapse>
            </MDBNavbar>
        );
    }


}

bgining2this commented 6 years ago

Ok with the addition of the css, things are much better, but .-It collapses correctly !!!

1.- The navbar is of a "fixed" width, why ? Maybe becouse of my Layout ? I can see the navbar better in cellphones or tablets than in the whole desktop.2.- Do you happen to know how i can create a hover effect in the navbar ? As you can see in my code i try to do that but with no luck.

Btw Thank you !!!!


Jakub Mandra staff premium answered 6 years ago

Ok, I see that you have attached 'mdbreact/dist/css/mdb.css';, but those styles are made on the base of Bootstrap. That means, to work properly it needs all the 3 imports, which I mentioned in first answer. Then the hover effect should work too, generally the navbar will look and behave exactly as on the live preview.

Here is the sample index.js with mdbreact necessary imports in create-react-app template:

import React from 'react';
import ReactDOM from 'react-dom';
import "@fortawesome/fontawesome-free/css/all.min.css";
import 'bootstrap-css-only/css/bootstrap.min.css'; 
import 'mdbreact/dist/css/mdb.css';
import './index.css';
import App from './App';
import * as serviceWorker from './serviceWorker';

ReactDOM.render(<App />, document.getElementById('root'));

// If you want your app to work offline and load faster, you can change
// unregister() to register() below. Note this comes with some pitfalls.
// Learn more about service workers: http://bit.ly/CRA-PWA
serviceWorker.unregister();

Please insert min. 20 characters.

FREE CONSULTATION

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

Status

Answered

Specification of the issue
  • User: Free
  • Premium support: No
  • Technology: MDB React
  • MDB Version: 4.8.4
  • Device: navbar
  • Browser: Chromium
  • OS: Arch Linux
  • Provided sample code: No
  • Provided link: No