score:0

alright i figured it out, i was just going about it the hard way as per usual. here's my new solution:

import react, { useeffect, usestate } from 'react';
import { navbar, navitem } from 'reactstrap';
import './nav.css';

    function nav() {
      let nav = 'nav';
      const [scrolled, setscrolled] = usestate();
    
      const handlescroll = () => {
        setscrolled(document.documentelement.scrolltop);
      };
    
      useeffect(() => {
        window.addeventlistener('scroll', handlescroll);
        return () => window.removeeventlistener('scroll', handlescroll);
      });
    
      if (scrolled > 0) {
        nav = 'nav scrolled';
      }
    
      return (
        <navbar classname={nav}>
          <div classname='items-box'>
            <navitem classname='nav-item'>projects</navitem>
            <navitem classname='nav-item'>
              <strong>name</strong>
            </navitem>
            <navitem classname='nav-item'>resume</navitem>
          </div>
        </navbar>
      );
    }
    
    export default nav;

css

.nav {
  align-content: center;
  text-align: center;
  flex: auto;
  width: 60%;
  color: black;
  margin: auto;
  background-color: white;
  height: 4rem;
  top: 3rem;

  transition: width 0.7s linear, top 0.1s;
}

.nav.scrolled {
  width: 100%;
  margin: auto;
  top: 0;
  position: sticky;
}

.items-box {
  list-style: none;
  width: 100%;
  display: flex;
  flex-direction: row;
  justify-content: space-around;
}

.nav-item {
  margin-left: 1rem;
  margin-right: 1rem;
  transition: 0.3s;
}

.nav-item:hover {
  cursor: pointer;
  color: forestgreen;
}

turns out using position: fixed snaps the navbar to the left pane of the window which makes it expand un-evenly. just using position sticky and transitioning like so works just perfectly.


Related Query

More Query from same tag