Skip to content

Commit b84a9b5

Browse files
author
Tim Bannister
committed
Update top nav for Docsy 0.7 / Bootstrap 5.x
1 parent 25e2414 commit b84a9b5

File tree

4 files changed

+196
-72
lines changed

4 files changed

+196
-72
lines changed

‎assets/icons/logo.svg‎

Lines changed: 110 additions & 0 deletions
Loading

‎assets/scss/_custom.scss‎

Lines changed: 73 additions & 63 deletions
Original file line numberDiff line numberDiff line change
@@ -130,79 +130,98 @@ body.td-404 main .error-details {
130130

131131
/* HEADER */
132132

133-
.td-navbar {
133+
body > header:first-child nav.td-navbar {
134+
width: 100vw;
134135
position: fixed !important;
135-
width: 100%;
136+
margin: 0;
137+
padding: 0;
136138
padding-bottom: 1rem !important;
137-
background: transparent !important;
139+
background: transparent;
138140
transition: 0.3s;
139141

140142
.navbar-brand {
141-
position: absolute;
142-
width: 45px;
143-
height: 44px;
144-
background-repeat: no-repeat;
145-
background-size: contain;
146-
background-image: url("/images/logo-header.png");
143+
display: inline-block;
144+
margin-top: 0.5rem;
147145
}
148146

149-
#hamburger {
150-
&:focus {
151-
outline: none;
152-
}
147+
.navbar-site-title {
148+
display: none;
149+
visibility: collapse;
153150
}
154151

155-
@media only screen and (min-width: 768px) {
156-
.navbar-brand {
157-
background-image: url("/images/nav_logo.svg");
158-
top: 1.5rem;
159-
width: 180px;
160-
margin-left: 1rem;
152+
#main_navbar {
153+
ul.navbar-nav > li {
154+
a.nav-link {
155+
display: block;
156+
border-bottom : 2px solid transparent;
157+
}
158+
159+
a.nav-link.active {
160+
border-bottom : 2px solid $white;
161+
}
161162
}
162163
}
163-
}
164-
165-
.td-navbar-nav-scroll {
166-
overflow: visible !important;
167-
display: none;
168164

169-
.navbar-nav {
170-
overflow: visible !important;
171-
position: relative;
172-
display: flex;
173-
flex-direction: row;
174-
flex-wrap: wrap;
175-
justify-content: space-evenly;
165+
@media only screen and (max-width: 1280px) and (min-width: 1024px) {
166+
.search-bar {
167+
display: none;
168+
}
169+
#main_navbar {
170+
position: fixed;
171+
right: 0;
176172

177-
.nav-item {
178-
position: relative;
179-
height: 10%;
173+
}
174+
}
175+
@media only screen and (max-width: 512px) {
176+
& {
177+
min-height: 10rem;
178+
}
179+
#main_navbar {
180+
ul.navbar-nav {
181+
visibility: hidden;
182+
}
183+
}
184+
}
185+
@media only screen and (max-width: 1024px) {
186+
#main_navbar {
187+
ul.navbar-nav {
188+
justify-content: center;
189+
max-width: calc(max(80vw, 100vw-1.5rem));
190+
flex-wrap: wrap;
191+
overflow-x: clip;
192+
min-height: 2rem;
180193

181-
.active::after {
182-
position: absolute;
183-
width: 100%;
184-
height: 2px;
185-
content: "";
186-
bottom: -4px;
187-
left: 0;
188-
background: #fff;
189194
}
190195
}
191196
}
192197

193-
@media only screen and (min-width: 768px) {
194-
display: block;
195-
margin-top: 3.5rem !important;
198+
#hamburger {
199+
position: fixed;
200+
right: 1rem;
201+
top: 1rem;
202+
&:focus {
203+
outline: none;
204+
}
205+
}
206+
// Kubernetes logo starts off with white text
207+
.navbar-logo #kubernetes-logo-text {
208+
fill: $white;
196209
}
210+
}
197211

198-
@media only screen and (min-width: 1170px) {
199-
margin-top: 1rem !important;
212+
body > header:first-child nav.td-navbar + section.header-hero {
213+
@media only screen and (max-width: 512px) {
214+
h1 {
215+
visibility: hidden;
216+
}
217+
h1 {
218+
visibility: collapse; // if supported
219+
}
200220
}
201221
}
202222

203-
// Flip-Nav
204-
.flip-nav .td-navbar {
205-
background-color: white !important;
223+
.flip-nav body > header:first-child nav.td-navbar {
224+
background-color: $white;
206225
box-shadow: 0 1px 2px $medium-grey;
207226

208227
.navbar-nav {
@@ -224,14 +243,6 @@ body.td-404 main .error-details {
224243
}
225244
}
226245

227-
.navbar-nav .nav-item .active {
228-
color: $dark-grey;
229-
230-
&::after {
231-
background: $dark-grey;
232-
}
233-
}
234-
235246
#hamburger:hover {
236247
div,
237248
&:before,
@@ -240,14 +251,13 @@ body.td-404 main .error-details {
240251
}
241252
}
242253

243-
@media only screen and (min-width: 768px) {
244-
.navbar-brand {
245-
background-image: url("/images/nav_logo2.svg");
246-
}
254+
// Kubernetes logo changes to blue text
255+
.navbar-logo #kubernetes-logo-text {
256+
fill: $primary;
247257
}
248258
}
249259

250-
.search-item.nav-item {
260+
header nav.navbar .search-bar {
251261
input, input::placeholder {
252262
color: black;
253263
width: 200px;

‎assets/scss/_variables_project.scss‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -20,3 +20,8 @@ $tooltip-font-size: 1rem;
2020
$tooltip-padding: 5px 8px;
2121
$tooltip-border-radius: 6px;
2222
$tooltip-font-weight: 400;
23+
24+
// input placeholders
25+
$input-placeholder-color: $gray-600 !default;
26+
$placeholder-opacity-max: .5 !default;
27+
$placeholder-opacity-min: .2 !default;

‎layouts/partials/navbar.html‎

Lines changed: 8 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -1,33 +1,32 @@
11
{{ $cover := .HasShortcode "blocks/cover" }}
2-
<nav class="js-navbar-scroll navbar navbar-expand navbar-dark {{ if $cover}} td-navbar-cover {{ end }} flex-column flex-md-row td-navbar" data-auto-burger="primary">
3-
<a class="navbar-brand img-fluid" href="{{ .Site.Home.RelPermalink }}"></a>
2+
<nav class="js-navbar-scroll navbar navbar-expand navbar-dark {{ if $cover}} td-navbar-cover {{ end }}flex-column flex-md-row td-navbar" data-auto-burger="primary">
3+
<a class="navbar-brand" href="{{ .Site.Home.RelPermalink }}">
4+
<span class="navbar-logo">{{ if .Site.Params.ui.navbar_logo }}{{ with resources.Get "icons/logo.svg" }}{{ ( . | minify).Content | safeHTML }}{{ end }}{{ end }}</span><span class="navbar-site-title font-weight-bold">{{ .Site.Title }}</span>
5+
</a>
46
<div class="td-navbar-nav-scroll ml-md-auto" id="main_navbar">
5-
67
<ul class="navbar-nav mt-2 mt-lg-0">
78
{{ $p := . }}
89
{{ $sections := slice "docs" "blog" "training" "partners" "community" "case-studies" }}
910
{{ range $sections }}
1011
{{ with site.GetPage "section" . }}
11-
<li class="nav-item mr-2 mb-lg-0">
12+
<li class="nav-item mr-4 mb-2 mb-lg-0">
1213
{{ $active := eq .Section $.Section }}
1314
<a class="nav-link{{if $active }} active{{end}}" href="{{ .RelPermalink }}" >{{ .Title }}</a>
1415
</li>
1516
{{ end }}
1617
{{ end }}
1718
{{ if .Site.Params.versions }}
18-
<li class="nav-item mr-n3 mr-lg-0 dropdown">
19+
<li class="nav-item dropdown mr-4 d-none d-lg-block">
1920
{{ partial "navbar-version-selector.html" . }}
2021
</li>
2122
{{ end }}
2223
{{ if (gt (len .Site.Home.Translations) 0) }}
23-
<li class="nav-item mr-n4 mr-lg-0 dropdown">
24+
<li class="nav-item dropdown mr-4 d-none d-lg-block">
2425
{{ partial "navbar-lang-selector.html" . }}
2526
</li>
2627
{{ end }}
27-
<li class="search-item nav-item mr-n4 mr-lg-0">
28-
{{ partial "search-input.html" . }}
29-
</li>
3028
</ul>
3129
</div>
30+
<div class="navbar-nav d-none d-lg-block">{{ partial "search-input.html" . }}</div>
3231
<button id="hamburger" onclick="kub.toggleMenu()" data-auto-burger-exclude><div></div></button>
3332
</nav>

0 commit comments

Comments
 (0)