Skip to content

Commit 8059ab4

Browse files
drkae456drkae456
committed
fixed nav bar issues
1 parent 64896c5 commit 8059ab4

1 file changed

Lines changed: 43 additions & 20 deletions

File tree

‎home/templates/includes/navigation.html‎

Lines changed: 43 additions & 20 deletions
Original file line numberDiff line numberDiff line change
@@ -2,12 +2,12 @@
22
<header class="header-global">
33

44
<nav id="navbar-main" aria-label="Primary navigation" class="navbar navbar-main navbar-expand-lg navbar-light">
5-
<div class="navbar-container position-relative">
5+
<div class="navbar-container position-relative" style="display:flex; align-items:center; justify-content:center; gap:16px;">
66
<a class="navbar-brand me-lg-5" href="/">
77
<img class="navbar-brand-dark" src="{% static 'assets/img/brand/logo.svg' %}" alt="Logo light" />
88
<img class="navbar-brand-light" src="{% static 'assets/img/brand/logo.svg' %}" alt="Logo dark" />
99
</a>
10-
<div class="navbar-collapse collapse me-auto" id="navbar_global">
10+
<div class="navbar-collapse collapse" id="navbar_global" style="flex:0 1 auto;">
1111
<div class="navbar-collapse-header">
1212
<div class="row">
1313
<div class="col-4 collapse-brand">
@@ -94,11 +94,11 @@
9494
</li>
9595

9696
<li class="nav-item dropdown">
97-
<a class="nav-link" href="#" id="blogDropdown" data-bs-toggle="dropdown" aria-expanded="false">
97+
<a class="nav-link dropdown-toggle" href="#" id="projectsDropdown" data-bs-toggle="dropdown" aria-expanded="false" style="display:inline-flex; align-items:center; gap:6px; white-space:nowrap;">
9898
{% trans "Projects" %}
9999
<span class="fas fa-angle-down nav-link-arrow ms-1"></span>
100100
</a>
101-
<div class="dropdown-menu pt-2" style="width: max-content !important;margin-left: 50px;" aria-labelledby="blogDropdown">
101+
<div class="dropdown-menu pt-2" style="width: max-content !important;margin-left: 50px;" aria-labelledby="projectsDropdown">
102102
<div class="row">
103103
<div class="col">
104104
<ul class="list-style-none m-0 p-0">
@@ -180,7 +180,7 @@
180180

181181

182182
<li class="nav-item dropdown">
183-
<a class="nav-link" href="#" id="blogDropdown" data-bs-toggle="dropdown" aria-expanded="false">
183+
<a class="nav-link dropdown-toggle" href="#" id="blogDropdown" data-bs-toggle="dropdown" aria-expanded="false" style="display:inline-flex; align-items:center; gap:6px; white-space:nowrap;">
184184
{% trans "Blog" %}
185185
<span class="fas fa-angle-down nav-link-arrow ms-1"></span>
186186
</a>
@@ -194,7 +194,7 @@
194194
</li>
195195

196196
<li class="nav-item dropdown">
197-
<a class="nav-link" href="#" id="careersDropdown" role="button" data-bs-toggle="dropdown" aria-expanded="false">
197+
<a class="nav-link dropdown-toggle" href="#" id="careersDropdown" role="button" data-bs-toggle="dropdown" aria-expanded="false" style="display:inline-flex; align-items:center; gap:6px; white-space:nowrap;">
198198
{% trans "Careers" %}
199199
<span class="fas fa-angle-down nav-link-arrow ms-1"></span>
200200
</a>
@@ -224,7 +224,7 @@
224224
</li>
225225

226226
<li class="nav-item dropdown">
227-
<a href="#" class="nav-link" id="frontPagesDropdown" aria-expanded="false" data-bs-toggle="dropdown">
227+
<a href="#" class="nav-link dropdown-toggle" id="frontPagesDropdown" aria-expanded="false" data-bs-toggle="dropdown" style="display:inline-flex; align-items:center; gap:6px; white-space:nowrap;">
228228
{% trans "Cyber Challenges" %}
229229
<span class="fas fa-angle-down nav-link-arrow ms-1"></span>
230230
</a>
@@ -258,10 +258,10 @@
258258

259259

260260
<div class="search-container position-relative">
261-
<form class="desktop-search-bar" method="POST" action="{% url 'pages/search-results' %}">
261+
<form class="desktop-search-bar" method="POST" action="{% url 'pages/search-results' %}" style="display: flex; align-items: center; position: relative; height: 36px;">
262262
{% csrf_token %}
263-
<input class="form-control me-4 search-box" type="search" id="searchInput" name="q" placeholder="{% trans 'Search...' %}" aria-label="Search" autocomplete="off">
264-
<button class="search-btn" type="submit">
263+
<input class="form-control me-4 search-box" type="search" id="searchInput" name="q" placeholder="{% trans 'Search...' %}" aria-label="Search" autocomplete="off" style="border-radius: 25px 0 0 25px; border-right: none; height: 36px; padding-top: 6px; padding-bottom: 6px; line-height: 1;">
264+
<button class="search-btn" type="submit" style="border-radius: 0 25px 25px 0; border-left: 1px solid #ddd; height: 36px; display: inline-flex; align-items: center; justify-content: center; line-height: 1; top: 50%; transform: translateY(calc(-50% + {% if request.resolver_match.url_name == 'profile' %}4px{% else %}0px{% endif %})); right: 2px;">
265265
<div><i class="fas fa-search search-icon"></i></div>
266266
</button>
267267
</form>
@@ -272,31 +272,39 @@
272272

273273
</div>
274274

275-
<div class="d-flex align-items-center justify-content-center">
275+
<div class="d-flex align-items-center justify-content-center" style="gap:8px;">
276276
{% if request.user.is_authenticated %}
277277

278278
<!-- User Profile Dropdown -->
279279
<div class="dropdown">
280-
<a href="#" id="profileDropdown" role="button" class="btn btn-outline-gray-100 me-md-3 d-flex align-items-center dropdown-toggle" data-bs-toggle="dropdown" data-bs-display="static" aria-expanded="false">
281-
<span class="fas fa-user-circle me-2"></span>
280+
<a href="#" id="profileDropdown" role="button" class="btn btn-outline-gray-100 d-flex align-items-center dropdown-toggle" data-bs-toggle="dropdown" data-bs-display="static" aria-expanded="false" style="padding:.25rem .5rem; line-height:1; margin:0; gap:8px;">
281+
{% if request.user.is_authenticated and request.user.profile and request.user.profile.avatar %}
282+
<span style="width:28px;height:28px;border-radius:50%;overflow:hidden;display:inline-flex;align-items:center;justify-content:center;flex:0 0 28px; margin-left:1px;">
283+
<img src="{{ request.user.profile.avatar_webp_80.url|default:request.user.profile.avatar.url }}"
284+
alt="Avatar"
285+
style="width:100%;height:100%;object-fit:cover;object-position:center;display:block;" />
286+
</span>
287+
{% else %}
288+
<span class="fas fa-user-circle" style="font-size:22px; width:28px; height:28px; display:inline-flex; align-items:center; justify-content:center; line-height:28px; color:#ffcd11; margin-left:1px;"></span>
289+
{% endif %}
282290
<span class="header-profile-name">{{ request.user.username }}</span>
283291
</a>
284-
<ul class="dropdown-menu dropdown-menu-end" aria-labelledby="profileDropdown">
292+
<ul class="dropdown-menu dropdown-menu-end" aria-labelledby="profileDropdown" style="border-radius: 15px; overflow: hidden;">
285293
<li>
286-
<a class="dropdown-item" href="{% url 'profile' %}">
294+
<a class="dropdown-item" href="{% url 'profile' %}" style="color: #ffcd11; transition: color 0.3s ease;" onmouseover="this.style.color='white'; this.style.backgroundColor='rgba(255, 205, 17, 0.1)';" onmouseout="this.style.color='#ffcd11'; this.style.backgroundColor='transparent';">
287295
<span class="fas fa-user me-2"></span>{% trans 'Profile' %}
288296
</a>
289297
</li>
290298
<li>
291-
<a class="dropdown-item" href="{% url 'settings' %}">
299+
<a class="dropdown-item" href="{% url 'settings' %}" style="color: #ffcd11; transition: color 0.3s ease;" onmouseover="this.style.color='white'; this.style.backgroundColor='rgba(255, 205, 17, 0.1)';" onmouseout="this.style.color='#ffcd11'; this.style.backgroundColor='transparent';">
292300
<span class="fas fa-cog me-2"></span>{% trans 'Settings' %}
293301
</a>
294302
</li>
295303
<li>
296304
<hr class="dropdown-divider">
297305
</li>
298306
<li>
299-
<a class="dropdown-item" href="{% url 'logout' %}">
307+
<a class="dropdown-item" href="{% url 'logout' %}" style="color: #ffcd11; transition: color 0.3s ease;" onmouseover="this.style.color='white'; this.style.backgroundColor='rgba(255, 205, 17, 0.1)';" onmouseout="this.style.color='#ffcd11'; this.style.backgroundColor='transparent';">
300308
<span class="fas fa-sign-out-alt me-2"></span>{% trans 'Logout' %}
301309
</a>
302310
</li>
@@ -335,10 +343,10 @@
335343

336344

337345
<!-- language switcher (moved into right-side toolbar) -->
338-
<div class="dropdown ms-2" style="margin-left:10px;margin-right:5px;">
346+
<div class="dropdown" style="margin-left:4px;margin-right:0;">
339347
{% get_current_language as CURRENT_LANG %}
340348
{% with code=CURRENT_LANG|lower|slice:":2" %}
341-
<button class="nav-link dropdown-toggle btn btn-link p-0"
349+
<button class="nav-link dropdown-toggle btn btn-link p-0" style="line-height:1; padding:0;"
342350
id="langDropdown"
343351
data-bs-toggle="dropdown"
344352
aria-expanded="false"
@@ -384,7 +392,7 @@
384392
</ul>
385393
</div>
386394

387-
<span class="hamburger-button-menu ms-2" type="button" data-bs-toggle="collapse"
395+
<span class="hamburger-button-menu" type="button" data-bs-toggle="collapse" style="margin-left:4px;"
388396
data-bs-target="#navbar_global" aria-controls="navbar_global" aria-expanded="false"
389397
aria-label="Toggle navigation">
390398
<span class="navbar-toggler-icon"></span>
@@ -782,4 +790,19 @@
782790
.navbar .nav-link .nav-link-arrow {
783791
color: inherit !important;
784792
}
793+
794+
/* Keep dropdown carets inline and vertically centered next to text */
795+
.navbar .nav-item .nav-link.dropdown-toggle {
796+
display: inline-flex !important;
797+
align-items: center;
798+
gap: 6px;
799+
white-space: nowrap;
800+
padding-right: 0.5rem;
801+
}
802+
.navbar .nav-link .nav-link-arrow {
803+
display: inline-flex;
804+
align-items: center;
805+
line-height: 1;
806+
margin-left: 0.25rem;
807+
}
785808
</style>

0 commit comments

Comments
 (0)