Skip to content

Commit 5f459dd

Browse files
ninjamuffin99ninjamuffin99
authored
Header navbar fixes (#246)
* fix dropdown toggler on mobile * haxeflixel logo / navbar-brand fix * navbar fixes
1 parent eb04c87 commit 5f459dd

File tree

3 files changed

+80
-50
lines changed

3 files changed

+80
-50
lines changed

‎11ty-source/_layouts/partials/header-menu.liquid

+26-17
Original file line numberDiff line numberDiff line change
@@ -1,32 +1,36 @@
11
<header>
2-
<nav class="navbar navbar-expand-lg bg-body-tertiary">
2+
<nav class="navbar navbar-expand-lg">
33
<div class="container-fluid">
44

5-
<a href="/" class="navbar-brand"><img
6-
src="/images/haxeflixel-header.svg"
5+
<a href="/" class="navbar-brand fs-3 fw-medium">
6+
<img
7+
src="/images/haxeflixel.svg"
78
height="31"
8-
alt="HaxeFlixel" /></a>
9+
alt="HaxeFlixel"
10+
class="d-inline-block align-text-bottom">
11+
HaxeFlixel
12+
</a>
913

1014
<button
1115
class="navbar-toggler"
1216
type="button"
1317
data-bs-toggle="collapse"
14-
data-bs-target="#navbarSupportedContent"
15-
aria-controls="navbarSupportedContent"
18+
data-bs-target="#navbarNavDropdown"
1619
aria-expanded="false"
20+
aria-controls="navbarNavDropdown"
1721
aria-label="Toggle navigation">
1822
<span class="navbar-toggler-icon"></span>
1923
</button>
2024

2125

2226
<div class="collapse navbar-collapse" id="navbarNavDropdown">
2327

24-
<ul class="navbar-nav">
28+
<ul class="navbar-nav nav-underline">
2529

26-
<li class="nav-item dropdown {% dropdownActive 'demos' %}">
30+
<li class="nav-item dropdown">
2731
<a
2832
href="#"
29-
class="nav-link dropdown-toggle"
33+
class="nav-link dropdown-toggle {% dropdownActive 'demos' %}"
3034
data-bs-toggle="dropdown"
3135
role="button"
3236
aria-expanded="false">Examples
@@ -37,23 +41,27 @@
3741
<a class="dropdown-item" href="/demos">Demos</a>
3842
</li>
3943
<li>
40-
<a class="dropdown-item" href="https://snippets.haxeflixel.com/">Snippets</a>
44+
<a class="dropdown-item" href="https://snippets.haxeflixel.com/">
45+
<i class="bi bi-link-45deg"></i>
46+
Snippets
47+
</a>
4148
</li>
4249
</ul>
4350
</li>
4451

45-
<li class="nav-item {% dropdownActive 'showcase' %}">
46-
<a class="nav-link" href="/showcase">Showcase</a>
52+
53+
<li class="nav-item">
54+
<a class="nav-link {% dropdownActive 'showcase' %}" href="/showcase">Showcase</a>
4755
</li>
4856

4957
{% comment %} <li <%= @ablog %>> {% endcomment %}
50-
<li class="nav-item {% dropdownActive 'blog' %}">
51-
<a class="nav-link" href="/blog">Blog</a>
58+
<li class="nav-item">
59+
<a class="nav-link {% dropdownActive 'blog' %}" href="/blog">Blog</a>
5260
</li>
5361

5462
{% comment %} <li <%= @adocs %>> {% endcomment %}
55-
<li class="nav-item {% dropdownActive 'documentation' %}">
56-
<a class="nav-link" href="/documentation">Docs</a>
63+
<li class="nav-item">
64+
<a class="nav-link {% dropdownActive 'documentation' %}" href="/documentation">Docs</a>
5765
</li>
5866

5967
<li class="nav-item">
@@ -62,7 +70,8 @@
6270

6371
{% comment %} <li <%= @aforum %>> {% endcomment %}
6472
<li class="nav-item">
65-
<a class="nav-link" href="https://github.com/HaxeFlixel/flixel/discussions">Forum</a>
73+
<a class="nav-link" href="https://github.com/HaxeFlixel/flixel/discussions">Forum
74+
</a>
6675
</li>
6776

6877
</ul>

‎scss/style.scss

+34-19
Original file line numberDiff line numberDiff line change
@@ -26,6 +26,8 @@ body {
2626
a.showcaseTarget:hover > img {
2727
@include hover-scale-fx(1.10);
2828
}
29+
30+
2931

3032

3133

@@ -63,11 +65,19 @@ body {
6365

6466
/* Navbar
6567
-------------------------------------------------- */
66-
67-
.navbar-brand {
68-
padding: 10px;
68+
.navbar {
69+
background-color: #222;
70+
a, li > a {
71+
transition: all 0.25s ease 0s;
72+
color: #FFF !important;
73+
}
74+
75+
76+
a:hover, .navbar-brand {
77+
color: #fff !important;
78+
}
6979
}
70-
80+
7181
.search-form {
7282
float: right;
7383
}
@@ -89,6 +99,25 @@ body {
8999
// display: none;
90100
// }
91101
// }
102+
103+
104+
.inverse-dropdown {
105+
background-color: #222 !important;
106+
border-color: #080808 !important;
107+
108+
}
109+
110+
.inverse-dropdown.divider {
111+
background-color: #000 !important;
112+
}
113+
114+
.inverse-dropdown>li>a {
115+
color: #9d9d9d !important;
116+
}
117+
.inverse-dropdown>li>a:hover {
118+
color: #fff !important;
119+
background-color: #000 !important;
120+
}
92121

93122

94123
.nav .caret {
@@ -210,22 +239,8 @@ body {
210239
.aseprite-logo {
211240
max-width: 234px;
212241
}
242+
213243

214-
code {
215-
padding: 0;
216-
padding-top: 0.2em;
217-
padding-bottom: 0.2em;
218-
margin: 0;
219-
font-size: 85%;
220-
background-color: rgba(27,31,35,0.05);
221-
border-radius: 3px;
222-
border: 0px;
223-
}
224-
225-
code:not(.hljs)::before, code:not(.hljs)::after {
226-
letter-spacing: -0.2em;
227-
content: "\00a0";
228-
}
229244

230245

231246

‎src/partials/header-menu.html.eco

+20-14
Original file line numberDiff line numberDiff line change
@@ -1,20 +1,26 @@
11
<header>
2-
<nav class="navbar navbar-expand-lg bg-body-tertiary">
2+
<nav class="navbar navbar-expand-lg">
33
<div class="container-fluid">
44

5-
<a href="/" class="navbar-brand"><img src="/images/haxeflixel-header.svg" height="31" alt="HaxeFlixel" /></a>
6-
7-
8-
<button
9-
class="navbar-toggler"
10-
type="button"
11-
data-bs-toggle="collapse"
12-
data-bs-target="#navbarSupportedContent"
13-
aria-controls="navbarSupportedContent"
14-
aria-expanded="false"
15-
aria-label="Toggle navigation">
16-
<span class="navbar-toggler-icon"></span>
17-
</button>
5+
<a href="/" class="navbar-brand fs-3 fw-medium">
6+
<img
7+
src="/images/haxeflixel.svg"
8+
height="31"
9+
alt="HaxeFlixel"
10+
class="d-inline-block align-text-bottom">
11+
HaxeFlixel
12+
</a>
13+
14+
<button
15+
class="navbar-toggler"
16+
type="button"
17+
data-bs-toggle="collapse"
18+
data-bs-target="#navbarNavDropdown"
19+
aria-expanded="false"
20+
aria-controls="navbarNavDropdown"
21+
aria-label="Toggle navigation">
22+
<span class="navbar-toggler-icon"></span>
23+
</button>
1824

1925

2026
<div class="navbar-collapse collapse" id="navbarNavDropdown">

0 commit comments

Comments
 (0)