Homepage name appears behind the AppBar, How do I fix this?

Question

I have an appBar and the homepage would appear behind the appbar. I wanted it to appear below it. This is what it looks like:

The AppBar codes:

const Header = () => {
  const [value, setValue] = React.useState(0);

  const handleChange = (event, newValue) => {
    setValue(newValue);
  };

  //Breakpoints
  const theme = useTheme();
  const isMatch = useMediaQuery(theme.breakpoints.down("md"));
  return (
    <div>
      <AppBar>
        <Toolbar>
          {/* //or just change this typography to an icon or picture */}
          <Typography>Website</Typography>
          {isMatch ? (
            <h1>
              <DrawerComponent />
            </h1>
          ) : (
            <Tabs
              value={value}
              indicatorColor="secondary"
              onChange={handleChange}
              aria-label="simple tabs example"
            >
              <Tab disableRipple label="Homepage" to="/" component={Link} />
              <Tab disableRipple label="Login" to="/login" component={Link} />
              <Tab disableRipple label="Settings" />
              <Tab disableRipple label="Sample1" />
              <Tab disableRipple label="Sample2" />
              <Tab disableRipple label="Sample3" />
            </Tabs>
          )}
        </Toolbar>
      </AppBar>
    </div>
  );
};

export default Header;

I need to put a <br/> just to see the homepage:

const Homepage = (props) => {
  return (
    <section>
      <br />
      <h1>Homepage</h1>
    </section>
  );
};

export default Homepage;

And I have this drawerComponent for small screen sizes, it even got worse, you won't be able to see any message anymore not unless there will be a lot of <br/> before the message.

const DrawerComponent = () => {
  const useStyles = makeStyles((theme) => ({
    drawerContainer: {},
    iconButtonContainer: {
      marginLeft: "auto",
      color: "white",
    },

    menuIconToggle: {
      fontSize: "3rem",
    },
    link: {
      textDecoration: "none",
    },
  }));

  const [openDrawer, setOpenDrawer] = useState(false);

  //Css
  const classes = useStyles();
  return (
    <div>
      <Drawer
        anchor="left"
        classes={{ paper: classes.drawerContainer }}
        onClose={() => setOpenDrawer(false)}
        open={openDrawer}
        onOpen={() => setOpenDrawer(true)}
      >
        <List className={classes.link}>
          <Link to="/">
            <ListItem divider button onClick={() => setOpenDrawer(false)}>
              <ListItemIcon>
                <ListItemText> Homepage</ListItemText>
              </ListItemIcon>
            </ListItem>
          </Link>

          <Link to="/login">
            <ListItem divider button onClick={() => setOpenDrawer(false)}>
              <ListItemIcon>
                <ListItemText> Login</ListItemText>
              </ListItemIcon>
            </ListItem>
          </Link>
          <ListItem divider button onClick={() => setOpenDrawer(false)}>
            <ListItemIcon>
              <ListItemText>Sample</ListItemText>
            </ListItemIcon>
          </ListItem>

          <ListItem divider button onClick={() => setOpenDrawer(false)}>
            <ListItemIcon>
              <ListItemText> Sample</ListItemText>
            </ListItemIcon>
          </ListItem>
        </List>
      </Drawer>

      <IconButton
        edge="end"
        className={classes.iconButtonContainer}
        onClick={() => setOpenDrawer(!openDrawer)}
        disableRipple
      >
        <MenuIcon className={classes.menuIconToggle} />
      </IconButton>
    </div>
  );
};

export default DrawerComponent;

score 1 · Accepted Answer · answered Aug 04 '21 at 07:54

A way around this would be to add a margin-top or a padding-top to your homepage component equal to the height of the appbar.

Yet, a better approach would be ro use the following CSS properties on your appBar.

.app-bar {
  position: sticky;
  top: 0;
}

This will make your appbar stick to the top and will automatically adjust the height of its following DOM elements.

score 0 · Answer 2 · answered Aug 04 '21 at 07:50

This post may answer your question: Creating a navbar with material-ui

You can either try:

Using CSS to implement padding-top (use "em" instead of "px" for a responsive padding height)
Reorganising your React components, making sure that the header (appbar) is not in the page, but rather a component at the same level (refer to the post linked above)

Homepage name appears behind the AppBar, How do I fix this?

2 Answers2