├── .gitignore ├── LICENSE ├── README.md ├── index.html ├── main.css └── main.scss /.gitignore: -------------------------------------------------------------------------------- 1 | /main.css.map -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | MIT License 2 | 3 | Copyright (c) 2020 Sam Cross 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy 6 | of this software and associated documentation files (the "Software"), to deal 7 | in the Software without restriction, including without limitation the rights 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 9 | copies of the Software, and to permit persons to whom the Software is 10 | furnished to do so, subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included in all 13 | copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE 21 | SOFTWARE. 22 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | **This project is not currently being developed, but if PRs are submitted they'll be checked merged where suitable!** 2 | 3 | # Responsive CSS-only Header 4 | 5 | * **NO JavaScript** 6 | * Fully-responsive, mobile-first 7 | * Easily customisable with SCSS variables 8 | * SCSS-powered 9 | * Breakpoints for tablet and desktop layouts 10 | 11 | This is a fully-responsive CSS-only header for your websites and other web applications! It uses `position: sticky` to stay at the top of the screen, and has mobile, tablet, and desktop layouts, with a maximum width (after which it centers itself). 12 | 13 | ## Licence 14 | 15 | This project is licenced under the MIT licence. 16 | 17 | I'd love to see what you make with this, so please send me an email with your projects! 18 | 19 | ## Usage 20 | 21 | TBA 22 | 23 | ## Modification 24 | 25 | Edit the SCSS file and run Live SCSS Compiler (VS Code extension) or similar build tool to run. 26 | 27 | Alternatively, just find-and-replace the variable values in the CSS file. 28 | 29 | **If submitting a pull request, please edit `main.scss` and commit both `main.scss` and a rebuilt `main.css`.** 30 | -------------------------------------------------------------------------------- /index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Responsive Header 8 | 9 | 12 | 14 | 15 | 16 | 17 | 18 |
19 |
20 | 23 | 24 | 25 | 28 | 29 |
30 | 38 | 39 |
40 | Get a Quote 41 | Redeem Quote 42 |
43 |
44 |
45 |
46 | 47 |
48 |

Responsive Header

49 |

A fully-responsive CSS-only header for your websites and other web applications.

50 | 51 |

Technology

52 |

This header is built with absolutely no JavaScript dependency. It uses CSS flexbox and grid for positioning 53 | (sorry older browsers!), and works on the smallest mobiles around.

54 | 55 |

Please note: The menu uses a checkbox to open and close. You may need to add a handler to 56 | ensure the checkbox is closed after a link is selected, if using React, or a similar library.

57 | 58 |

Random Content Follows

59 |

Below are some chunks of lorem ipsum to fill the space. Feel free to ignore them.

60 | 61 |

More Content

62 |

This is some page content. Ad minim non pariatur eiusmod adipisicing magna incididunt qui cupidatat. In Lorem 63 | ullamco exercitation in laborum magna. Aliqua cillum do pariatur dolor adipisicing ea enim. Deserunt nisi 64 | voluptate amet veniam aute ad duis cillum laborum occaecat nisi. Veniam occaecat eiusmod eu eu excepteur 65 | nostrud consectetur velit Lorem incididunt consectetur in dolore. Non fugiat deserunt exercitation ullamco. 66 | Consequat dolor veniam consequat voluptate non ad laboris.

67 | 68 |

More Content

69 |

This is some page content. Ad minim non pariatur eiusmod adipisicing magna incididunt qui cupidatat. In Lorem 70 | ullamco exercitation in laborum magna. Aliqua cillum do pariatur dolor adipisicing ea enim. Deserunt nisi 71 | voluptate amet veniam aute ad duis cillum laborum occaecat nisi. Veniam occaecat eiusmod eu eu excepteur 72 | nostrud consectetur velit Lorem incididunt consectetur in dolore. Non fugiat deserunt exercitation ullamco. 73 | Consequat dolor veniam consequat voluptate non ad laboris.

74 | 75 |

More Content

76 |

This is some page content. Ad minim non pariatur eiusmod adipisicing magna incididunt qui cupidatat. In Lorem 77 | ullamco exercitation in laborum magna. Aliqua cillum do pariatur dolor adipisicing ea enim. Deserunt nisi 78 | voluptate amet veniam aute ad duis cillum laborum occaecat nisi. Veniam occaecat eiusmod eu eu excepteur 79 | nostrud consectetur velit Lorem incididunt consectetur in dolore. Non fugiat deserunt exercitation ullamco. 80 | Consequat dolor veniam consequat voluptate non ad laboris.

81 | 82 |

More Content

83 |

This is some page content. Ad minim non pariatur eiusmod adipisicing magna incididunt qui cupidatat. In Lorem 84 | ullamco exercitation in laborum magna. Aliqua cillum do pariatur dolor adipisicing ea enim. Deserunt nisi 85 | voluptate amet veniam aute ad duis cillum laborum occaecat nisi. Veniam occaecat eiusmod eu eu excepteur 86 | nostrud consectetur velit Lorem incididunt consectetur in dolore. Non fugiat deserunt exercitation ullamco. 87 | Consequat dolor veniam consequat voluptate non ad laboris.

88 |
89 | 90 | 93 | 94 | 109 | 110 | 111 | -------------------------------------------------------------------------------- /main.css: -------------------------------------------------------------------------------- 1 | html { 2 | font-family: "Montserrat", sans-serif; 3 | font-size: 16px; 4 | overflow-x: hidden; 5 | } 6 | 7 | a { 8 | display: inline-block; 9 | text-decoration: none; 10 | } 11 | 12 | a.button { 13 | padding: 0.5rem 1rem; 14 | background: #121212; 15 | color: #fafafa; 16 | text-align: center; 17 | } 18 | 19 | a.button.primary { 20 | background: #36bae6; 21 | color: #e0e5eb; 22 | } 23 | 24 | /* Header */ 25 | header { 26 | position: -webkit-sticky; 27 | position: sticky; 28 | top: 0; 29 | height: 3.5rem; 30 | width: 100%; 31 | background: #fafafa; 32 | } 33 | 34 | header .container { 35 | position: absolute; 36 | -webkit-box-sizing: border-box; 37 | box-sizing: border-box; 38 | top: 0; 39 | left: 0; 40 | -webkit-transform: translateX(0); 41 | transform: translateX(0); 42 | display: -webkit-box; 43 | display: -ms-flexbox; 44 | display: flex; 45 | -webkit-box-orient: horizontal; 46 | -webkit-box-direction: normal; 47 | -ms-flex-direction: row; 48 | flex-direction: row; 49 | -webkit-box-align: center; 50 | -ms-flex-align: center; 51 | align-items: center; 52 | -webkit-box-pack: justify; 53 | -ms-flex-pack: justify; 54 | justify-content: space-between; 55 | width: 100%; 56 | max-width: 1200px; 57 | padding: 0 1.5rem; 58 | margin: 0 auto; 59 | border-bottom: 1px solid #e0e5eb; 60 | background: #fafafa; 61 | } 62 | 63 | header .container > .logo { 64 | height: 1rem; 65 | padding: 1.25rem 0; 66 | } 67 | 68 | input.hamburger-button { 69 | display: none; 70 | } 71 | 72 | input.hamburger-button ~ label { 73 | position: relative; 74 | padding: 0.25rem; 75 | width: 1.5rem; 76 | height: 1.25rem; 77 | } 78 | 79 | input.hamburger-button ~ label > div, 80 | input.hamburger-button ~ label > div::before, 81 | input.hamburger-button ~ label > div::after { 82 | content: ""; 83 | position: absolute; 84 | top: 0.825rem; 85 | height: 0.125rem; 86 | width: 1.5rem; 87 | opacity: 1; 88 | background: #121212; 89 | -webkit-transition: 0.14s ease-in-out; 90 | transition: 0.14s ease-in-out; 91 | } 92 | 93 | input.hamburger-button ~ label > div::before { 94 | top: -0.5rem; 95 | } 96 | 97 | input.hamburger-button ~ label > div::after { 98 | top: 0.5rem; 99 | } 100 | 101 | header .container .hamburger-button:checked ~ label > div { 102 | width: 0; 103 | background: rgba(18, 18, 18, 0); 104 | } 105 | 106 | header .container .hamburger-button:checked ~ label > div::before { 107 | -webkit-transform: rotateZ(45deg); 108 | transform: rotateZ(45deg); 109 | top: -0rem; 110 | } 111 | 112 | header .container .hamburger-button:checked ~ label > div::after { 113 | -webkit-transform: rotateZ(-45deg); 114 | transform: rotateZ(-45deg); 115 | top: -0rem; 116 | } 117 | 118 | header .container .hamburger-button:checked ~ .menu { 119 | left: 0; 120 | -webkit-transform: translateX(0); 121 | transform: translateX(0); 122 | } 123 | 124 | header .container .menu { 125 | position: absolute; 126 | z-index: -1; 127 | top: 3.5rem; 128 | -webkit-transform: translateX(calc(-100vw - 3rem)); 129 | transform: translateX(calc(-100vw - 3rem)); 130 | display: -ms-grid; 131 | display: grid; 132 | -ms-grid-columns: 1fr; 133 | grid-template-columns: 1fr; 134 | -ms-grid-rows: (max-content)[2]; 135 | grid-template-rows: repeat(2, -webkit-max-content); 136 | grid-template-rows: repeat(2, max-content); 137 | width: 100%; 138 | background: #fafafa; 139 | -webkit-transition: 0.22s ease-in-out; 140 | transition: 0.22s ease-in-out; 141 | } 142 | 143 | header .container .menu::after { 144 | content: ""; 145 | position: absolute; 146 | z-index: -1; 147 | height: 100vh; 148 | width: 100vw; 149 | background: #fafafa; 150 | } 151 | 152 | header .container .menu nav { 153 | grid-area: auto; 154 | } 155 | 156 | header .container .menu nav ul { 157 | display: -webkit-box; 158 | display: -ms-flexbox; 159 | display: flex; 160 | -webkit-box-orient: vertical; 161 | -webkit-box-direction: normal; 162 | -ms-flex-direction: column; 163 | flex-direction: column; 164 | } 165 | 166 | header .container .menu nav ul > li > a { 167 | -webkit-box-sizing: border-box; 168 | box-sizing: border-box; 169 | width: 100%; 170 | padding: 1rem 1.5rem; 171 | text-align: left; 172 | color: #121212; 173 | -webkit-transition: 0.14s ease-in-out; 174 | transition: 0.14s ease-in-out; 175 | } 176 | 177 | header .container .menu nav ul > li > a:hover { 178 | color: #36bae6; 179 | background: #e0e5eb; 180 | } 181 | 182 | header .container .menu div.buttons { 183 | grid-area: auto; 184 | display: -webkit-box; 185 | display: -ms-flexbox; 186 | display: flex; 187 | -webkit-box-align: center; 188 | -ms-flex-align: center; 189 | align-items: center; 190 | -webkit-box-pack: center; 191 | -ms-flex-pack: center; 192 | justify-content: center; 193 | -ms-flex-wrap: wrap; 194 | flex-wrap: wrap; 195 | padding: 0.5rem 1rem; 196 | border-top: 1px solid #e0e5eb; 197 | background: #fafafa; 198 | } 199 | 200 | header .container .menu div.buttons > * { 201 | -webkit-box-flex: 1; 202 | -ms-flex: 1; 203 | flex: 1; 204 | min-width: -webkit-min-content; 205 | min-width: -moz-min-content; 206 | min-width: min-content; 207 | margin: 0.5rem; 208 | } 209 | 210 | /* Media queries */ 211 | @media only screen and (min-width: 680px) { 212 | header { 213 | height: 6.5rem; 214 | border-bottom: 1px solid #e0e5eb; 215 | } 216 | header .container { 217 | left: 50%; 218 | -webkit-transform: translate(-50%, 0); 219 | transform: translate(-50%, 0); 220 | -webkit-box-pack: start; 221 | -ms-flex-pack: start; 222 | justify-content: flex-start; 223 | border: none; 224 | } 225 | input.hamburger-button ~ label { 226 | display: none; 227 | } 228 | header .container .menu { 229 | z-index: unset; 230 | top: 0; 231 | left: 0; 232 | -webkit-transform: translateX(0); 233 | transform: translateX(0); 234 | display: -ms-grid; 235 | display: grid; 236 | -ms-grid-columns: auto max-content; 237 | grid-template-columns: auto -webkit-max-content; 238 | grid-template-columns: auto max-content; 239 | -ms-grid-rows: 3.5rem 3rem; 240 | grid-template-rows: 3.5rem 3rem; 241 | background: none; 242 | -webkit-transition: none; 243 | transition: none; 244 | } 245 | header .container .menu::after { 246 | display: none; 247 | } 248 | header .container .menu div.buttons { 249 | -ms-grid-row: 1; 250 | -ms-grid-row-span: 1; 251 | -ms-grid-column: 2; 252 | -ms-grid-column-span: 1; 253 | grid-area: 1/2/2/3; 254 | -webkit-box-sizing: border-box; 255 | box-sizing: border-box; 256 | -webkit-box-orient: horizontal; 257 | -webkit-box-direction: normal; 258 | -ms-flex-direction: row; 259 | flex-direction: row; 260 | -webkit-box-align: center; 261 | -ms-flex-align: center; 262 | align-items: center; 263 | -webkit-box-pack: center; 264 | -ms-flex-pack: center; 265 | justify-content: center; 266 | padding: 0; 267 | margin: 0; 268 | border: none; 269 | } 270 | header .container .menu nav { 271 | -ms-grid-row: 2; 272 | -ms-grid-row-span: 1; 273 | -ms-grid-column: 1; 274 | -ms-grid-column-span: 2; 275 | grid-area: 2/1/3/3; 276 | } 277 | header .container .menu nav ul { 278 | -webkit-box-orient: horizontal; 279 | -webkit-box-direction: normal; 280 | -ms-flex-direction: row; 281 | flex-direction: row; 282 | -webkit-box-pack: center; 283 | -ms-flex-pack: center; 284 | justify-content: center; 285 | } 286 | header .container .menu nav ul > li { 287 | -webkit-box-flex: 1; 288 | -ms-flex: 1; 289 | flex: 1; 290 | } 291 | header .container .menu nav ul > li > a { 292 | display: inline-block; 293 | width: 100%; 294 | text-align: center; 295 | } 296 | } 297 | 298 | @media only screen and (min-width: 1040px) { 299 | header { 300 | height: 3.5rem; 301 | } 302 | header .container .menu { 303 | -webkit-box-sizing: border-box; 304 | box-sizing: border-box; 305 | -ms-grid-columns: 4rem auto max-content; 306 | grid-template-columns: 4rem auto -webkit-max-content; 307 | grid-template-columns: 4rem auto max-content; 308 | -ms-grid-rows: 1fr; 309 | grid-template-rows: 1fr; 310 | height: 3.5rem; 311 | padding: 0 1.5rem; 312 | -webkit-transition: none; 313 | transition: none; 314 | } 315 | header .container .menu nav { 316 | -ms-grid-row: 1; 317 | -ms-grid-row-span: 1; 318 | -ms-grid-column: 2; 319 | -ms-grid-column-span: 1; 320 | grid-area: 1/2/2/3; 321 | } 322 | header .container .menu div.buttons { 323 | -ms-grid-row: 1; 324 | -ms-grid-row-span: 1; 325 | -ms-grid-column: 3; 326 | -ms-grid-column-span: 1; 327 | grid-area: 1/3/2/4; 328 | } 329 | header .container .menu div.buttons > * { 330 | min-width: -webkit-max-content; 331 | min-width: -moz-max-content; 332 | min-width: max-content; 333 | } 334 | header .container .menu nav ul { 335 | -webkit-box-align: start; 336 | -ms-flex-align: start; 337 | align-items: flex-start; 338 | -webkit-box-pack: end; 339 | -ms-flex-pack: end; 340 | justify-content: flex-end; 341 | height: 100%; 342 | width: 100%; 343 | } 344 | header .container .menu nav ul > li { 345 | -webkit-box-flex: 0; 346 | -ms-flex: 0; 347 | flex: 0; 348 | } 349 | header .container .menu nav ul > li > a { 350 | width: -webkit-max-content; 351 | width: -moz-max-content; 352 | width: max-content; 353 | padding: 1.25rem 1.5rem; 354 | } 355 | } 356 | 357 | /* Other bits */ 358 | .page-content { 359 | -webkit-box-sizing: border-box; 360 | box-sizing: border-box; 361 | min-height: 1200px; 362 | max-width: 1200px; 363 | margin: 0 auto; 364 | padding: 1rem 1.5rem; 365 | } 366 | 367 | .page-content h1 { 368 | margin-top: 1.5rem; 369 | font-size: 3.25rem; 370 | font-weight: 300; 371 | word-break: break-all; 372 | } 373 | 374 | .page-content h2 { 375 | margin-top: 1.5rem; 376 | font-size: 1.75rem; 377 | font-weight: 500; 378 | word-break: break-all; 379 | } 380 | 381 | .page-content p { 382 | margin-top: 0.75rem; 383 | line-height: 1.25rem; 384 | } 385 | /*# sourceMappingURL=main.css.map */ -------------------------------------------------------------------------------- /main.scss: -------------------------------------------------------------------------------- 1 | // Variables 2 | 3 | $breakpoint_tablet: 680px; 4 | $breakpoint_desktop: 1040px; 5 | $max_header_width: 1200px; 6 | 7 | $color_background: #fafafa; 8 | $color_background_alt: #e0e5eb; 9 | $color_text: #121212; 10 | $color_text_alt: #36bae6; 11 | $color_border: #e0e5eb; 12 | 13 | $transition_link: 0.14s ease-in-out; 14 | $transition_anim: 0.22s ease-in-out; 15 | 16 | html { 17 | font-family: "Montserrat", sans-serif; 18 | font-size: 16px; 19 | 20 | overflow-x: hidden; 21 | } 22 | 23 | a { 24 | display: inline-block; 25 | 26 | text-decoration: none; 27 | 28 | &.button { 29 | padding: 0.5rem 1rem; 30 | 31 | background: $color_text; 32 | 33 | color: $color_background; 34 | text-align: center; 35 | 36 | &.primary { 37 | background: $color_text_alt; 38 | color: $color_background_alt; 39 | } 40 | } 41 | } 42 | 43 | /* Header */ 44 | 45 | header { 46 | position: sticky; 47 | top: 0; 48 | 49 | height: 3.5rem; 50 | width: 100%; 51 | 52 | background: $color_background; 53 | } 54 | header .container { 55 | position: absolute; 56 | box-sizing: border-box; 57 | top: 0; 58 | left: 0; 59 | transform: translateX(0); 60 | 61 | display: flex; 62 | flex-direction: row; 63 | align-items: center; 64 | justify-content: space-between; 65 | 66 | width: 100%; 67 | max-width: $max_header_width; 68 | 69 | padding: 0 1.5rem; 70 | 71 | margin: 0 auto; 72 | border-bottom: 1px solid $color_border; 73 | 74 | background: $color_background; 75 | 76 | & > .logo { 77 | height: 1rem; 78 | padding: 1.25rem 0; 79 | } 80 | } 81 | 82 | // Hamburger styles 83 | input.hamburger-button { 84 | display: none; // Hide checkbox 85 | 86 | & ~ label { 87 | position: relative; 88 | padding: 0.25rem; 89 | 90 | width: 1.5rem; 91 | height: 1.25rem; 92 | 93 | & > div, 94 | & > div::before, 95 | & > div::after { 96 | content: ""; 97 | position: absolute; 98 | top: 0.825rem; 99 | 100 | height: 0.125rem; 101 | width: 1.5rem; 102 | 103 | opacity: 1; 104 | 105 | background: $color_text; 106 | 107 | transition: $transition_link; 108 | } 109 | & > div::before { 110 | top: -0.5rem; 111 | } 112 | & > div::after { 113 | top: 0.5rem; 114 | } 115 | } 116 | } 117 | 118 | // Menu OPEN styles 119 | header .container .hamburger-button:checked { 120 | & ~ label { 121 | & > div { 122 | width: 0; 123 | background: transparentize($color_text, 1); 124 | } 125 | & > div::before { 126 | transform: rotateZ(45deg); 127 | top: -0rem; 128 | } 129 | & > div::after { 130 | transform: rotateZ(-45deg); 131 | top: -0rem; 132 | } 133 | } 134 | 135 | & ~ .menu { 136 | left: 0; 137 | transform: translateX(0); 138 | } 139 | } 140 | 141 | // Default menu styles 142 | // Menu CLOSED styles 143 | header .container .menu { 144 | position: absolute; 145 | z-index: -1; 146 | top: 3.5rem; 147 | // left: calc(-100vw - 3rem); // VP + padding 148 | transform: translateX(calc(-100vw - 3rem)); 149 | 150 | display: grid; 151 | grid-template-columns: 1fr; 152 | grid-template-rows: repeat(2, max-content); 153 | 154 | width: 100%; 155 | 156 | background: $color_background; 157 | 158 | transition: $transition_anim; 159 | 160 | &::after { 161 | content: ""; 162 | position: absolute; 163 | z-index: -1; 164 | 165 | height: 100vh; 166 | width: 100vw; 167 | 168 | background: $color_background; 169 | } 170 | 171 | nav { 172 | grid-area: auto; // Unset from other layouts 173 | } 174 | 175 | nav ul { 176 | display: flex; 177 | flex-direction: column; 178 | 179 | & > li > a { 180 | box-sizing: border-box; 181 | width: 100%; 182 | padding: 1rem 1.5rem; 183 | 184 | text-align: left; 185 | color: $color_text; 186 | 187 | transition: $transition_link; 188 | 189 | &:hover { 190 | color: $color_text_alt; 191 | background: $color_background_alt; 192 | } 193 | } 194 | } 195 | 196 | div.buttons { 197 | grid-area: auto; // Unset from other layouts 198 | display: flex; 199 | align-items: center; 200 | justify-content: center; 201 | flex-wrap: wrap; 202 | 203 | padding: 0.5rem 1rem; 204 | border-top: 1px solid $color_border; 205 | 206 | background: $color_background; 207 | 208 | & > * { 209 | flex: 1; 210 | 211 | min-width: min-content; 212 | 213 | margin: 0.5rem; 214 | } 215 | } 216 | } 217 | 218 | /* Media queries */ 219 | @media only screen and (min-width: $breakpoint_tablet) { 220 | header { 221 | height: 6.5rem; 222 | border-bottom: 1px solid $color_border; 223 | } 224 | 225 | header .container { 226 | left: 50%; 227 | transform: translate(-50%, 0); 228 | justify-content: flex-start; 229 | 230 | border: none; 231 | } 232 | 233 | input.hamburger-button ~ label { 234 | display: none; 235 | } 236 | 237 | header .container .menu { 238 | z-index: unset; 239 | top: 0; 240 | left: 0; 241 | transform: translateX(0); 242 | 243 | display: grid; 244 | grid-template-columns: auto max-content; 245 | grid-template-rows: 3.5rem 3rem; 246 | 247 | background: none; 248 | 249 | transition: none; 250 | 251 | &::after { 252 | display: none; 253 | } 254 | 255 | div.buttons { 256 | grid-area: 1/2/2/3; 257 | 258 | box-sizing: border-box; 259 | flex-direction: row; 260 | 261 | align-items: center; 262 | justify-content: center; 263 | 264 | padding: 0; 265 | margin: 0; 266 | border: none; 267 | } 268 | 269 | nav { 270 | grid-area: 2/1/3/3; 271 | } 272 | 273 | nav ul { 274 | flex-direction: row; 275 | justify-content: center; 276 | 277 | & > li { 278 | flex: 1; 279 | } 280 | & > li > a { 281 | display: inline-block; 282 | width: 100%; 283 | 284 | text-align: center; 285 | } 286 | } 287 | } 288 | } 289 | 290 | @media only screen and (min-width: $breakpoint_desktop) { 291 | header { 292 | height: 3.5rem; 293 | } 294 | 295 | header .container .menu { 296 | box-sizing: border-box; 297 | grid-template-columns: 4rem auto max-content; 298 | grid-template-rows: 1fr; 299 | 300 | height: 3.5rem; 301 | 302 | padding: 0 1.5rem; 303 | 304 | transition: none; 305 | 306 | nav { 307 | grid-area: 1/2/2/3; 308 | } 309 | 310 | div.buttons { 311 | grid-area: 1/3/2/4; 312 | 313 | & > * { 314 | min-width: max-content; 315 | } 316 | } 317 | 318 | nav ul { 319 | align-items: flex-start; 320 | justify-content: flex-end; 321 | 322 | height: 100%; 323 | width: 100%; 324 | 325 | & > li { 326 | flex: 0; 327 | } 328 | 329 | & > li > a { 330 | width: max-content; 331 | padding: 1.25rem 1.5rem; 332 | } 333 | } 334 | } 335 | } 336 | 337 | /* Other bits */ 338 | 339 | .page-content { 340 | box-sizing: border-box; 341 | 342 | min-height: 1200px; 343 | max-width: $max_header_width; 344 | 345 | margin: 0 auto; 346 | padding: 1rem 1.5rem; 347 | 348 | h1 { 349 | margin-top: 1.5rem; 350 | 351 | font-size: 3.25rem; 352 | font-weight: 300; 353 | word-break: break-all; 354 | } 355 | 356 | h2 { 357 | margin-top: 1.5rem; 358 | 359 | font-size: 1.75rem; 360 | font-weight: 500; 361 | word-break: break-all; 362 | } 363 | 364 | p { 365 | margin-top: 0.75rem; 366 | 367 | line-height: 1.25rem; 368 | } 369 | } 370 | --------------------------------------------------------------------------------