Skip to content

Commit 501a7b7

Browse files
authored
[APT-1649] Collapse the right nav links into a dropdown menu at smaller sizes (#137)
* Collapse the right nav links into a dropdown menu at smaller sizes This prevents a stacking issue which caused the Gruntwork logo to wind up getting squished when at smaller sizes between desktop and mobile layouts.
1 parent 074c79a commit 501a7b7

File tree

2 files changed

+44
-8
lines changed

2 files changed

+44
-8
lines changed

docusaurus.config.js

Lines changed: 20 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -116,6 +116,26 @@ const config = {
116116
label: "Sign In",
117117
position: "right",
118118
},
119+
{
120+
type: "dropdown",
121+
label: "More…",
122+
position: "right",
123+
id: "more_dropdown",
124+
items: [
125+
{
126+
href: "https://github.com/gruntwork-io/knowledge-base/discussions",
127+
label: "Knowledge Base",
128+
},
129+
{
130+
href: "/docs/guides/support",
131+
label: "Support",
132+
},
133+
{
134+
href: "https://app.gruntwork.io",
135+
label: "Sign In",
136+
},
137+
],
138+
},
119139
],
120140
},
121141
footer: {

src/css/custom.css

Lines changed: 24 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -125,12 +125,6 @@ p > img + em {
125125
justify-items: center;
126126
}
127127

128-
@media only screen and (max-width: 996px) {
129-
.navbar__brand {
130-
border-right: none;
131-
}
132-
}
133-
134128
.navbar__logo {
135129
height: 2.5rem;
136130
margin-top: 0.5rem;
@@ -274,9 +268,11 @@ html[data-theme="dark"] .menu__link--sublist {
274268
color: var(--ifm-color-primary-lightest);
275269
}
276270

277-
/* remove external link icons on header/footer links */
271+
/* remove external link icons on header/footer/flyout links */
278272
.footer__link-item svg,
279-
.navbar__items--right .navbar__link svg {
273+
.navbar__items--right .navbar__link svg,
274+
.navbar__items--right .dropdown__link svg,
275+
.navbar-sidebar__items .menu__link svg {
280276
display: none;
281277
}
282278

@@ -291,3 +287,23 @@ html[data-theme="dark"] .menu__link--sublist {
291287
display: none;
292288
}
293289
}
290+
291+
#more_dropdown {
292+
display: none;
293+
}
294+
295+
@media only screen and (max-width: 1280px) and (min-width: 996px) {
296+
.navbar__items--right > a {
297+
display: none;
298+
}
299+
300+
#more_dropdown {
301+
display: block;
302+
}
303+
}
304+
305+
@media only screen and (max-width: 996px) {
306+
.navbar__brand {
307+
border-right: none;
308+
}
309+
}

0 commit comments

Comments
 (0)