React app function working locally but not working on netlify

Hi guys, I’m new to netlify and i deployed my portfolio through netlify and whenever i click the menu button to display the overlay navigation menu it works locally but it did not work after i deployed my portfolio

This is my code for the navbar:
import { Home, Icon, Logo, Nav, NavLinks } from ‘…/components/styles/Navbar.styled’;
import logo from ‘./…/logo.png’;
import { MdClose } from ‘react-icons/md’;
import { HiOutlineMenuAlt3 } from ‘react-icons/hi’;
import { useState } from ‘react’;
import { motion, AnimatePresence } from ‘framer-motion’;

const Navbar = () => {

const [ open, setOpen ] = useState(false);

const isOpen = () => {
setOpen(true);
}

const closeMenu = () => {
setOpen(false);
}

//animation
const item = {
exit: {
opacity: 0,
height: 0,
transition: {
ease: ‘easeInOut’,
duration: 0.3,
delay: .3
}
}
}

return (
<>


<img src={logo} alt=‘logo’ style={{ width:‘3.5rem’ }} />



Home




About




Portfolio




Contact





<HiOutlineMenuAlt3 style={{ color: ‘white’, fontSize: ‘30px’ }} onClick={isOpen}/>



{
open && (
<motion.div className=‘menu’
variants={item}
initial={{height: 0, opacity: 0}}
animate={{height: ‘100vh’, opacity: 1}}
transition={{duration: .3}}
exit=‘exit’
>


Home




About




Portfolio




Contact



</motion.div>
)
}

</>
)
}

export default Navbar

I would really appreciate help on this.
Thank You

@EmmaKD2047 When providing code, to maintain clear formatting you should wrap it in a markdown code block with three ``` on either side.

The issue is unlikely to be in the code of your Navbar itself.

Run your build locally, not your develop mode, and then serve the output with npx serve and you should see the same issue as on Netlify, allowing you to debug.

Thanks for the information. It was working perfectly and the overlay navigation was displaying when I use the responsive tester on my laptop but when I click the menu on my phone it does not work. That’s about the only issue I have with it. I’m not sure what to do anymore. Please I would really appreciate a solution if there is one. This is the link to the deployed application:

emmanuelkadiri.netlify.app

I’m thinking it’s my phone so maybe if you can test it from your end

@EmmaKD2047 I can check it, but I have absolutely no idea what it should look like or how it should behave.

1 Like

It is a single page application and on phone there is a navigation menu icon at the top right corner which displays an overlay with links to the other pages in the website. My issue with it is that it doesn’t display on phone when I click the navigation menu icon

Hi @nathanmartin,

Thanks for the follow-up.

Were you able to resolve the issue? I ask since when I check the site on my phone the mobile navigation (hamburger menu) appears to be working:

After clicking on the menu button I see:

If I click on any of the nav links it takes me to the proper page (such as the about page).

Let us know if you’re still having issues.

1 Like

Thank you very much @nathanmartin and @Melvin. I really appreciate the support

@EmmaKD2047 One thing I did spot, which is likely unrelated, is that the 10vh specified against the header causes the logo & hamburger menu to get get truncated when the viewport height is shorter: