Broken navbar

MadFox asked 5 years ago

Hello, I just moved from bootstrap to mdbootstrap. I copied navbar from example and looks like it broken for me.Preview


Piotr Glejzer staff commented 5 years ago

Can you paste your code about this example? Thanks.


MadFox answered 5 years ago

import React, { Component, lazy, Suspense } from 'react';

import { BrowserRouter, Switch, Route } from 'react-router-dom'; import './index.css' import Home from './pages/Home'; import About from './pages/About'; import Contacts from './pages/Contacts'; import NotFound from './pages/404'; import Loader from './utils/Loader'; import Social from "./pages/Social"; import GAListener from "./utils/Analytics"; import 'mdbreact/dist/css/mdb.css'; import { MDBNavbar, MDBNavbarBrand, MDBNavbarNav, MDBNavbarToggler, MDBCollapse, MDBNavItem, MDBNavLink } from 'mdbreact';

const Vote = lazy(() => import('./pages/Vote')); const Bans = lazy(() => import('./pages/Bans')); const Store = lazy(() => import('./pages/Store')); const Discord = lazy(() => import('./pages/Discord')); const Feedback = lazy(() => import('./pages/Feedback')); const Rules = lazy(() => import('./pages/Rules'));

class App extends Component { constructor(props) { super(props); this.state = { collapse: false, }; this.onClick = this.onClick.bind(this); }

onClick() {
    this.setState({
        collapse: !this.state.collapse,
    });
}

render() {
    return (
        <BrowserRouter>
            <Suspense fallback={<Loader/>}>
                <GAListener trackingId="UA-134218895-3">
                    <div>
                        <header>
                            <MDBNavbar color="indigo lighten-1" dark expand="md" fixed="top" scrolling>
                                <MDBNavbarBrand href="/">
                                    <strong>LaserFlare Network</strong>
                                </MDBNavbarBrand>
                                <MDBNavbarToggler onClick={this.onClick} />
                                <MDBCollapse isOpen={this.state.collapse} navbar>
                                    <MDBNavbarNav left>
                                        <MDBNavItem active>
                                            <MDBNavLink to="/">Home</MDBNavLink>
                                        </MDBNavItem>
                                        <MDBNavItem>
                                            <MDBNavLink to="/vote">Vote for us!</MDBNavLink>
                                        </MDBNavItem>
                                        <MDBNavItem>
                                            <MDBNavLink to="/bans">Bans</MDBNavLink>
                                        </MDBNavItem>
                                        <MDBNavItem>
                                            <MDBNavLink to="/discord">Discord</MDBNavLink>
                                        </MDBNavItem>
                                        <MDBNavItem>
                                            <MDBNavLink to="/social">Social</MDBNavLink>
                                        </MDBNavItem>
                                        <MDBNavItem>
                                            <MDBNavLink to="/contacts">Contacts</MDBNavLink>
                                        </MDBNavItem>
                                        <MDBNavItem>
                                            <MDBNavLink to="/feedback">Feedback</MDBNavLink>
                                        </MDBNavItem>
                                        <MDBNavItem>
                                            <MDBNavLink to="/rules">Rules</MDBNavLink>
                                        </MDBNavItem>
                                        <MDBNavItem>
                                            <MDBNavLink to="/store">Store</MDBNavLink>
                                        </MDBNavItem>
                                    </MDBNavbarNav>
                                </MDBCollapse>
                            </MDBNavbar>
                        </header>
                        <Switch>
                            <Route exact path='/' component={Home} />
                            <Route path='/vote' component={Vote} />
                            <Route path='/bans' component={Bans} />
                            <Route path='/contacts' component={Contacts} />
                            <Route path='/social' component={Social} />
                            <Route path='/store' component={Store} />
                            <Route path='/discord' component={Discord} />
                            <Route path='/feedback' component={Feedback} />
                            <Route path='/rules' component={Rules} />
                            <Route path='/about' component={About} />
                            <Route component={NotFound} />
                        </Switch>
                        <footer className="page-footer font-small blue">
                            <div className="footer-copyright text-center py-3">© 2019 Copyright:
                                <a href="https://laserflare.net"> LaserFlare</a>
                            </div>
                        </footer>
                    </div>
                </GAListener>
            </Suspense>
        </BrowserRouter>
    );
}

}

export default App;


Piotr Glejzer staff answered 5 years ago

I tested code from navbar examples in our snippets and everything going well with our code. Check this please --> https://mdbootstrap.com/snippets/react/piotr-glejzer/1129095

You probably have some bugs in your code.


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.19.0
  • Device: Desktop
  • Browser: Chrome
  • OS: Windows
  • Provided sample code: No
  • Provided link: Yes
Tags