Skip to content

Commit a946f9c

Browse files
DebdyutDebdyut
committed
Implement sticky navigation with brand name and improved mobile design
- Hamburger menu on left with brand name beside it - Removed green border line - Fixed navbar that becomes purple on scroll - Better contrast for hamburger icon - Mobile dropdown menu with purple background - Proper spacing and hover effects
1 parent 5e44b3a commit a946f9c

File tree

2 files changed

+112
-33
lines changed

2 files changed

+112
-33
lines changed

‎portfolio/themes/basic/layouts/_default/baseof.html‎

Lines changed: 20 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -15,14 +15,17 @@
1515
<link rel="stylesheet" href="{{ "css/minimal.css" | relURL }}">
1616
</head>
1717
<body>
18-
<nav>
19-
<button class="nav-toggle" onclick="toggleNav()">☰</button>
20-
<ul id="nav-menu">
21-
<li><a href="{{ "/" | relURL }}"><span class="emoji">🏠</span> Home</a></li>
22-
<li><a href="{{ "/projects" | relURL }}"><span class="emoji">🛠️</span> Projects</a></li>
23-
<li><a href="{{ "/opensource" | relURL }}"><span class="emoji">🌍</span> Community</a></li>
24-
<li><a href="{{ "/contact" | relURL }}"><span class="emoji">📧</span> Connect</a></li>
25-
</ul>
18+
<nav id="navbar">
19+
<div class="nav-container">
20+
<button class="nav-toggle" onclick="toggleNav()">☰</button>
21+
<div class="brand">Debdyut Hajra</div>
22+
<ul id="nav-menu">
23+
<li><a href="{{ "/" | relURL }}"><span class="emoji">🏠</span> Home</a></li>
24+
<li><a href="{{ "/projects" | relURL }}"><span class="emoji">🛠️</span> Projects</a></li>
25+
<li><a href="{{ "/opensource" | relURL }}"><span class="emoji">🌍</span> Community</a></li>
26+
<li><a href="{{ "/contact" | relURL }}"><span class="emoji">📧</span> Connect</a></li>
27+
</ul>
28+
</div>
2629
</nav>
2730

2831
<main>
@@ -36,18 +39,18 @@
3639

3740
<script>
3841
function toggleNav() {
39-
console.log('toggleNav called');
4042
const menu = document.getElementById('nav-menu');
41-
console.log('menu element:', menu);
42-
if (menu) {
43-
menu.classList.toggle('show');
44-
console.log('menu classes:', menu.className);
45-
}
43+
menu.classList.toggle('show');
4644
}
4745

48-
// Test on page load
49-
document.addEventListener('DOMContentLoaded', function() {
50-
console.log('Page loaded, nav-menu element:', document.getElementById('nav-menu'));
46+
// Sticky navbar on scroll
47+
window.addEventListener('scroll', function() {
48+
const navbar = document.getElementById('navbar');
49+
if (window.scrollY > 50) {
50+
navbar.classList.add('sticky');
51+
} else {
52+
navbar.classList.remove('sticky');
53+
}
5154
});
5255
</script>
5356
</body>

‎portfolio/themes/basic/static/css/minimal.css‎

Lines changed: 92 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -29,7 +29,7 @@ body {
2929
background: var(--light-gray);
3030
max-width: 800px;
3131
margin: 0 auto;
32-
padding: 2rem;
32+
padding: 6rem 2rem 2rem 2rem;
3333
}
3434

3535
/* Typography */
@@ -114,29 +114,60 @@ pre {
114114
/* Navigation */
115115
nav {
116116
margin-bottom: 3rem;
117-
padding-bottom: 1rem;
118-
border-bottom: 1px solid var(--sage-green);
119-
position: relative;
117+
padding: 1rem 0;
118+
position: fixed;
119+
top: 0;
120+
left: 0;
121+
right: 0;
122+
background: transparent;
123+
z-index: 1000;
124+
}
125+
126+
nav.sticky {
127+
background: var(--deep-purple);
128+
box-shadow: 0 2px 4px rgba(0,0,0,0.1);
129+
}
130+
131+
.nav-container {
132+
max-width: 800px;
133+
margin: 0 auto;
134+
padding: 0 2rem;
135+
display: flex;
136+
justify-content: space-between;
137+
align-items: center;
138+
}
139+
140+
.brand {
141+
display: none;
142+
font-weight: bold;
143+
color: var(--deep-purple);
144+
font-size: 1.1rem;
145+
}
146+
147+
nav.sticky .brand {
148+
color: var(--light-gray);
120149
}
121150

122151
.nav-toggle {
123152
display: none;
124153
background: none;
125154
border: none;
126-
font-size: 1.5rem;
127-
color: var(--steel-blue);
155+
font-size: 1.8rem;
156+
color: var(--deep-purple);
128157
cursor: pointer;
129-
position: absolute;
130-
right: 0;
131-
top: -0.5rem;
158+
font-weight: bold;
159+
}
160+
161+
nav.sticky .nav-toggle {
162+
color: var(--light-gray);
132163
}
133164

134165
nav ul {
135166
list-style: none;
136167
padding: 0;
137168
display: flex;
138169
gap: 2rem;
139-
justify-content: center;
170+
margin: 0;
140171
}
141172

142173
nav a {
@@ -150,25 +181,70 @@ nav a:hover {
150181
color: var(--rust-terracotta);
151182
}
152183

184+
nav.sticky a {
185+
color: var(--light-gray);
186+
}
187+
188+
nav.sticky a:hover {
189+
color: var(--warm-peach);
190+
}
191+
192+
/* Add top margin to body to account for fixed navbar */
193+
body {
194+
font-family: 'Monaco', 'Menlo', 'Ubuntu Mono', monospace;
195+
line-height: 1.6;
196+
color: var(--charcoal);
197+
background: var(--light-gray);
198+
max-width: 800px;
199+
margin: 0 auto;
200+
padding: 6rem 2rem 2rem 2rem;
201+
}
202+
153203
/* Mobile Navigation */
154204
@media (max-width: 600px) {
155205
.nav-toggle {
156206
display: block;
157207
}
158208

209+
.brand {
210+
display: block;
211+
}
212+
159213
nav ul {
160214
display: none;
215+
position: absolute;
216+
top: 100%;
217+
left: 0;
218+
right: 0;
161219
flex-direction: column;
162-
gap: 1rem;
163-
margin-top: 2rem;
164-
text-align: center;
165-
background: var(--light-lavender);
220+
gap: 0;
221+
background: var(--deep-purple);
166222
padding: 1rem;
167-
border-radius: 4px;
223+
box-shadow: 0 2px 4px rgba(0,0,0,0.1);
168224
}
169225

170226
nav ul.show {
171-
display: flex !important;
227+
display: flex;
228+
}
229+
230+
nav ul li {
231+
padding: 0.5rem 0;
232+
border-bottom: 1px solid rgba(255,255,255,0.1);
233+
}
234+
235+
nav ul li:last-child {
236+
border-bottom: none;
237+
}
238+
239+
nav ul a {
240+
color: var(--light-gray);
241+
display: block;
242+
padding: 0.5rem;
243+
}
244+
245+
nav ul a:hover {
246+
color: var(--warm-peach);
247+
background: rgba(255,255,255,0.1);
172248
}
173249
}
174250

0 commit comments

Comments
 (0)