Material ui appbar doesn't scale down when on mobile

Question

I have created a material-ui appbar at the top of my website like this: Website Appbar

When I scale the website to a mobile size, the Appbar is not responsive to the screen: Appbar when in mobile size

Here is the code on how my appBar is designed:

  <MuiThemeProvider theme={theme}>
        <AppBar color="primary" style={{ position: 'absolute' }} >
          <Toolbar style={{ marginRight: 'auto', marginLeft: 'auto' }}>
            <Button basic href="http://localhost:3006/home">
              <Image
                spaced="left"
                height="40px"
                floated="left"
                verticalAlign="middle"
                src="https://admin.neruti.com/wp-content/uploads/2017/11/neruti_logo_inverted_400x400.png"
                alt="logo"
              />
            </Button>

            {menu.items.map((item) => {
          if (item.menu_item_parent === '0') {
            const menuList = menu.items.filter(
              i => i.menu_item_parent === item.ID.toString(),
            );
            if (menuList.length === 0) {
              return (
                <Button
                  style={{ marginRight: '3vw', color: '#D8EDFE' }}
                  as="a"
                  key={item.ID}
                  link
                  href={`/${item.url.split(config.wp_url)[1].slice(0, -1)}`}
                >
                  {item.title}
                </Button>
              );
            }

            return (
              <div>
                <Button style={{ marginRight: '3vw', color: '#D8EDFE' }}>
                  <Dropdown item text={item.title} key={item.ID}>
                    <Dropdown.Menu>
                      {menuList.map(i => (
                        <Dropdown.Item
                          key={i.ID}
                          href={`/${item.url.split(config.wp_url)[1].slice(0,
                          -1)}/${i.url.split(config.wp_url)[1].slice(0, -1)}`}
                        >
                          {i.title}
                        </Dropdown.Item>
                    ))}
                    </Dropdown.Menu>
                  </Dropdown>
                </Button>
              </div>
            );
          }
          return null;
        })}
          </Toolbar>
        </AppBar>
      </MuiThemeProvider>

Do I need some extra codes to adjust the size of the Appbar?

How can I solve this problem?

Problem solved update

After much research and work, I have solved the problem and I would like to share the solution.

Instead of changing the style of the AppBar, I ended up creating a new header component just for mobile screen size. Then, use react responsive media queries as seen here React responsive to check whether the screen is mobile or desktop to find out which header components to execute.

Code example:

  <div>
        <MediaQuery maxWidth={1224}>
          <MobileFixedMenu menu={menu} config={config} />
        </MediaQuery>

        <MediaQuery minWidth={1224}>
          <FixedMenu menu={menu} config={config} />
        </MediaQuery>
  </div>

I hope this solution will help anyone that is facing the same problem :)

Answer 1

I had the same issue and I just found the answer here: https://github.com/mui-org/material-ui/issues/7130

You need to handle viewport in your index.html file, for example like that:

<meta
    name="viewport"
    content="width=device-width, initial-scale=1, user-scalable=0, maximum-scale=1, minimum-scale=1"
/>