Convert max-width to mobile first - css

Question

I have downloaded a excellent tutorial with Gatsby and styled components. This tutorial has a desktop-first approach.
I am trying to convert from desktop-first to mobile first, the desktop-first version is working as it's supposed to, but my conversion to mobile-first does not work.
This is the Navbar.jsx file; this file didn't need to be altered, I believe.
import React from 'react';
import styled from 'styled-components';
import Burger from './Burger';
const Nav = styled.nav`
width: 100%;
height: 55px;
border-bottom: 2px solid #f1f1f1;
padding: 0 20px;
display: flex;
justify-content: space-between;
.logo {
padding: 15px 0;
}
`
const Navbar = () => {
return (
<Nav>
<div className="logo">
Nav Bar
</div>
<Burger />
</Nav>
)
}
export default Navbar
This the original Burger.jsx with desktop-first, this file is hidden for desktop and imports the actual menu block
import React, { useState } from 'react'
import styled from 'styled-components'
import RightNav from './RightNav'
const StyledBurger = styled.div`
width: 2rem;
height: 2rem;
position: fixed;
top: 15px;
right: 20px;
z-index: 20;
display: none;
#media (max-width: 768px) {
display: flex;
justify-content: space-around;
flex-flow: column nowrap;
}
div {
width: 2rem;
height: 0.25rem;
background-color: ${({ open }) => (open ? '#ccc' : '#333')};
border-radius: 10px;
transform-origin: 1px;
transition: all 0.3s linear;
&:nth-child(1) {
transform: ${({ open }) => (open ? 'rotate(45deg)' : 'rotate(0)')};
}
&:nth-child(2) {
transform: ${({ open }) => (open ? 'translateX(100%)' : 'translateX(0)')};
opacity: ${({ open }) => (open ? 0 : 1)};
}
&:nth-child(3) {
transform: ${({ open }) => (open ? 'rotate(-45deg)' : 'rotate(0)')};
}
}
`
const Burger = () => {
const [open, setOpen] = useState(false)
return (
<>
<StyledBurger open={open} onClick={() => setOpen(!open)}>
<div />
<div />
<div />
</StyledBurger>
<RightNav open={open} />
</>
)
}
export default Burger
This is my attempt to convert it to mobile-first with min-width, the original code is in comment block:
import React, { useState } from 'react'
import styled from 'styled-components'
import RightNav from './RightNav'
const StyledBurger = styled.div`
display: flex;
justify-content: space-around;
flex-flow: column nowrap;
#media (min-width: 350px) {
width: 2rem;
height: 2rem;
position: fixed;
top: 15px;
right: 20px;
z-index: 20;
display: none;
}
div {
width: 2rem;
height: 0.25rem;
background-color: ${({ open }) => (open ? '#ccc' : '#333')};
border-radius: 10px;
transform-origin: 1px;
transition: all 0.3s linear;
&:nth-child(1) {
transform: ${({ open }) => (open ? 'rotate(45deg)' : 'rotate(0)')};
}
&:nth-child(2) {
transform: ${({ open }) => (open ? 'translateX(100%)' : 'translateX(0)')};
opacity: ${({ open }) => (open ? 0 : 1)};
}
&:nth-child(3) {
transform: ${({ open }) => (open ? 'rotate(-45deg)' : 'rotate(0)')};
}
}
`
const Burger = () => {
const [open, setOpen] = useState(false)
return (
<>
<StyledBurger open={open} onClick={() => setOpen(!open)}>
<div />
<div />
<div />
</StyledBurger>
<RightNav open={open} />
</>
)
}
export default Burger
This it the RightNav.jsx file menu imported into the Burger.jsx
import React from 'react'
import styled from 'styled-components'
const Ul = styled.ul`
list-style: none;
display: flex;
flex-flow: row nowrap;
li {
padding: 18px 10px;
}
#media (max-width: 768px) {
flex-flow: column nowrap;
background-color: #0d2538;
position: fixed;
transform: ${({ open }) => (open ? 'translateX(0)' : 'translateX(100%)')};
top: 0;
right: 0;
height: 100vh;
width: 300px;
padding-top: 3.5rem;
transition: transform 0.3s ease-in-out;
li {
color: #fff;
}
}
`
const RightNav = ({ open }) => {
return (
<Ul open={open}>
<li>Home</li>
<li>About Us</li>
<li>Contact Us</li>
<li>Sign In</li>
<li>Sign Up</li>
</Ul>
)
}
export default RightNav
And this my attempt in the RightNav.jsx file to make it mobile-first, the original code is in comment block:
import React from 'react'
import styled from 'styled-components'
const Ul = styled.ul`
display:flex;
list-style: none;
flex-flow: column nowrap;
background-color: #0d2538;
position: fixed;
transform: ${({ open }) => (open ? 'translateX(0)' : 'translateX(100%)')};
top: 0;
right: 0;
height: 100vh;
width: 300px;
padding-top: 3.5rem;
transition: transform 0.3s ease-in-out;
li {
color: #fff;
}
#media (min-width: 350px) {
flex-flow: row nowrap;
li {
padding: 18px 10px;
}
}
`
const RightNav = ({ open }) => {
return (
<Ul open={open}>
<li>Home</li>
<li>About Us</li>
<li>Contact Us</li>
<li>Sign In</li>
<li>Sign Up</li>
</Ul>
)
}
export default RightNav

Answer 1

I believe your problem lies here in the media query in your min-width sample:
#media (min-width: 350px) {
...
display: none;
}
You never set it to a visible display mode after that line of CSS
If you want to hide it on desktop, you'll want to increase the min-width value up to 768px or somewhere in that ballpark. As it is now, you'll only see the menu when the screen size is less than 350px