I created an online shop and used Media query breakpoints to adjust the content based on the screen width. Everything works fine if I change the screen size by changing the size of the browser. At the set breakpoint, my navbar collapses and everything looks great. But as soon as I switch to Mobile view things get weird. Somehow no matter how small I make the window, the navbar remains as it is. I have heard that the Chrome Dev tools are unreliable and can cause issues with responsiveness so I connected to my website with my iPhone 12 and the result stays the same, no responsiveness whatsoever.
Here you can see the Navbar when viewed from the browser
This is the navbar how it’s supposed to look after it colapses
This is how the navbar looks in Chrome dev tools as well as on my iPhone 12
This is my Navbar jsx
return (
<>
<nav className={classes.navbar}>
<Link to='/' className={classes.navbarLogo} >
FIRM
</Link>
<div className={classes.menuIcon} onClick={handleClick}>
{click ?
<i><FontAwesomeIcon icon={faTimes} className={classes.fat}/></i>
:
<i><FontAwesomeIcon icon={faBars} className={classes.fat}/></i>}
</div>
<ul className={click ? classes.navMenuActive : classes.navMenu}>
<li className={classes.navItem}>
<Link to='/' className={classes.navbarLinks} onClick={closeMobileMenu}>
Home
</Link>
</li>
<li className={classes.navItem}
onMouseEnter={onMouseEnter}
onMouseLeave={onMouseLeave}
>
<Link to='/Produkte' className={classes.navbarLinks} onClick={closeMobileMenu}>
Produkte <i className='fas fa-caret-down'/>
</Link>
{dropdown && <Dropdown />}
</li>
<li className={classes.navItem}>
<Link to='/Kontakt' className={classes.navbarLinks} onClick={closeMobileMenu}>
Kontaktiere uns
</Link>
</li>
<li className={classes.navItem}>
<Link to='/Warenkorb' className={classes.navbarLinksMobile} onClick={closeMobileMenu}>
<ShoppingCartIcon totalitems={totalitems}></ShoppingCartIcon>
</Link>
</li>
</ul>
<NavButton className={classes.buttonFlex} totalitems={totalitems}/>
</nav>
<div className={classes.navBlock}></div>
</>
)}
These are my styles
export default makeStyles((theme) => ({
navbar: {
background: 'linear-gradient(90deg, rgb(28, 27, 27) 0%, rgb(26, 23, 23) 100%)',
height: '80px',
display: 'flex',
justifyContent: 'center',
alignItems: 'center',
fontSize: '1.2rem',
width: "100%",
position: "fixed"
},
navbarLogo: {
color: '#fff',
justifySelf: 'start',
marginLeft: '20px',
cursor: 'pointer',
textDecoration: 'none',
fontSize: '2rem',
fontFamily: 'PT Sans, sans-serif'
},
navMenu: {
display: 'grid',
gridTemplateColumns: 'repeat(5, auto)',
gridGap: '10px',
listStyle: 'none',
textAlign: 'center',
width: '70vw',
justifyContent: 'end',
marginRight: '2rem'
},
navItem: {
display: 'flex',
alignItems: 'center',
height: '80px',
},
navbarLinks: {
color: 'white',
textDecoration: 'none',
padding: '0.5rem 1rem',
fontFamily: 'PT Sans, sans-serif',
'&:hover': {
backgroundColor: '#1888ff',
borderRadius: '4px',
transition: 'all 0.2s ease-out'
}
},
fat: {
color: 'white'
},
navbarLinksMobile: {
display: 'none'
},
menuIcon: {
display: 'none',
},
navBlock : {
height: "80px"
},
['@media screen and (max-width: 960px)']: {
NavbarItems: {
position: 'relative'
},
navMenu: {
display: 'flex',
flexDirection: 'column',
width: '100%',
height: '90vh',
position: 'absolute',
top: '80px',
left: '-120%',
opacity: '1',
transition: 'all 0.5s ease',
zIndex: '1',
},
navMenuActive: {
paddingLeft: '0',
marginTop: '0',
display: 'flex',
flexDirection: 'column',
width: '100%',
height: '90vh',
position: 'absolute',
top: '80px',
transition: 'all 0.5s ease',
zIndex: '1',
background: '#242222',
left: '0',
opacity: '1',
},
navbarLinks: {
textAlign: 'center',
padding: '2rem',
width: '100%',
display: 'table',
'&:hover': {
backgroundColor: '#1888ff',
borderRadius: '0'
}
},
navbarLogo: {
position: 'absolute',
top: '0',
left: '0',
transform: 'translate(25%, 50%)'
},
menuIcon: {
display: 'block',
position: 'absolute',
top: '0',
right: '0',
transform: 'translate(-100%, 60%)',
fontSize: '1.8rem',
cursor: 'pointer'
},
'.fa-times': {
color: '#fff',
fontSize: '2rem'
},
navbarLinksMobile: {
display: 'block',
textAlign: 'center',
padding: '1.5rem',
margin: '2rem auto',
borderRadius: '4px',
width: '80%',
background: '#1888ff',
textDecoration: 'none',
color: '#fff',
fontSize: '1.5rem',
'&:hover': {
backgroundColor: '#fff',
color: '#1888ff',
transition: '250ms',
}
},
buttonFlex: {
display: 'none'
}
}
}));Answers:
Thank you for visiting the Q&A section on Magenaut. Please note that all the answers may not help you solve the issue immediately. So please treat them as advisements. If you found the post helpful (or not), leave a comment & I’ll get back to you as soon as possible.
Method 1
I you haven’t done this already please try to add to the the following line
<meta name="viewport" content="width=device-width, initial-scale=1">
All methods was sourced from stackoverflow.com or stackexchange.com, is licensed under cc by-sa 2.5, cc by-sa 3.0 and cc by-sa 4.0