ReactJS component going behind Navbar

Question

In my React app, I have a navigation bar on top. I call this Navbar component in App.js as shown below.

export default function App() {
   return (
      <Router>
         <Fragment>
            <Navbar />
            <Route exact path="/" component={Home} />
            <section>
               <Switch>
                  <Route exact path="/login" component={Login} />
                  <PrivateRoute exact path="/dashboard" component={Dashboard} />
               </Switch>
            </section>
         </Fragment>
      </Router>
   );
}

The problem is that, whenever I hit any of these URLs like '/login', '/dashboard', The component associated with them renders behind the navbar and not below it. While I can add multiple <br/> tags below <Navbar />to shift these components below, but this does not seem like a good solution as some components already have significant whitespace above them and adding <br/> will shift them even further below which I don't want. How to solve this issue? My other components return simple <div>. My Navbar is a <Appbar position='fixed'> from the material-ui/core library.

Try to add style to your NavBar component. It needs to be display: "flex"; flex: 1; — Hurobaki
– Hurobaki, Commented Jan 5, 2020 at 14:04

Andrew Hill · Accepted Answer · 2020-01-05 14:17:04Z

The official Material UI documentation covers this specific issue in detail: https://material-ui.com/components/app-bar/#fixed-placement

If you use Fixed Placement on a Material UI AppBar you will need to offset your content by either including a second empty <Toolbar /> component below the appbar or by using theme.mixins.toolbar CSS.

Solution A using a second <Toolbar /> component:

function App() {
  return (
    <React.Fragment>
      <AppBar position="fixed">
        <Toolbar>{/* content */}</Toolbar>
      </AppBar>
      <Toolbar />
    </React.Fragment>
  );
}

Solution B using theme.mixins.toolbar:

const useStyles = makeStyles(theme => ({
  offset: theme.mixins.toolbar,
}))

function App() {
  const classes = useStyles();
  return (
    <React.Fragment>
      <AppBar position="fixed">
        <Toolbar>{/* content */}</Toolbar>
      </AppBar>
      <div className={classes.offset} />
    </React.Fragment>
  )
};

MUI also suggests using position="sticky" instead to avoid this issue; however this is not supported in IE11 so use with caution.

Sandesh Gawas · Accepted Answer · 2023-09-06 16:20:19Z

1

Yes, it is because you may have used fixed-top class if using bootstrap or other similar css property. I was also having same issue for below code, after removing fixed-top class its working fine now.

answered Sep 6, 2023 at 16:20

Sandesh Gawas

111 bronze badge

Collectives™ on Stack Overflow

ReactJS component going behind Navbar

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related