react navbar howto collapse and adjust navbar height

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

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>
        );
    }


}

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();