Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Dock App Bar to top of window in react material ui

In React material ui, how do you make app bar fixed so that it stays fixed while the rest of the page scrolls?

like image 405
Dave Ford Avatar asked Apr 27 '17 02:04

Dave Ford


2 Answers

Just add a position: fixed !important; css (inline or with external css) to your AppBar component. The !important is needed if you use external css to force overriding the style defined in material-ui. Don't forget to set margin-top to your content because it will get pushed to the top.

like image 174
Rooco Avatar answered Oct 18 '22 00:10

Rooco


Don't know if this feature is just new but you don't need the code above. Just add a position="fixed" attribute to your <AppBar />

return (
  <div className={classes.root}>
    <AppBar position="fixed">
      <Toolbar>
        <IconButton className={classes.menuButton} color="inherit" aria-label="Menu">
          <MenuIcon />
        </IconButton>
        <Typography variant="title" color="inherit" className={classes.flex}>
          Title
        </Typography>
        <Button color="inherit">Login</Button>
      </Toolbar>
    </AppBar>
  </div>
);

Adjusted example from: https://codesandbox.io/s/yw67vxwo69 (demo.js)

like image 41
Fabian Avatar answered Oct 17 '22 23:10

Fabian