Trying to create a responsive navbar using Material-UI. The goal is to hide the IconButton between 960px and 1920px, and display it from 0px to 960px. However, it seems to work only below 960px. Here's a snippet of the code for IconButton and ul:
<div className={classes.right}>
<IconButton
edge='end'
className={classes.btnMenu}
size='medium'
onClick={(e) => setShowMenu(!showMenu)}
>
<MenuIcon
className={classes.btnMenuMenu}
size='medium'
></MenuIcon>
</IconButton>
<ul
className={`${classes.list} ${
showMenu ? classes.showList : classes.removeList
} `}
>
<li className={classes.li}>
<a href='#!' className={classes.navLink}>
Home
</a>
</li>
<li className={classes.li}>
<a href='#!' className={classes.navLink}>
About
</a>
</li>
<li className={classes.li}>
<a href='#!' className={classes.navLink}>
Portfolio
</a>
</li>
<li className={classes.li}>
<a href='#!' className={classes.navLink}>
Contact
</a>
</li>
</ul>
</div>
In the styles.js file, applied the following code to style the IconButton:
btnMenu: {
width: '100%',
display: 'none',
[theme.breakpoints.down('sm')]: {
display: 'inline-block',
},
},
Despite this styling, the IconButton still appears above the ul, as shown in the image below. Here is the GitHub repository link: GitHub Repository