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=".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 ponent 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 ponents 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 :)

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./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 ponent 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 ponents 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 :)

• javascript
• reactjs
• mobile
• material-ui

Share Follow edited Sep 22, 2024 at 7:02 VLAZ 29.1k99 gold badges6363 silver badges8484 bronze badges asked Jun 27, 2018 at 4:11 AlvindrakesAlvindrakes 63788 silver badges1818 bronze badges 2

• Read this: Responsive Web Design - Media Queries – Saif Commented Jun 27, 2018 at 4:38
• 1 An alternative is to use this: material-ui./ponents/drawers/#responsive-drawer – Harvinder Commented Jun 22, 2020 at 21:15

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 10

I had the same issue and I just found the answer here: https://github./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"
/>

In nextjs 14 app router we can add this code in layout.tsx to make it responsive.

import { Viewport } from 'next'
 
export const viewport: Viewport = {
  themeColor: 'black',
  width: 'device-width',
  initialScale: 1,
  maximumScale: 1,
  minimumScale:1,
  userScalable:false
}