diff --git a/src/components/Navbar/Navbar.css b/src/components/Navbar/Navbar.css index 6401df9..33381e1 100644 --- a/src/components/Navbar/Navbar.css +++ b/src/components/Navbar/Navbar.css @@ -1,51 +1,53 @@ .topnav { - background-color: #1f293726; - overflow: hidden; - text-align: right; - backdrop-filter: blur(16px); - border: 1px solid #f9fafb1a; - padding: 1.1rem; - display: flex; - justify-content:flex-end; - gap: 16px; + background-color: #1f293726; + overflow: hidden; + text-align: right; + backdrop-filter: blur(16px); + border: 1px solid #f9fafb1a; + padding: 1.1rem; + display: flex; + justify-content: flex-end; + gap: 16px; } + @media (max-width: 700px) { - .topnav { - text-align: center; - overflow: auto; - justify-content: flex-start; - } + .topnav { + flex-direction: column; + text-align: center; + overflow: auto; + justify-content: flex-start; + } } .topnav a { - display: flex; - align-items: center; - gap: 8px; - color: #f2f2f2; - text-align: center; - padding: 0px 15px; - text-decoration: none; - border: 1px solid transparent; - /* font-size: 20px; */ + display: flex; + align-items: center; + gap: 8px; + color: #f2f2f2; + text-align: center; + padding: 0px 15px; + text-decoration: none; + border: 1px solid transparent; + /* font-size: 20px; */ } .topnav a:hover { - background-color: #2c2e2fb3; - color: #f2f2f2; - border-radius: 12px; - border:1px solid #b6b6b94a; - /* display: inline; */ + background-color: #2c2e2fb3; + color: #f2f2f2; + border-radius: 12px; + border: 1px solid #b6b6b94a; + /* display: inline; */ } .topnav a.active { - background-color: #4CAF50; - color: white; + background-color: #4caf50; + color: white; } -.logo{ - margin-top: 10px; - width: 52px; - vertical-align:middle; - height: 42px; - display: inline-block; +.logo { + margin-top: 10px; + width: 52px; + vertical-align: middle; + height: 42px; + display: inline-block; } diff --git a/src/components/Navbar/Navbar.jsx b/src/components/Navbar/Navbar.jsx index 41de4bc..a8f0ea0 100644 --- a/src/components/Navbar/Navbar.jsx +++ b/src/components/Navbar/Navbar.jsx @@ -1,6 +1,5 @@ import React from 'react'; import './Navbar.css'; -import slack from './slack.svg'; import youtube from './youtube.svg'; import twitter from './twitter.svg'; import github from './github.svg'; @@ -8,10 +7,6 @@ import github from './github.svg'; const Navbar = () => { return (