diff --git a/app/components/Header.tsx b/app/components/Header.tsx index 50eaa60..6316306 100644 --- a/app/components/Header.tsx +++ b/app/components/Header.tsx @@ -40,7 +40,7 @@ const Header: React.FC = ({ onViewChange, showDivs, toggleDivs, sho )}
diff --git a/app/components/Login.tsx b/app/components/Login.tsx index 8b06bea..2152891 100644 --- a/app/components/Login.tsx +++ b/app/components/Login.tsx @@ -53,8 +53,8 @@ const Login: React.FC = () => { return (
{/* Login or Settings Button */} - - diff --git a/app/styles/header.css b/app/styles/header.css index 0e1303e..34dec85 100644 --- a/app/styles/header.css +++ b/app/styles/header.css @@ -6,15 +6,46 @@ header{ width: 100%; height: 10vh; display: flex; - justify-content: space-between; align-items: center; + margin: 1.5vh 0; } .hamburger{ display: none; } -.login-button button{ +.hamburger.open:nth-child(1) + +.nav-links{ + position: absolute; + display: flex; + gap: 15px; + width: 25vw; + height: 5vh; +} + +.nav-btn{ + background-color: transparent; + border: none; +} + +.header-logo{ + margin:auto; + width: 250px; + height: 5vh; + background-image: url(../../public/img/logo.png); + background-position: center; + background-repeat: no-repeat; + background-size: contain; + background-color: transparent; + border: none; +} + +.login-button .header-login-button{ + position: absolute; + top: 2.5vh; + right: 1vw; + justify-self: flex-end; padding: 10px 20px; background-color: var(--input-button-color); color: var(--text-color);