Skip to content

Commit 6772353

Browse files
geoffguillaingeoffguillain
committed
Fix multiple issues with header menu
1 parent be1ab2f commit 6772353

9 files changed

Lines changed: 213 additions & 232 deletions

‎themes/osi/assets/css/editor-style.css‎

Lines changed: 0 additions & 4 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎themes/osi/assets/css/editor-style.css.map‎

Lines changed: 1 addition & 1 deletion
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎themes/osi/assets/scss/_6_components.header.scss‎

Lines changed: 130 additions & 153 deletions
Original file line numberDiff line numberDiff line change
@@ -15,101 +15,124 @@
1515
}
1616

1717
}
18-
.header--inner {
19-
padding: 0;
20-
position: static;
21-
opacity: 1;
22-
transition: all .3s;
23-
z-index:999;
24-
25-
@media only screen and ( max-width: 1200px ) {
26-
background: #fff;
27-
}
28-
}
29-
30-
.header--quicklinks {
31-
padding: .5em;
32-
background: $Ndarkest;
33-
position: relative;
34-
overflow: auto;
18+
.header-main {
19+
.header--inner {
20+
position: static;
21+
opacity: 1;
3522
transition: all .3s;
36-
z-index:1000;
37-
}
38-
39-
.header--quicklinks-inner {
40-
position: relative;
41-
}
23+
z-index:999;
24+
height: 125px;
25+
display: flex;
26+
align-items: center;
27+
28+
@media only screen and ( max-width: 1200px ) {
29+
background: #fff;
30+
padding: 16px;
31+
}
32+
@media only screen and (max-width: #{$break-small}) {
33+
padding: 8px 16px;
34+
}
4235

43-
.header--blog-name {
44-
box-sizing: border-box;
45-
height: 100%;
46-
// margin: .3em;
47-
// transition: all .3s;
48-
// width: 80%;
49-
50-
a {
51-
color: $Ndarkest;
52-
display: inline-block;
53-
font-weight: bold;
54-
line-height: 1;
55-
text-decoration: none;
36+
.header--blog-name {
37+
box-sizing: border-box;
38+
max-width: calc(100% - 130px);
39+
max-height: 110px;
5640
height: 100%;
57-
transition: none;
58-
59-
&:hover, &:focus {
41+
display: flex;
42+
align-items: center;
43+
44+
a {
45+
color: $Ndarkest;
46+
display: block;
47+
font-weight: bold;
48+
line-height: 1;
6049
text-decoration: none;
50+
transition: none;
51+
52+
&:hover,
53+
&:focus {
54+
text-decoration: none;
55+
}
6156
}
62-
}
6357

64-
img { // all logos
65-
max-height: 5.4em;
66-
width: auto;
67-
margin: 0 10px 0 auto;
68-
transform: translateZ(0); // chrome blurry fix
69-
}
58+
img {
59+
// all logos
60+
max-width: 300px;
61+
height: auto;
62+
width: 100%;
63+
transform: translateZ(0); // chrome blurry fix
64+
transition: all .3s;
65+
}
7066

71-
.hide-mobile {
72-
display: none;
73-
}
67+
.hide-mobile {
68+
display: none;
69+
}
7470

75-
.header-logo-mobile {
76-
display: block;
71+
.header-logo-mobile {
72+
display: block;
73+
}
7774
}
7875
}
7976

80-
.header--extra-text {
81-
clear: both;
82-
padding: 0 1rem;
77+
&.header-main-small {
78+
.header--inner {
79+
padding-top: 16px;
80+
padding-bottom: 16px;
81+
max-height: 100px;
82+
83+
.header--blog-name {
84+
a {
85+
img {
86+
max-height: 60px;
87+
}
88+
}
89+
}
90+
}
8391
}
8492

85-
.header-main-small {
93+
94+
}
8695

87-
.header--quicklinks {
88-
padding-top: 0;
89-
padding-bottom: 0;
90-
overflow: hidden;
91-
transition: all .3s;
92-
}
96+
.header--quicklinks {
97+
padding: .5em;
98+
background: $Ndarkest;
99+
position: relative;
100+
overflow: auto;
101+
transition: all .3s;
102+
z-index: 1000;
103+
}
93104

94-
.header--inner {
95-
// opacity: 0;
96-
overflow: hidden;
97-
transition: all .3s;
98-
}
105+
.header--quicklinks-inner {
106+
position: relative;
107+
}
99108

100-
.header--blog-name {
109+
.header--extra-text {
110+
clear: both;
111+
padding: 0 1rem;
112+
}
101113

102-
}
114+
.header-main-small {
103115

104-
.header--extra-text {
105-
display: none;
106-
}
116+
.header--quicklinks {
117+
padding-top: 0;
118+
padding-bottom: 0;
119+
overflow: hidden;
120+
transition: all .3s;
107121
}
108122

123+
.header--inner {
124+
// opacity: 0;
125+
overflow: hidden;
126+
transition: all .3s;
127+
}
109128

129+
.header--blog-name {
110130

111-
@media only screen and (min-width: #{$break-small}) {
131+
}
112132

133+
.header--extra-text {
134+
display: none;
135+
}
113136
}
114137

115138
@media only screen and (max-width: #{$break-nav}) {
@@ -121,102 +144,56 @@
121144
}
122145

123146
@media only screen and (min-width: #{$break-nav}) {
124-
.header-main {
147+
.header--inner, .header--quicklinks-inner {
148+
// @include clearfix();
149+
padding-left: $maxPadding;
150+
padding-right: $maxPadding;
151+
padding-top: 1em;
125152
}
126153

127-
.header--inner, .header--quicklinks-inner {
128-
@include clearfix();
129-
padding-left: $maxPadding;
130-
padding-right: $maxPadding;
131-
padding-top: 1em;
154+
.header--inner {
155+
border: 0;
156+
position: relative;
157+
}
158+
.header--blog-name {
159+
.hide-mobile {
160+
display: inline-block;
132161
}
133162

134-
.header--inner {
135-
border: 0;
136-
position: relative;
163+
.header-logo-mobile {
164+
display: none;
137165
}
138-
.header--blog-name {
139-
// float: left;
140-
// font-size: 1.2em;
141-
// margin: 0;
142-
// padding-left: 0;
143-
// text-align: left;
144-
// width: inherit;
145-
146-
.header-logo {
147-
display: inline-block;
148-
}
149-
150-
.hide-mobile {
151-
display: inline-block;
152-
}
153-
154-
.header-logo-mobile {
155-
display: none;
156-
}
157-
158-
img {
159-
margin-top: -16px;
160-
}
161-
}
162-
163-
.header--extra-text {
164-
text-align: right;
165-
float: right;
166-
clear: right;
167-
padding: 0;
168-
}
169-
170-
.header-main-small {
171-
background-color: $Nwhite;
172-
173-
.header--inner {
174-
// height: 2.2em;
175-
// overflow: visible;
176-
// top: 0;
177-
// opacity: 1;
178-
}
166+
}
179167

180-
.header--blog-name {
181-
display: none;
182-
opacity: 0;
183-
}
168+
.header--extra-text {
169+
text-align: right;
170+
float: right;
171+
clear: right;
172+
padding: 0;
173+
}
184174

185-
.nav-main {
186-
height: auto;
187-
top: 0;
188-
// transition: all .2s;
189-
margin-top: 0;
190-
191-
.nav-main--menu > .menu-item > a {
192-
padding-top: 0.6em;
193-
padding-bottom: 0.5em;
194-
transition: all .3s;
195-
}
175+
.header-main-small {
176+
background-color: $Nwhite;
177+
178+
.nav-main {
179+
height: auto;
180+
top: 0;
181+
// transition: all .2s;
182+
margin-top: 0;
183+
184+
.nav-main--menu > .menu-item > a {
185+
padding-top: 0.6em;
186+
padding-bottom: 0.5em;
187+
transition: all .3s;
196188
}
197189
}
190+
}
198191
}
199192

200-
201-
202193
@media only screen and (min-width: #{$break-wide}) {
203194
.header--inner, .header--quicklinks-inner {
204195
// @include center-block;
205196
display: flex;
206197
align-items: center;
207-
208-
}
209-
210-
.header-main-small {
211-
212-
.header--blog-name {
213-
// display: inline-block;
214-
215-
img {
216-
margin-top: -16px;
217-
}
218-
219-
}
220-
221198
}
222199
}

‎themes/osi/assets/scss/_6_components.mobile-menu.scss‎

Lines changed: 14 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,17 @@
1-
.open-button-wrapper {
2-
position: absolute;
3-
// top: $quicklinksTop; // height of quicklinks
4-
// top: 0;
5-
top: 7px;
6-
width: 100%;
1+
.site-header {
2+
.open-button-wrapper {
3+
position: absolute;
4+
// top: $quicklinksTop; // height of quicklinks
5+
// top: 0;
6+
top: 35px;
7+
right: 16px;
8+
}
9+
10+
&.header-main-small {
11+
.open-button-wrapper {
12+
top: 25px;
13+
}
14+
}
715
}
816

917
.open-the-menu {

‎themes/osi/assets/scss/_6_components.navigation.scss‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -115,7 +115,7 @@ nav {
115115

116116
// Main Menu Mobile
117117
.nav-mobile--menu {
118-
padding: 1em;
118+
padding: 3em 1em;
119119
margin-top: 1em;
120120
text-align: right;
121121
}

0 commit comments

Comments
 (0)