Skip to content

Commit 0234ced

Browse files
author
Tim Bannister
committed
Update top nav for Docsy 0.7 / Bootstrap 5.x
1 parent 1700865 commit 0234ced

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
@@ -133,79 +133,98 @@ body.td-404 main .error-details {
133133

134134
/* HEADER */
135135

136-
.td-navbar {
136+
body > header:first-child nav.td-navbar {
137+
width: 100vw;
137138
position: fixed !important;
138-
width: 100%;
139+
margin: 0;
140+
padding: 0;
139141
padding-bottom: 1rem !important;
140-
background: transparent !important;
142+
background: transparent;
141143
transition: 0.3s;
142144

143145
.navbar-brand {
144-
position: absolute;
145-
width: 45px;
146-
height: 44px;
147-
background-repeat: no-repeat;
148-
background-size: contain;
149-
background-image: url("/images/logo-header.png");
146+
display: inline-block;
147+
margin-top: 0.5rem;
150148
}
151149

152-
#hamburger {
153-
&:focus {
154-
outline: none;
155-
}
150+
.navbar-site-title {
151+
display: none;
152+
visibility: collapse;
156153
}
157154

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

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

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

184-
.active::after {
185-
position: absolute;
186-
width: 100%;
187-
height: 2px;
188-
content: "";
189-
bottom: -4px;
190-
left: 0;
191-
background: #fff;
192197
}
193198
}
194199
}
195200

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

201-
@media only screen and (min-width: 1170px) {
202-
margin-top: 1rem !important;
215+
body > header:first-child nav.td-navbar + section.header-hero {
216+
@media only screen and (max-width: 512px) {
217+
h1 {
218+
visibility: hidden;
219+
}
220+
h1 {
221+
visibility: collapse; // if supported
222+
}
203223
}
204224
}
205225

206-
// Flip-Nav
207-
.flip-nav .td-navbar {
208-
background-color: white !important;
226+
.flip-nav body > header:first-child nav.td-navbar {
227+
background-color: $white;
209228
box-shadow: 0 1px 2px $medium-grey;
210229

211230
.navbar-nav {
@@ -227,14 +246,6 @@ body.td-404 main .error-details {
227246
}
228247
}
229248

230-
.navbar-nav .nav-item .active {
231-
color: $dark-grey;
232-
233-
&::after {
234-
background: $dark-grey;
235-
}
236-
}
237-
238249
#hamburger:hover {
239250
div,
240251
&:before,
@@ -243,14 +254,13 @@ body.td-404 main .error-details {
243254
}
244255
}
245256

246-
@media only screen and (min-width: 768px) {
247-
.navbar-brand {
248-
background-image: url("/images/nav_logo2.svg");
249-
}
257+
// Kubernetes logo changes to blue text
258+
.navbar-logo #kubernetes-logo-text {
259+
fill: $primary;
250260
}
251261
}
252262

253-
.search-item.nav-item {
263+
header nav.navbar .search-bar {
254264
input, input::placeholder {
255265
color: black;
256266
}

‎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)