0

I am making a website with a Navbar component at the very top of the site, I only want the Navbar to be there when the width of the window is > 900 pixels. I have tried how I usually conditionally render but it's not working, the navbar is always visible.

Here is my code

{window.screen.width > 900 && (
   <Navbar />
)}
j08691
  • 204,283
  • 31
  • 260
  • 272
Jaden Leonard
  • 25
  • 7
  • 1
    There is most likely an ordering issue. The size of the screen is not known until after the dom has been rendered. Try using state to store the screen width, then add event listeners in a useEffect to listen for resize events and update the state there. – super Apr 29 '22 at 18:51

1 Answers1

0

you should trigger window screen width changes like:

window.addEventListener('resize', handleResize)
Hesam
  • 450
  • 2
  • 11