Skip to content

Responsive Navbar #255

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Closed
wants to merge 7 commits into from
Closed

Responsive Navbar #255

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
7 commits
Select commit Hold shift + click to select a range
bf21a39
removed the extra inline css styling and js from index.html + improve…
umaima06 Aug 26, 2025
7850658
added hamburger menu option for customise page for mobile view (respo…
umaima06 Aug 28, 2025
86a1995
added hamburger menu ☰ that adds all the nav links and a '>' button …
umaima06 Aug 29, 2025
268966c
added hamburger menu ☰ that adds all the nav links for mobile view (…
umaima06 Aug 29, 2025
6a1afc8
added hamburger menu ☰ that adds all the nav links for mobile view (…
umaima06 Aug 29, 2025
71625f4
added hamburger menu ☰ that adds all the nav links for mobile view (…
umaima06 Aug 29, 2025
f85cb06
resolved conflicts
umaima06 Aug 30, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
89 changes: 89 additions & 0 deletions css/about.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -475,6 +475,27 @@ body {
z-index: 10;
}

.mobile-only{
display: none;
}
.desktop-only{
display: flex;
align-items: center;
gap: 10px;
}

.hamburger {
display: none;
}

/* Hero Section */
.hero {
text-align: center;
padding: 4rem 2rem;
position: relative;
z-index: 10;
}

.hero-title {
font-size: 4rem;
font-weight: 700;
Expand Down Expand Up @@ -972,6 +993,74 @@ body {
transform: translateY(0);
}

/* Custom Scrollbar */
::-webkit-scrollbar {
width: 12px;
}

::-webkit-scrollbar-track {
background: rgba(255, 255, 255, 0.1);
}

::-webkit-scrollbar-thumb {
background: linear-gradient(135deg, var(--candy-red), var(--sky-blue));
border-radius: 6px;
}

::-webkit-scrollbar-thumb:hover {
background: linear-gradient(135deg, var(--sky-blue), var(--sunny-yellow));
}

/* Mobile responsivness*/
@media (max-width: 768px) {
.nav-links {
position: fixed;
top: 60px;
left: -100%;
width: auto;
max-width: 300px;
height: auto;
background: rgba(0, 0, 0, 0.9);
flex-direction: column;
align-items: center;
gap: 15px;
padding-top: 2rem;
transition: left 0.3s ease;
z-index: 1000;
display: flex; /* flex*/
}
.nav-links.active {
left: 0;
}
.hamburger {
display: block;
background: none;
border: none;
font-size: 28px;
cursor: pointer;
color: #fff;
z-index: 1100;
}
.nav-links .cta-btn {
display: block;
margin: 10px auto;
text-align: center;
}

.mobile-only{
display:block;
}

.desktop-only{
display: none;
}

.navbar-container> .cta-btn{
display: none !important;
}
}


.footer {
background-color: #ffb6c1;
color: #fff;
Expand Down
80 changes: 68 additions & 12 deletions css/convert.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -259,7 +259,7 @@
justify-content: space-between;
align-items: center;
max-width: 1200px;
margin: auto;
margin:0 auto;
}

/* Logo */
Expand All @@ -279,6 +279,16 @@
.nav-links {
display: flex;
list-style: none;
gap: 20px;
margin: 0 auto; /* this centers the nav links between logo & nav-right */
align-items: center;
}

/* Right side container for Feedback, Scale, user-info */
.nav-right {
display: flex;
align-items: center;
margin-left: 12px; /* small spacing from center */
gap: 1.5rem;
}

Expand Down Expand Up @@ -365,6 +375,12 @@
display: none !important;
}

.nav-links .user-info {
display: flex;
align-items: center;
gap: 10px;
}

/* User Info Display */
.user-info {
display: flex;
Expand Down Expand Up @@ -407,6 +423,19 @@
box-shadow: 0 4px 12px rgba(255, 71, 87, 0.4) !important;
}

.mobile-only{
display: none;
}
.desktop-only{
display: flex;
align-items: center;
gap: 10px;
}

.hamburger {
display: none;
}

/* Main Content */
main {
padding: 2rem 2rem;
Expand Down Expand Up @@ -712,24 +741,51 @@
}

.nav-links {
display: none;
position: absolute;
top: 100%;
left: 0;
right: 0;
position: fixed;
top: 60px;
left: -100%;
width:auto;
max-width: 300px;
height: auto;
background: rgba(0, 0, 0, 0.9);
flex-direction: column;
padding: 2rem;
gap: 1rem;
z-index: 999;
align-items: center;
padding-top: 2rem;
gap: 15px;/*1rem*/
transition: left 0.3s ease;
z-index: 1000;/*999*/
display: flex;
/* padding: 2rem; */
}

.nav-links.active {
display: flex;
left:0;
}

.mobile-menu {
display: flex;
.hamburger {
display: block;
background: none;
border: none;
font-size: 28px;
cursor: pointer;
color: #fff;
z-index: 1100;
}
.nav-links .cta-btn {
display: block;
margin: 10px auto;
text-align: center;
}
.mobile-only{
display:block;
}

.desktop-only{
display: none;
}

.navbar-container> .cta-btn{
display: none !important;
}

main {
Expand Down
62 changes: 61 additions & 1 deletion css/customize.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -401,6 +401,15 @@ background: linear-gradient(45deg, #bf60fa, #fde68a);
box-shadow: 0 4px 12px rgba(255, 71, 87, 0.4) !important;
}

.mobile-only {
display: none; /* hidden by default (desktop view) */
}
.desktop-only {
display: flex;
align-items: center;
gap: 10px;
}

/* Main Container */
.container {
max-width: 1000px;
Expand Down Expand Up @@ -634,14 +643,52 @@ background: linear-gradient(45deg, #bf60fa, #fde68a);
100% { transform: translateY(-3px) rotate(0deg); }
}

.hamburger {
display: none;
}


/* Mobile Responsive */
@media (max-width: 768px) {
.navbar {
padding: 10px 15px;
}

.nav-links {
display: none;
position: fixed;
top: 60px;
left: -100%;
width: auto;
max-width: 300px;
height: auto;
background: rgba(0, 0, 0, 0.9);
flex-direction: column;
align-items: center;
gap: 15px;
padding-top: 2rem;
transition: left 0.3s ease;
z-index: 1000;
display: flex; /* flex*/
}

.nav-links.active {
left: 0;
}

.hamburger {
display: block;
background: none;
border: none;
font-size: 28px;
cursor: pointer;
color: #fff;
z-index: 1100;
}

.nav-links .cta-btn {
display: block;
margin: 10px auto;
text-align: center;
}

.page-title {
Expand All @@ -667,7 +714,20 @@ background: linear-gradient(45deg, #bf60fa, #fde68a);
max-width: 300px;
justify-content: center;
}

.mobile-only {
display: block; /* show inside hamburger */
}

.desktop-only {
display: none; /* hide on mobile */
}

.navbar-container > .cta-btn {
display: none !important;
}
}

/* NEW: Density Input Styles */
.density-input {
border: 2px solid #c7e9c0;
Expand Down
63 changes: 63 additions & 0 deletions css/feedback.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -532,6 +532,19 @@ body {
box-shadow: 0 4px 12px rgba(255, 71, 87, 0.4) !important;
}

.mobile-only{
display: none;
}
.desktop-only{
display: flex;
align-items: center;
gap: 10px;
}

.hamburger {
display: none;
}

/* Hero Section */
.hero {
text-align: center;
Expand Down Expand Up @@ -932,6 +945,56 @@ body {
transform: translateY(0);
}

/* Mobile responsivness*/
@media (max-width: 768px) {
.nav-links {
position: fixed;
top: 60px;
left: -100%;
width: auto;
max-width: 300px;
height: auto;
background: rgba(0, 0, 0, 0.9);
flex-direction: column;
align-items: center;
gap: 15px;
padding-top: 2rem;
transition: left 0.3s ease;
z-index: 1000;
display: flex; /* flex*/
}
.nav-links.active {
left: 0;
display: flex;
}
.hamburger {
display: block;
background: none;
border: none;
font-size: 28px;
cursor: pointer;
color: #fff;
z-index: 1100;
}
.nav-links .cta-btn {
display: block;
margin: 10px auto;
text-align: center;
}

.mobile-only{
display:block;
}

.desktop-only{
display: none;
}

.navbar-container> .cta-btn{
display: none !important;
}
}

/* Mobile Responsive */
@media (max-width: 968px) {
.navbar {
Expand Down
Loading