| |
@@ -31,6 +31,10 @@
|
| |
.nav-menu {
|
| |
flex-grow: 1;
|
| |
min-height: 0;
|
| |
+ width: 100%;
|
| |
+ padding: 0.5rem 0.75rem;
|
| |
+ line-height: 1.35;
|
| |
+
|
| |
}
|
| |
|
| |
nav.nav-menu span.nav-text strong {
|
| |
@@ -46,13 +50,7 @@
|
| |
font-weight: 500;
|
| |
color: #424242;
|
| |
font-size: 1em;
|
| |
- /*
|
| |
- padding: 0.125em 0.75em 0.25em;
|
| |
- */
|
| |
- /*
|
| |
- padding: 0.25em 0.75em;
|
| |
- */
|
| |
- padding: 0.125rem 0.5rem 0.25rem;
|
| |
+ padding: 0.25em 0 0.125em;
|
| |
}
|
| |
|
| |
.nav-menu a,
|
| |
@@ -61,24 +59,30 @@
|
| |
}
|
| |
|
| |
.nav-list {
|
| |
- margin: 0;
|
| |
- /* bottom padding allows scroll to extend slightly beyond end of list */
|
| |
- padding: 0 0 0.5em;
|
| |
- width: 100%;
|
| |
+ margin: 0 0 0 0.8em;
|
| |
+ padding: 0;
|
| |
+
|
| |
}
|
| |
|
| |
- .nav-list .nav-list {
|
| |
- margin-left: 1em;
|
| |
- padding-bottom: 0;
|
| |
+ .nav-menu > .nav-list {
|
| |
+ margin-bottom: 0.5rem;
|
| |
+
|
| |
}
|
| |
|
| |
.nav-item {
|
| |
- display: flex;
|
| |
- align-items: flex-start;
|
| |
- flex-wrap: wrap;
|
| |
list-style: none;
|
| |
- padding-top: 5px;
|
| |
- padding-bottom: 5px;
|
| |
+ position: relative;
|
| |
+ /*
|
| |
+ margin-top: 0.375em;
|
| |
+ */
|
| |
+ margin-top: 0.5em;
|
| |
+
|
| |
+ }
|
| |
+ .nav-item .nav-list {
|
| |
+ /*
|
| |
+ margin-bottom: 0.5rem;
|
| |
+ */
|
| |
+ margin-bottom: 0.625rem;
|
| |
}
|
| |
|
| |
ul.nav-list .nav-item .is-current-page,
|
| |
@@ -95,39 +99,39 @@
|
| |
margin-left: 20px;
|
| |
}
|
| |
|
| |
- .nav-item:not(.is-active) > .nav-list {
|
| |
- display: none;
|
| |
+ .nav-item .nav-list {
|
| |
+ /*
|
| |
+ margin-bottom: 0.5rem;
|
| |
+ */
|
| |
+ margin-bottom: 0.625rem;
|
| |
+
|
| |
}
|
| |
|
| |
/* matches list without a title */
|
| |
.nav-item[data-depth="0"] > .nav-list:first-child {
|
| |
display: block;
|
| |
- margin-left: 0;
|
| |
+ margin: 0;
|
| |
}
|
| |
|
| |
- .nav-item[data-depth="0"] > .nav-list:first-child > .nav-item:first-child {
|
| |
- padding-top: 0;
|
| |
+ .nav-item:not(.is-active) > .nav-list {
|
| |
+ display: none;
|
| |
}
|
| |
|
| |
.nav-toggle {
|
| |
- background: transparent url(../img/caret.svg) no-repeat left center;
|
| |
- background-size: 85%;
|
| |
+ background: transparent url(../img/caret.svg) no-repeat center;
|
| |
+ background-size: 55%;
|
| |
border: none;
|
| |
cursor: pointer;
|
| |
height: 1.85em;
|
| |
outline: none;
|
| |
- padding: 0;
|
| |
- /* nudge font size and width to fix calculation error in Chrome */
|
| |
- font-size: 0.95em;
|
| |
- width: 1.0526em;
|
| |
- }
|
| |
+ position: absolute;
|
| |
+ height: 1.35em; /* NOTE must match line-height of text */
|
| |
+ width: 1.5em;
|
| |
+ margin-left: -1.5em;
|
| |
|
| |
- @media (min-width: 769px) {
|
| |
- .nav-toggle {
|
| |
- height: 1.6em;
|
| |
- }
|
| |
}
|
| |
|
| |
+
|
| |
.nav-toggle::-moz-focus-inner {
|
| |
border: none;
|
| |
}
|
| |
@@ -136,27 +140,7 @@
|
| |
transform: rotate(90deg);
|
| |
}
|
| |
|
| |
- .nav-link,
|
| |
- .nav-text {
|
| |
- display: inline-block;
|
| |
- line-height: 1.85;
|
| |
- margin-left: 1em;
|
| |
- padding-left: 0.25em;
|
| |
- }
|
| |
-
|
| |
- @media (min-width: 769px) {
|
| |
- .nav-link,
|
| |
- .nav-text {
|
| |
- line-height: 1.6;
|
| |
- }
|
| |
- }
|
| |
-
|
| |
.is-current-page > .nav-link,
|
| |
.is-current-page > .nav-text {
|
| |
- font-weight: bold;
|
| |
- }
|
| |
-
|
| |
- .nav-toggle + .nav-link,
|
| |
- .nav-toggle + .nav-text {
|
| |
- margin-left: 0;
|
| |
+ font-weight: 500;
|
| |
}
|
| |
kaylee20
commented 5 years ago
Fix: #43
This is caused by the use of flex for the navigation item. Instead of using flex, the toggle arrow should be placed using absolute positioning so as not to affect the layout of the text.
This commit made the following changes;
- Absolute positioning used for toggle to avoid unintended wrapping behavior
- Size of toggle button reduced
- Line height was tightened
- Adjust spacing