From 84a7c3fef3f3f8b7746e34cd0e34816d20733902 Mon Sep 17 00:00:00 2001 From: Shivam Prasad Singh Date: Fri, 25 Oct 2024 01:09:54 +0530 Subject: [PATCH 1/2] create responsive navbar in mobile view --- backend/app.js | 2 +- frontend/src/index.html | 20 ++--- index.html | 189 +++++++++++++++++++++++++++++----------- 3 files changed, 151 insertions(+), 60 deletions(-) diff --git a/backend/app.js b/backend/app.js index d4031516..45eb11cd 100644 --- a/backend/app.js +++ b/backend/app.js @@ -2,7 +2,7 @@ import express from "express"; import dotenv from "dotenv"; import connectDB from "./utils/db.js"; import blogRoutes from "./routes/blogRoutes.js"; -import userRoutes from "./routes/userRoutes.js"; +import userRoutes from "./routes/userRoutes.js"; dotenv.config(); const app = express(); diff --git a/frontend/src/index.html b/frontend/src/index.html index 99f896a8..d01b1952 100644 --- a/frontend/src/index.html +++ b/frontend/src/index.html @@ -1,17 +1,17 @@ - - - + + + WordWise - - - + + +
- -
-
+ +
+
- + diff --git a/index.html b/index.html index 2fb505a6..6be86ee4 100644 --- a/index.html +++ b/index.html @@ -221,55 +221,136 @@
- + + + -
From 7e02e880fc7f963decec4b242dc71b3296767195 Mon Sep 17 00:00:00 2001 From: Shivam Prasad Singh Date: Fri, 25 Oct 2024 15:29:37 +0530 Subject: [PATCH 2/2] Navbar responsive for all screen devices --- index.html | 60 ++++++++++++++++++++++++++++++++++++++---------------- 1 file changed, 42 insertions(+), 18 deletions(-) diff --git a/index.html b/index.html index f6e1108b..f1d698a1 100644 --- a/index.html +++ b/index.html @@ -250,25 +250,26 @@ height: 3px; background-color: #333; } - - @media (max-width: 768px) { - .logo { - margin-left: -60px; - } + + @media (max-width: 1024px) { .logo h1 a{ - font-size: 30px; - + font-size: 30px; + } + .nav-links1 { + gap: 10px; + } +.nav-links1 a{ + font-size: 16px; +} } - - /* nav{ - margin: 0 10px; - } */ + @media (max-width: 768px) { .hamburger { display: flex; - - + align-items: center; + justify-content: center; + /* Add styling for visibility, like color, size, etc. */ } - + .nav-links1 { display: none; flex-direction: column; @@ -281,19 +282,42 @@ padding: 20px; box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.1); } - + .nav-links1.active { display: flex; } - + .dropdown { position: relative; - padding-left: 40px; + margin-left: 200px; + } +} + +/* Additional styling for smaller screens */ +@media (max-width: 576px) { + .logo { + margin-left: -75px; + } + .logo h1 a { + font-size: 30px; } - .theme-switch-wrapper{ + .dropdown { + position: relative; + margin-left: 60px; + } + .theme-switch-wrapper { margin-right: -80px; } +} + +@media (max-width: 345px) { + .logo { + margin-left: -65px; } + .logo h1 a { + font-size: 24px; + } +} .dropdown-menu {