KeshavAnandCode/FTCWebsite
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Improve website navigation appearance and highlight the current page

Browse Source 
Update CSS for navbar and add JavaScript to apply an 'active' class to the current page's link in the navbar.

Replit-Commit-Author: Agent
Replit-Commit-Session-Id: 75bceff7-98f2-4f6e-ae8e-e735399a1fe8
Replit-Commit-Checkpoint-Type: full_checkpoint
Replit-Commit-Event-Id: 804f4791-b980-4106-94d1-355e504e838b
Replit-Commit-Screenshot-Url: https://storage.googleapis.com/screenshot-production-us-central1/d0a1d46d-d203-4308-bc6a-312ac7c0243b/75bceff7-98f2-4f6e-ae8e-e735399a1fe8/OT40Fqx
This commit is contained in:
abhiramtx
2025-11-09 00:08:16 +00:00
parent 84a3dfb856
commit 01289d6157
3 changed files with 26 additions and 20 deletions
Download Patch File Download Diff File Expand all files Collapse all files

28
static/css/styles.css
View File

@@ -65,29 +65,26 @@ body::after {
.navbar-inner {
display: flex;
align-items: center;
padding: 12px 24px;
background: rgba(0, 0, 0, 0.5);
backdrop-filter: blur(12px);
border: 1px solid rgba(255, 255, 255, 0.08);
border-radius: 16px;
padding: 16px 32px;
background: transparent;
}
.navbar-logo {
display: flex;
align-items: center;
padding-right: 20px;
border-right: 1px solid rgba(255, 255, 255, 0.1);
padding-right: 24px;
border-right: 1px solid rgba(255, 255, 255, 0.15);
margin-right: auto;
}
.navbar-logo img {
height: 36px;
height: 40px;
display: block;
}
.navbar-links {
display: flex;
gap: 8px;
gap: 32px;
align-items: center;
position: absolute;
left: 50%;
@@ -95,19 +92,20 @@ body::after {
}
.navbar-links a {
color: #d1d5db;
color: #9ca3af;
text-decoration: none;
font-family: var(--font-body);
font-weight: 500;
font-size: 14px;
padding: 8px 16px;
border-radius: 8px;
transition: all 0.2s ease;
font-size: 15px;
transition: color 0.2s ease;
}
.navbar-links a:hover {
color: #ffffff;
background: rgba(255, 255, 255, 0.1);
}
.navbar-links a.active {
color: #3b82f6;
}
.menu-button {