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'
        }
    }

}));

CodePudding user response：

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">