Material UI Drawer won't move under Appbar

Question

I have an Appbar and a drawer right beneath it. Under both components I have 3 divs with bootstrap and in each div I have a group of buttons.

The problem is that the Drawer covers the Appbar and I just can't seem to move it.

Here's my code:

<div className="App">

        <AppBar position="static">
          <Toolbar>
              <IconButton color="inherit" aria-label="Menu">
                <MenuIcon />
              </IconButton>
              <Typography variant="title" color="inherit" aria-label="Menu">
                title
              </Typography>
          </Toolbar>
        </AppBar>

        <Drawer
          variant="permanent"
          style={{width: '100%', zIndex: '1400', position:'absolute'}}
        >
          <Button>1</Button>
          <Button>2</Button>
          <Divider />
          <Button>1</Button>
          <Button>2</Button>
        </Drawer>
        <br />
        <div className="container-full">
          <div className="row">
            <div class="col-sm-6">  
              <GridList cellHeight={50} className={styles.gridList} cols={5}>

                <Button style={{width: '150px', border: '1px solid'}} variant="raised" color="primary">
                  <div 
                  style={{fontSize:'12px', display: 'flex', justifyContent: 'center', textAlign:'center'}}>
                    Mohnweckerl Wiener Gouda
                  </div>
                </Button>

After the first bootstrap column, another "col-sm-4" follows and then a "col-sm-2". The buttons are in a GridList

Here's a visual

The Drawer should start where the arrows meet.

Any ideas?

Try to make the z-index of the drawer less than the z-index of the app bar (you'll probably need to use !important for it to have any effect). You'll need to add padding of 56px to the top of the drawer as well. — sme
If I add paddingTop:56 or padding:56to the drawer, it just pushes my buttons down. The drawer stays as it is. — Claim
Right, so you will also need to either increase the z-index of the navigation bar, or decrease the z-index of the drawer. ie, say you want to increase the z-index of the navigation bar. you can use z-index: 24 !important; — sme
<AppBar position="absolute" style={{zIndex: 24}}> and the drawer inline style={{position:'relative', zIndex: 1, paddingTop:'56px !important'}} - looks like this — Claim
edit: Sorry, I misread your comment. Let me look into it real quick — sme

Jules Dupont Jules Dupont · Accepted Answer · 2018-03-01T16:04:44

The Material-UI docs call that a Drawer that's been clipped under the app bar. To achieve it, you first have to define a z-index for your AppBar your styles object:

const styles = theme => ({
  appBar: {
    // Make the app bar z-index always one more than the drawer z-index
    zIndex: theme.zIndex.drawer + 1,
  },
});

And then apply that to the AppBar component:

<AppBar position="absolute" className={classes.appBar}>

Since your drawer is now underneath the AppBar, you'll need to move the content in the drawer down the screen so that it is not hidden underneath the bar. You can accomplish that with theme.mixins.toolbar. First, add the toolbar styles:

const styles = theme => ({
  appBar: {
    zIndex: theme.zIndex.drawer + 1,
  },
  // Loads information about the app bar, including app bar height
  toolbar: theme.mixins.toolbar,
});

Then, add the following div as the very first piece of content in your drawer:

<Drawer>
  // Make sure this div is the first piece of content in your drawer
  <div className={classes.toolbar} />

  // Put your other drawer content here like you normally would
</Drawer>

The toolbar style will load information about the app bar height from the current theme and then size the div so that it ensures the content doesn't get hidden by the app bar.

You can find a full code sample here.

Material UI Drawer won't move under Appbar

1 Answers