CODEWITHSUNDEEP
reactjsmaterial-ui
Dave Ford
Dave Ford

Reputation: 1974

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?

Upvotes: 8

Views: 11929

Answers (2)

Fabian
Fabian

Reputation: 3408

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)

Upvotes: 5

Rooco
Rooco

Reputation: 128

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.

Upvotes: 3

Related Questions