Improvements to Navbar Layout and Styling

Author: piyushbarve98

1Application-frontend/src/components/Navbar.jsx

@@ -17,10 +17,11 @@ const Navbar = () => {
       <nav>
         <div className={`main-component ${menuOpen ? "menu-open show" : ""}`}>
           <div className="head-main">
-            <h3 style={{ marginTop: "1rem" }}>
+            <h3 className="row" style={{ marginTop: "0.8rem" }}>
               Thinks Well
-              <br />
-              <span>JAVASCRIPT PROJECTS</span>
+            </h3>
+            <h3 className="row">
+              JAVASCRIPT PROJECTS
             </h3>
           </div>
           <div className="routes">

1Application-frontend/src/css/Navbar.css

@@ -23,7 +23,7 @@
   width: 100%;
   height: 6rem;
   display: flex;
-  gap: 32rem;
+  justify-content: space-between;
   z-index: 999;
   background-color: var(--color-2); 
   backdrop-filter: blur(10px);
@@ -32,29 +32,20 @@
 
 .head-main {
   display: flex;
+  flex-direction: column;
+  margin-left: 2rem;
 }
 
 .head-main h3 {
-  position: relative;
-  top: -0.5rem;
-  margin-left: 6rem;
-  font-family: var(--font-1);
-  font-size: 2.5rem;
   color: rgb(41, 6, 241);
-  font-weight: 700;
-  text-shadow: 1px 1px 1px #919191;
-}
-
-span {
-  margin-left: -0.9rem;
   font-size: 2rem;
-  position: relative;
-  top: -1rem;
+  text-shadow: 1px 1px 1px #919191;
+  font-family: var(--font-1);
 }
 
 .routes ul {
   display: flex;
-  gap: 3rem;
+  gap: 2rem;
   margin-top: 2rem;
 }