├── .gitignore ├── header-1.html ├── header-10.html ├── header-11.html ├── header-12.html ├── header-13.html ├── header-14.html ├── header-15.html ├── header-16.html ├── header-17.html ├── header-2.html ├── header-3.html ├── header-4.html ├── header-5.html ├── header-6.html ├── header-7.html ├── header-8.html ├── header-9.html ├── header-css.jpg ├── img ├── burger.svg ├── card.jpg ├── cover.png ├── header-3 │ └── search.svg ├── header-5 │ └── close.svg ├── header-css.jpg ├── header-icon.svg ├── pattern.svg └── shadeed.jpg ├── index.html ├── js ├── header-1.js ├── header-10.js ├── header-11.js ├── header-12.js ├── header-13.js ├── header-14.js ├── header-15.js ├── header-16.js ├── header-17.js ├── header-2.js ├── header-3.js ├── header-4.js ├── header-5.js ├── header-6.js ├── header-7.js ├── header-8.js └── header-9.js ├── readme.md └── styles ├── header-1.css ├── header-10.css ├── header-11.css ├── header-12.css ├── header-13.css ├── header-14.css ├── header-15.css ├── header-16.css ├── header-17.css ├── header-2.css ├── header-3.css ├── header-4.css ├── header-5.css ├── header-6.css ├── header-7.css ├── header-8.css ├── header-9.css ├── headers ├── header-1.scss ├── header-10.scss ├── header-11.scss ├── header-12.scss ├── header-13.scss ├── header-14.scss ├── header-15.scss ├── header-16.scss ├── header-17.scss ├── header-2.scss ├── header-3.scss ├── header-4.scss ├── header-5.scss ├── header-6.scss ├── header-7.scss ├── header-8.scss └── header-9.scss ├── home.css ├── home.scss ├── reset.min.css ├── style.css └── style.scss /.gitignore: -------------------------------------------------------------------------------- 1 | config.codekit3 2 | .idea/ -------------------------------------------------------------------------------- /header-1.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Headers - 1 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 30 | 31 | 32 | 33 | 34 | 35 | -------------------------------------------------------------------------------- /header-10.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Headers - 10 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 |

14 |

15 |

16 |

17 |

About
Contact

21 |

22 |

23 | Brand 24 |

25 |

26 | Some action 27 |

28 |

29 |

30 |

31 |

32 |

33 |

34 | 37 | 46 |

47 |

48 | 49 |

50 | 62 |

63 | 64 |

65 | عربي 66 |

67 |

68 |

69 |

70 | 71 | 72 | 73 | 74 | 75 | -------------------------------------------------------------------------------- /header-11.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Headers - 11 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 48 | 49 | 50 | 51 | 52 | 53 | -------------------------------------------------------------------------------- /header-12.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Headers - 12 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 |

14 |

15 |

16 | 28 | Brand 29 |

30 |

31 |

Services
Home
About
Hire us

37 |

38 |

39 | 40 | 54 | 55 | Sign in 56 | 57 |

58 |

59 |

60 | 61 | 62 | 63 | 64 | 65 | -------------------------------------------------------------------------------- /header-13.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Headers - 13 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 |

14 |

15 |

16 | 28 | Brand 29 |

30 | 33 | 42 |

43 |

44 |

45 |

Services
Home
About
Hire us

51 |

52 |

53 |

54 | 55 | 56 | 57 | 58 | 59 | -------------------------------------------------------------------------------- /header-14.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Headers - 14 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 |

14 |

15 |

16 |

17 |

About
Contact

21 |

22 |

23 | Brand 24 |

25 |

26 | Login 27 | Some action 28 |

29 |

30 |

31 |

32 |

33 |

34 | 46 |

47 | 48 |

49 |

50 | 53 | 62 |

63 | 64 | 82 | 83 | 84 | 94 | 95 |

96 |

97 |

98 |

99 | 100 | 101 | 102 | 103 | 104 | -------------------------------------------------------------------------------- /header-15.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Headers - 15 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 30 | 31 | 32 | 33 | 34 | 35 | -------------------------------------------------------------------------------- /header-16.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Headers - 16 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 30 | 31 | 32 | 33 | 34 | 35 | -------------------------------------------------------------------------------- /header-17.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Headers - 17 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 |

14 |

15 |

16 | Brand 17 |

18 | 21 | 30 |

31 |

32 |

33 |

34 | 37 |

39 | 40 | 62 | Home 63 | 64 |
66 | 67 | 89 | My Network 90 | 91 |
93 | 94 | 116 | Jobs 117 | 118 |
120 | 121 | 143 | Messaging 144 | 145 |
147 | 148 | 170 | Notifications 171 | 172 |

174 |

175 |

176 |

177 |

178 | 179 | 180 | 181 | 182 | 183 | -------------------------------------------------------------------------------- /header-2.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Headers - 2 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 30 | 31 | 32 | 33 | 34 | 35 | -------------------------------------------------------------------------------- /header-3.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Headers - 3 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 |

14 |

15 |

16 | Brand 17 |

18 |

19 | 31 |

32 | 35 | 44 |

45 |

46 |

47 |

48 | 49 | 50 | 51 | 52 | 53 | -------------------------------------------------------------------------------- /header-4.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Headers - 4 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 |

14 |

15 |

16 | Brand 17 |

18 | 21 | 30 |

31 |

32 |

33 |

34 | 37 |

39 | 40 | 62 | Home 63 | 64 |
66 | 67 | 89 | My Network 90 | 91 |
93 | 94 | 116 | Jobs 117 | 118 |
120 | 121 | 143 | Messaging 144 | 145 |
147 | 148 | 170 | Notifications 171 | 172 |

174 |

175 |

176 |

177 |

178 | 179 | 180 | 181 | 182 | 183 | -------------------------------------------------------------------------------- /header-5.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Headers - 5 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 |

14 |

15 |

16 | Brand Name 17 |

18 |

19 |

20 | 23 |

25 | 26 | 48 | Home 49 | 50 |
52 | 53 | 75 | My Network 76 | 77 |
79 | 80 | 102 | My Network 103 | 104 |
106 | 107 | 129 | Jobs 130 | 131 |
133 | 134 | 156 | Messaging 157 | 158 |
160 | 161 | 183 | Notifications 184 | 185 |

187 |

188 |

189 |

190 |

191 | 194 | 203 |

204 |

205 |

206 |

207 | 208 | 209 | 210 | 211 | 212 | -------------------------------------------------------------------------------- /header-6.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Headers - 6 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 38 | 39 | 40 | 41 | 42 | 43 | -------------------------------------------------------------------------------- /header-7.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Headers - 7 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 37 | 38 | 39 | 40 | 41 | 42 | -------------------------------------------------------------------------------- /header-8.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Headers - 8 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 35 | 36 | 37 | 38 | 39 | 40 | -------------------------------------------------------------------------------- /header-9.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Headers - 9 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 37 | 38 | 39 | 40 | 41 | 42 | -------------------------------------------------------------------------------- /header-css.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/shadeed/headers-css/2b7ce553a892bb79fedbdecbd93838094b89f14f/header-css.jpg -------------------------------------------------------------------------------- /img/burger.svg: -------------------------------------------------------------------------------- 1 | 2 | -------------------------------------------------------------------------------- /img/card.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/shadeed/headers-css/2b7ce553a892bb79fedbdecbd93838094b89f14f/img/card.jpg -------------------------------------------------------------------------------- /img/cover.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/shadeed/headers-css/2b7ce553a892bb79fedbdecbd93838094b89f14f/img/cover.png -------------------------------------------------------------------------------- /img/header-3/search.svg: -------------------------------------------------------------------------------- 1 | 2 | -------------------------------------------------------------------------------- /img/header-5/close.svg: -------------------------------------------------------------------------------- 1 | 2 | -------------------------------------------------------------------------------- /img/header-css.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/shadeed/headers-css/2b7ce553a892bb79fedbdecbd93838094b89f14f/img/header-css.jpg -------------------------------------------------------------------------------- /img/header-icon.svg: -------------------------------------------------------------------------------- 1 | 2 | -------------------------------------------------------------------------------- /img/pattern.svg: -------------------------------------------------------------------------------- 1 | 2 | -------------------------------------------------------------------------------- /img/shadeed.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/shadeed/headers-css/2b7ce553a892bb79fedbdecbd93838094b89f14f/img/shadeed.jpg -------------------------------------------------------------------------------- /index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Headers 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 17 | 18 | 19 | 23 | 24 | 25 | 29 | 33 | 34 | 35 | 36 | 37 | 41 | 50 | 51 | 52 |

53 |

54 |

headers.css

55 |

The blueprint HTML and CSS for 17+ website headers

56 |

57 | 71 | View on Github 73 | 77 | Spread the word 83 |

84 |

85 | 86 |

87 |

88 |

Introduction

89 |

90 | Since I don’t use CSS frameworks in my front-end work, I needed a way 91 | to quickly build a header component without doing it from scratch for 92 | each new project. I don’t think I’m the only one who thinks in the 93 | same way. 94 |

95 |

96 | As a start, I created 17 headers with slight 97 | differences between them. This is an ongoing project so expect more 98 | headers coming your way. 99 |

100 | 101 |

102 | If you have a suggestion, please use Github issues and I will be happy 103 | to implement it. 104 |

105 | 106 |

107 |

108 |

109 | 110 |

111 |

112 |

Demo

113 |

Header 1
Header 2
Header 3
Header 4
Header 5
Header 6
Header 7
Header 8
Header 9
Header 10
Header 11
Header 12
Header 13
Header 14
Header 15
Header 16
Header 17

132 |

133 |

134 | 135 | 161 | 162 | 163 | -------------------------------------------------------------------------------- /js/header-1.js: -------------------------------------------------------------------------------- 1 | let navToggle = document.querySelector(".nav__toggle"); 2 | let navWrapper = document.querySelector(".nav__wrapper"); 3 | 4 | navToggle.addEventListener("click", function () { 5 | if (navWrapper.classList.contains("active")) { 6 | this.setAttribute("aria-expanded", "false"); 7 | this.setAttribute("aria-label", "menu"); 8 | navWrapper.classList.remove("active"); 9 | } else { 10 | navWrapper.classList.add("active"); 11 | this.setAttribute("aria-label", "close menu"); 12 | this.setAttribute("aria-expanded", "true"); 13 | } 14 | }); 15 | -------------------------------------------------------------------------------- /js/header-10.js: -------------------------------------------------------------------------------- 1 | let navToggle = document.querySelector(".nav__toggle"); 2 | let navWrapper = document.querySelector(".nav__wrapper"); 3 | 4 | navToggle.addEventListener("click", function () { 5 | if (navWrapper.classList.contains("active")) { 6 | this.setAttribute("aria-expanded", "false"); 7 | this.setAttribute("aria-label", "menu"); 8 | navWrapper.classList.remove("active"); 9 | } else { 10 | navWrapper.classList.add("active"); 11 | this.setAttribute("aria-label", "close menu"); 12 | this.setAttribute("aria-expanded", "true"); 13 | searchForm.classList.remove("active"); 14 | searchToggle.classList.remove("active"); 15 | } 16 | }); 17 | 18 | let searchToggle = document.querySelector(".search__toggle"); 19 | let searchForm = document.querySelector(".search__form"); 20 | 21 | searchToggle.addEventListener("click", showSearch); 22 | 23 | function showSearch() { 24 | searchForm.classList.toggle("active"); 25 | searchToggle.classList.toggle("active"); 26 | 27 | navToggle.setAttribute("aria-expanded", "false"); 28 | navToggle.setAttribute("aria-label", "menu"); 29 | navWrapper.classList.remove("active"); 30 | 31 | if (searchToggle.classList.contains("active")) { 32 | searchToggle.setAttribute("aria-label", "Close search"); 33 | } else { 34 | searchToggle.setAttribute("aria-label", "Open search"); 35 | } 36 | } 37 | -------------------------------------------------------------------------------- /js/header-11.js: -------------------------------------------------------------------------------- 1 | let navToggle = document.querySelector(".nav__toggle"); 2 | let navWrapper = document.querySelector(".nav__wrapper"); 3 | 4 | navToggle.addEventListener("click", function () { 5 | if (navWrapper.classList.contains("active")) { 6 | this.setAttribute("aria-expanded", "false"); 7 | this.setAttribute("aria-label", "menu"); 8 | navWrapper.classList.remove("active"); 9 | } else { 10 | navWrapper.classList.add("active"); 11 | this.setAttribute("aria-label", "close menu"); 12 | this.setAttribute("aria-expanded", "true"); 13 | } 14 | }); 15 | -------------------------------------------------------------------------------- /js/header-12.js: -------------------------------------------------------------------------------- 1 | let navToggle = document.querySelector(".nav__toggle"); 2 | let navWrapper = document.querySelector(".nav__wrapper"); 3 | 4 | navToggle.addEventListener("click", function () { 5 | if (navWrapper.classList.contains("active")) { 6 | this.setAttribute("aria-expanded", "false"); 7 | this.setAttribute("aria-label", "menu"); 8 | navWrapper.classList.remove("active"); 9 | } else { 10 | navWrapper.classList.add("active"); 11 | this.setAttribute("aria-label", "close menu"); 12 | this.setAttribute("aria-expanded", "true"); 13 | } 14 | }); 15 | -------------------------------------------------------------------------------- /js/header-13.js: -------------------------------------------------------------------------------- 1 | let navToggle = document.querySelector(".nav__toggle"); 2 | let navWrapper = document.querySelector(".nav__wrapper"); 3 | 4 | navToggle.addEventListener("click", function () { 5 | if (navWrapper.classList.contains("active")) { 6 | this.setAttribute("aria-expanded", "false"); 7 | this.setAttribute("aria-label", "menu"); 8 | navWrapper.classList.remove("active"); 9 | } else { 10 | navWrapper.classList.add("active"); 11 | this.setAttribute("aria-label", "close menu"); 12 | this.setAttribute("aria-expanded", "true"); 13 | searchForm.classList.remove("active"); 14 | searchToggle.classList.remove("active"); 15 | } 16 | }); 17 | 18 | let searchToggle = document.querySelector(".search__toggle"); 19 | let searchForm = document.querySelector(".search__form"); 20 | 21 | searchToggle.addEventListener("click", showSearch); 22 | 23 | function showSearch() { 24 | searchForm.classList.toggle("active"); 25 | searchToggle.classList.toggle("active"); 26 | 27 | navToggle.setAttribute("aria-expanded", "false"); 28 | navToggle.setAttribute("aria-label", "menu"); 29 | navWrapper.classList.remove("active"); 30 | 31 | if (searchToggle.classList.contains("active")) { 32 | searchToggle.setAttribute("aria-label", "Close search"); 33 | } else { 34 | searchToggle.setAttribute("aria-label", "Open search"); 35 | } 36 | } 37 | -------------------------------------------------------------------------------- /js/header-14.js: -------------------------------------------------------------------------------- 1 | let navToggle = document.querySelector(".nav__toggle"); 2 | let navWrapper = document.querySelector(".nav__wrapper"); 3 | 4 | navToggle.addEventListener("click", function () { 5 | if (navWrapper.classList.contains("active")) { 6 | this.setAttribute("aria-expanded", "false"); 7 | this.setAttribute("aria-label", "menu"); 8 | navWrapper.classList.remove("active"); 9 | } else { 10 | navWrapper.classList.add("active"); 11 | this.setAttribute("aria-label", "close menu"); 12 | this.setAttribute("aria-expanded", "true"); 13 | searchForm.classList.remove("active"); 14 | searchToggle.classList.remove("active"); 15 | } 16 | }); 17 | 18 | let searchToggle = document.querySelector(".search__toggle"); 19 | let searchForm = document.querySelector(".search__form"); 20 | 21 | searchToggle.addEventListener("click", showSearch); 22 | 23 | function showSearch() { 24 | searchForm.classList.toggle("active"); 25 | searchToggle.classList.toggle("active"); 26 | 27 | navToggle.setAttribute("aria-expanded", "false"); 28 | navToggle.setAttribute("aria-label", "menu"); 29 | navWrapper.classList.remove("active"); 30 | 31 | if (searchToggle.classList.contains("active")) { 32 | searchToggle.setAttribute("aria-label", "Close search"); 33 | } else { 34 | searchToggle.setAttribute("aria-label", "Open search"); 35 | } 36 | } 37 | -------------------------------------------------------------------------------- /js/header-15.js: -------------------------------------------------------------------------------- 1 | let navToggle = document.querySelector(".nav__toggle"); 2 | let navWrapper = document.querySelector(".nav__wrapper"); 3 | 4 | navToggle.addEventListener("click", function () { 5 | if (navWrapper.classList.contains("active")) { 6 | this.setAttribute("aria-expanded", "false"); 7 | this.setAttribute("aria-label", "menu"); 8 | navWrapper.classList.remove("active"); 9 | } else { 10 | navWrapper.classList.add("active"); 11 | this.setAttribute("aria-label", "close menu"); 12 | this.setAttribute("aria-expanded", "true"); 13 | } 14 | }); 15 | -------------------------------------------------------------------------------- /js/header-16.js: -------------------------------------------------------------------------------- 1 | let navToggle = document.querySelector(".nav__toggle"); 2 | let navWrapper = document.querySelector(".nav__wrapper"); 3 | 4 | navToggle.addEventListener("click", function () { 5 | if (navWrapper.classList.contains("active")) { 6 | this.setAttribute("aria-expanded", "false"); 7 | this.setAttribute("aria-label", "menu"); 8 | navWrapper.classList.remove("active"); 9 | } else { 10 | navWrapper.classList.add("active"); 11 | this.setAttribute("aria-label", "close menu"); 12 | this.setAttribute("aria-expanded", "true"); 13 | } 14 | }); 15 | -------------------------------------------------------------------------------- /js/header-17.js: -------------------------------------------------------------------------------- 1 | let navToggle = document.querySelector(".nav__toggle"); 2 | let navWrapper = document.querySelector(".nav__wrapper"); 3 | 4 | navToggle.addEventListener("click", function () { 5 | if (navWrapper.classList.contains("active")) { 6 | this.setAttribute("aria-expanded", "false"); 7 | this.setAttribute("aria-label", "menu"); 8 | navWrapper.classList.remove("active"); 9 | } else { 10 | navWrapper.classList.add("active"); 11 | this.setAttribute("aria-label", "close menu"); 12 | this.setAttribute("aria-expanded", "true"); 13 | } 14 | }); 15 | -------------------------------------------------------------------------------- /js/header-2.js: -------------------------------------------------------------------------------- 1 | let navToggle = document.querySelector(".nav__toggle"); 2 | let navWrapper = document.querySelector(".nav__wrapper"); 3 | 4 | navToggle.addEventListener("click", function () { 5 | if (navWrapper.classList.contains("active")) { 6 | this.setAttribute("aria-expanded", "false"); 7 | this.setAttribute("aria-label", "menu"); 8 | navWrapper.classList.remove("active"); 9 | } else { 10 | navWrapper.classList.add("active"); 11 | this.setAttribute("aria-label", "close menu"); 12 | this.setAttribute("aria-expanded", "true"); 13 | } 14 | }); 15 | -------------------------------------------------------------------------------- /js/header-3.js: -------------------------------------------------------------------------------- 1 | let navToggle = document.querySelector(".nav__toggle"); 2 | let navWrapper = document.querySelector(".nav__wrapper"); 3 | 4 | navToggle.addEventListener("click", function () { 5 | if (navWrapper.classList.contains("active")) { 6 | this.setAttribute("aria-expanded", "false"); 7 | this.setAttribute("aria-label", "menu"); 8 | navWrapper.classList.remove("active"); 9 | } else { 10 | navWrapper.classList.add("active"); 11 | this.setAttribute("aria-label", "close menu"); 12 | this.setAttribute("aria-expanded", "true"); 13 | searchForm.classList.remove("active"); 14 | } 15 | }); 16 | 17 | let searchToggle = document.querySelector(".search__toggle"); 18 | let searchForm = document.querySelector(".search__form"); 19 | 20 | searchToggle.addEventListener("click", showSearch); 21 | 22 | function showSearch() { 23 | searchForm.classList.toggle("active"); 24 | navToggle.setAttribute("aria-expanded", "false"); 25 | navToggle.setAttribute("aria-label", "menu"); 26 | navWrapper.classList.remove("active"); 27 | } 28 | -------------------------------------------------------------------------------- /js/header-4.js: -------------------------------------------------------------------------------- 1 | let navToggle = document.querySelector(".nav__toggle"); 2 | let navWrapper = document.querySelector(".nav__wrapper"); 3 | 4 | navToggle.addEventListener("click", function () { 5 | if (navWrapper.classList.contains("active")) { 6 | this.setAttribute("aria-expanded", "false"); 7 | this.setAttribute("aria-label", "menu"); 8 | navWrapper.classList.remove("active"); 9 | } else { 10 | navWrapper.classList.add("active"); 11 | this.setAttribute("aria-label", "close menu"); 12 | this.setAttribute("aria-expanded", "true"); 13 | } 14 | }); 15 | 16 | let searchToggle = document.querySelector(".search__toggle"); 17 | let searchForm = document.querySelector(".search__form"); 18 | 19 | searchToggle.addEventListener("click", showSearch); 20 | 21 | function showSearch() { 22 | searchForm.classList.toggle("active"); 23 | } 24 | -------------------------------------------------------------------------------- /js/header-5.js: -------------------------------------------------------------------------------- 1 | let navToggle = document.querySelector(".nav__toggle"); 2 | let navWrapper = document.querySelector(".nav__wrapper"); 3 | 4 | navToggle.addEventListener("click", function () { 5 | if (navWrapper.classList.contains("active")) { 6 | this.setAttribute("aria-expanded", "false"); 7 | this.setAttribute("aria-label", "menu"); 8 | navWrapper.classList.remove("active"); 9 | } else { 10 | navWrapper.classList.add("active"); 11 | this.setAttribute("aria-label", "close menu"); 12 | this.setAttribute("aria-expanded", "true"); 13 | searchForm.classList.remove("active"); 14 | searchToggle.classList.remove("active"); 15 | } 16 | }); 17 | 18 | let searchToggle = document.querySelector(".search__toggle"); 19 | let searchForm = document.querySelector(".search__form"); 20 | 21 | searchToggle.addEventListener("click", showSearch); 22 | 23 | function showSearch() { 24 | searchForm.classList.toggle("active"); 25 | searchToggle.classList.toggle("active"); 26 | 27 | navToggle.setAttribute("aria-expanded", "false"); 28 | navToggle.setAttribute("aria-label", "menu"); 29 | navWrapper.classList.remove("active"); 30 | 31 | if (searchToggle.classList.contains("active")) { 32 | searchToggle.setAttribute("aria-label", "Close search"); 33 | } else { 34 | searchToggle.setAttribute("aria-label", "Open search"); 35 | } 36 | } 37 | -------------------------------------------------------------------------------- /js/header-6.js: -------------------------------------------------------------------------------- 1 | let navToggle = document.querySelector(".nav__toggle"); 2 | let navWrapper = document.querySelector(".nav__wrapper"); 3 | 4 | navToggle.addEventListener("click", function () { 5 | if (navWrapper.classList.contains("active")) { 6 | this.setAttribute("aria-expanded", "false"); 7 | this.setAttribute("aria-label", "menu"); 8 | navWrapper.classList.remove("active"); 9 | } else { 10 | navWrapper.classList.add("active"); 11 | this.setAttribute("aria-label", "close menu"); 12 | this.setAttribute("aria-expanded", "true"); 13 | } 14 | }); 15 | -------------------------------------------------------------------------------- /js/header-7.js: -------------------------------------------------------------------------------- 1 | let navToggle = document.querySelector(".nav__toggle"); 2 | let navWrapper = document.querySelector(".nav__wrapper"); 3 | 4 | navToggle.addEventListener("click", function () { 5 | if (navWrapper.classList.contains("active")) { 6 | this.setAttribute("aria-expanded", "false"); 7 | this.setAttribute("aria-label", "menu"); 8 | navWrapper.classList.remove("active"); 9 | } else { 10 | navWrapper.classList.add("active"); 11 | this.setAttribute("aria-label", "close menu"); 12 | this.setAttribute("aria-expanded", "true"); 13 | } 14 | }); 15 | -------------------------------------------------------------------------------- /js/header-8.js: -------------------------------------------------------------------------------- 1 | let navToggle = document.querySelector(".nav__toggle"); 2 | let navWrapper = document.querySelector(".nav__wrapper"); 3 | 4 | navToggle.addEventListener("click", function () { 5 | if (navWrapper.classList.contains("active")) { 6 | this.setAttribute("aria-expanded", "false"); 7 | this.setAttribute("aria-label", "menu"); 8 | navWrapper.classList.remove("active"); 9 | } else { 10 | navWrapper.classList.add("active"); 11 | this.setAttribute("aria-label", "close menu"); 12 | this.setAttribute("aria-expanded", "true"); 13 | } 14 | }); 15 | -------------------------------------------------------------------------------- /js/header-9.js: -------------------------------------------------------------------------------- 1 | let navToggle = document.querySelector(".nav__toggle"); 2 | let navWrapper = document.querySelector(".nav__wrapper"); 3 | 4 | navToggle.addEventListener("click", function () { 5 | if (navWrapper.classList.contains("active")) { 6 | this.setAttribute("aria-expanded", "false"); 7 | this.setAttribute("aria-label", "menu"); 8 | navWrapper.classList.remove("active"); 9 | } else { 10 | navWrapper.classList.add("active"); 11 | this.setAttribute("aria-label", "close menu"); 12 | this.setAttribute("aria-expanded", "true"); 13 | } 14 | }); 15 | -------------------------------------------------------------------------------- /readme.md: -------------------------------------------------------------------------------- 1 | # Introducing Headers.css 2 | 3 | I got the idea of designing and implementing a blueprint website header components. The reason is that I can pick one and use it for a new project pretty quickly. I made 17 headers so far and aiming for more in the coming weeks. You can [check them out](https://headers-css.vercel.app/) here. 4 | 5 | [Read about building headers with flexbox](https://ishadeed.com/article/website-headers-flexbox/) on my blog. 6 | 7 | ![](header-css.jpg) 8 | 9 | While working on them, I tried to focus on the following: 10 | 11 | - Simplicity 12 | - Fully responsive design 13 | - Used Sass so they can be easily edited (Still need to do some refactoring here and there) 14 | - Accessibility (Please open an issue if you spot something incorrectly) 15 | 16 | ## How To Use 17 | 18 | I didn't build this project with a "smart" way to get the files. For now, you can get the HTML, Sass, and Javascript related for the header you want to check. I will try to enhance this. 19 | 20 | ## Todo 21 | 22 | - [ ] Think about a build process 23 | - [ ] RTL Styling 24 | 25 | ## Contributions 26 | 27 | Oh, that would be great and very nice of you. Please submit an issue to discuss or simply add a PR. 28 | 29 | ## Issues 30 | 31 | Spotted a bug or something weird? Please [open an issue](https://github.com/shadeed/headers-css/issues). Thank you! 32 | -------------------------------------------------------------------------------- /styles/header-1.css: -------------------------------------------------------------------------------- 1 | /* 2 | ** The Header Media Queries ** 3 | ** Tweak as per your needs ** 4 | */ 5 | .brand { 6 | font-weight: bold; 7 | font-size: 20px; } 8 | 9 | .site-header { 10 | position: relative; 11 | background-color: #def7ff; } 12 | 13 | .site-header__wrapper { 14 | padding-top: 1rem; 15 | padding-bottom: 1rem; } 16 | @media (min-width: 600px) { 17 | .site-header__wrapper { 18 | display: flex; 19 | justify-content: space-between; 20 | align-items: center; 21 | padding-top: 0; 22 | padding-bottom: 0; } } 23 | @media (min-width: 600px) { 24 | .nav__wrapper { 25 | display: flex; } } 26 | 27 | @media (max-width: 599px) { 28 | .nav__wrapper { 29 | position: absolute; 30 | top: 100%; 31 | right: 0; 32 | left: 0; 33 | z-index: -1; 34 | background-color: #d9f0f7; 35 | visibility: hidden; 36 | opacity: 0; 37 | transform: translateY(-100%); 38 | transition: transform 0.3s ease-out, opacity 0.3s ease-out; } 39 | .nav__wrapper.active { 40 | visibility: visible; 41 | opacity: 1; 42 | transform: translateY(0); } } 43 | 44 | .nav__item a { 45 | display: block; 46 | padding: 1.5rem 1rem; } 47 | 48 | .nav__toggle { 49 | display: none; } 50 | @media (max-width: 599px) { 51 | .nav__toggle { 52 | display: block; 53 | position: absolute; 54 | right: 1rem; 55 | top: 1rem; } } 56 | -------------------------------------------------------------------------------- /styles/header-10.css: -------------------------------------------------------------------------------- 1 | /* 2 | ** The Header Media Queries ** 3 | ** Tweak as per your needs ** 4 | */ 5 | .brand { 6 | font-weight: bold; 7 | font-size: 27px; } 8 | 9 | .site-header__top { 10 | background-color: #def7ff; } 11 | .site-header__top ul { 12 | display: flex; } 13 | .site-header__top li:not(:last-child) { 14 | margin-right: 1.5rem; } 15 | .site-header__top .site-header__start { 16 | display: none; } 17 | 18 | .site-header__bottom { 19 | position: relative; 20 | background-color: #c7f2ff; } 21 | @media (max-width: 939px) { 22 | .site-header__bottom .site-header__end { 23 | order: -1; } } 24 | .site-header__wrapper { 25 | display: flex; 26 | justify-content: space-between; } 27 | 28 | .site-header__wrapper { 29 | display: flex; 30 | justify-content: space-between; 31 | align-items: center; 32 | padding: 1rem; } 33 | @media (min-width: 940px) { 34 | .site-header__wrapper { 35 | padding-top: 0.5rem; 36 | padding-bottom: 0.5rem; } } 37 | @media (min-width: 940px) { 38 | .site-header__top .site-header__wrapper { 39 | padding-top: 1rem; 40 | padding-bottom: 1rem; } } 41 | .nav { 42 | margin-left: 1rem; 43 | margin-right: 1rem; } 44 | 45 | @media (min-width: 940px) { 46 | .nav__wrapper { 47 | display: flex; } } 48 | 49 | @media (max-width: 939px) { 50 | .nav__wrapper { 51 | position: absolute; 52 | top: 100%; 53 | right: 0; 54 | left: 0; 55 | z-index: -1; 56 | background-color: #d9f0f7; 57 | visibility: hidden; 58 | opacity: 0; 59 | transform: translateY(-100%); 60 | transition: transform 0.3s ease-out, opacity 0.3s ease-out; } 61 | .nav__wrapper.active { 62 | visibility: visible; 63 | opacity: 1; 64 | transform: translateY(0); } } 65 | 66 | .nav__item a { 67 | display: block; 68 | padding: 1.5rem 1.25rem; } 69 | 70 | .nav__item svg { 71 | display: inline-block; 72 | vertical-align: middle; 73 | width: 28px; 74 | height: 28px; 75 | margin-right: 1rem; } 76 | @media (min-width: 940px) { 77 | .nav__item svg { 78 | display: block; 79 | margin: 0 auto 0.5rem; } } 80 | .nav__item.active a { 81 | border-left-color: #222; } 82 | @media (min-width: 800px) { 83 | .nav__item.active a { 84 | border-bottom-color: #222; } } 85 | .nav__toggle { 86 | position: absolute; 87 | right: 1rem; 88 | top: 1rem; } 89 | @media (min-width: 940px) { 90 | .nav__toggle { 91 | display: none; } } 92 | .search { 93 | display: flex; } 94 | 95 | .search__toggle { 96 | appearance: none; 97 | order: 1; 98 | font-size: 0; 99 | width: 34px; 100 | height: 34px; 101 | background: url("../img/header-3/search.svg") center/22px no-repeat; 102 | border: 0; } 103 | @media (max-width: 939px) { 104 | .search__toggle { 105 | position: absolute; 106 | right: 5.5rem; 107 | top: 0.65rem; } } 108 | .search__toggle.active { 109 | background: url("../img/header-5/close.svg") center/22px no-repeat; } 110 | 111 | .search__form { 112 | display: none; } 113 | .search__form.active { 114 | display: block; } 115 | @media (max-width: 799px) { 116 | .search__form { 117 | position: absolute; 118 | left: 0; 119 | right: 0; 120 | top: 100%; 121 | background-color: red; } 122 | .search__form input { 123 | width: 100%; } } 124 | .search__form input { 125 | min-width: 200px; 126 | appearance: none; 127 | border: 0; 128 | background-color: #fff; 129 | border-radius: 0; 130 | font-size: 16px; 131 | padding: 0.5rem; } 132 | @media (max-width: 799px) { 133 | .search__form input { 134 | border-bottom: 1px solid #979797; } } 135 | -------------------------------------------------------------------------------- /styles/header-11.css: -------------------------------------------------------------------------------- 1 | /* 2 | ** The Header Media Queries ** 3 | ** Tweak as per your needs ** 4 | */ 5 | .brand { 6 | font-weight: bold; 7 | font-size: 20px; } 8 | 9 | .site-header { 10 | position: relative; 11 | background-color: #def7ff; } 12 | 13 | .site-header__wrapper { 14 | display: flex; 15 | justify-content: space-between; 16 | align-items: center; 17 | padding-top: 1rem; 18 | padding-bottom: 1rem; } 19 | 20 | .nav__wrapper { 21 | position: fixed; 22 | top: 72px; 23 | left: 0; 24 | width: Max(220px, 20%); 25 | bottom: 0; 26 | z-index: 1; 27 | visibility: hidden; 28 | opacity: 0; 29 | transform: translateX(-100%); 30 | background-color: #d9f0f7; 31 | transition: transform 0.3s ease-out, opacity 0.3s ease-out; 32 | display: block; } 33 | .nav__wrapper.active { 34 | visibility: visible; 35 | opacity: 1; 36 | transform: translateX(0); } 37 | 38 | .nav__item { 39 | border-bottom: 1px solid rgba(0, 0, 0, 0.2); } 40 | .nav__item a { 41 | display: block; 42 | padding: 1rem; } 43 | -------------------------------------------------------------------------------- /styles/header-12.css: -------------------------------------------------------------------------------- 1 | /* 2 | ** The Header Media Queries ** 3 | ** Tweak as per your needs ** 4 | */ 5 | .brand { 6 | font-weight: bold; 7 | font-size: 20px; } 8 | 9 | .button--icon { 10 | min-width: initial; 11 | padding: 0.5rem; } 12 | 13 | .site-header { 14 | position: relative; 15 | background-color: #def7ff; } 16 | 17 | .site-header__wrapper { 18 | display: flex; 19 | justify-content: space-between; 20 | align-items: center; 21 | flex-wrap: wrap; 22 | padding-top: 1rem; 23 | padding-bottom: 1rem; } 24 | 25 | .site-header__start { 26 | display: flex; } 27 | .site-header__start > * + * { 28 | margin-left: 1rem; } 29 | 30 | @media (max-width: 599px) { 31 | .site-header__middle { 32 | flex: 0 0 100%; 33 | order: 2; 34 | margin-top: 1rem; } } 35 | 36 | .nav__wrapper { 37 | position: fixed; 38 | top: 56px; 39 | left: 0; 40 | width: Max(220px, 20%); 41 | bottom: 0; 42 | z-index: 1; 43 | visibility: hidden; 44 | opacity: 0; 45 | transform: translateX(-100%); 46 | background-color: #d9f0f7; 47 | transition: transform 0.3s ease-out, opacity 0.3s ease-out; 48 | display: block; } 49 | .nav__wrapper.active { 50 | visibility: visible; 51 | opacity: 1; 52 | transform: translateX(0); } 53 | @media (max-width: 599px) { 54 | .nav__wrapper { 55 | top: 104px; 56 | /* Use a CSS variable and get JS help */ } } 57 | .nav__item { 58 | border-bottom: 1px solid rgba(0, 0, 0, 0.2); } 59 | .nav__item a { 60 | display: block; 61 | padding: 1.5rem 1rem; } 62 | 63 | .sub-nav { 64 | display: flex; 65 | flex-wrap: wrap; } 66 | .sub-nav li:not(:last-child) { 67 | margin-right: 1.5rem; } 68 | @media (max-width: 599px) { 69 | .sub-nav { 70 | background: rgba(0, 0, 0, 0.1); 71 | margin: 0 -1rem -1rem; 72 | padding: 1rem; } } 73 | -------------------------------------------------------------------------------- /styles/header-13.css: -------------------------------------------------------------------------------- 1 | /* 2 | ** The Header Media Queries ** 3 | ** Tweak as per your needs ** 4 | */ 5 | .brand { 6 | font-weight: bold; 7 | font-size: 20px; } 8 | 9 | .site-header { 10 | position: relative; 11 | background-color: #def7ff; } 12 | 13 | .site-header__wrapper { 14 | display: flex; 15 | justify-content: space-between; 16 | align-items: center; 17 | flex-wrap: wrap; 18 | padding-top: 1rem; 19 | padding-bottom: 1rem; } 20 | 21 | .site-header__start { 22 | display: flex; 23 | align-items: center; } 24 | .site-header__start > * + * { 25 | margin-left: 1rem; } 26 | 27 | @media (max-width: 679px) { 28 | .site-header__end { 29 | flex: 0 0 100%; 30 | order: 2; 31 | margin-top: 1rem; } } 32 | 33 | .nav__wrapper { 34 | position: fixed; 35 | top: 66px; 36 | left: 0; 37 | width: Max(220px, 20%); 38 | bottom: 0; 39 | z-index: 1; 40 | visibility: hidden; 41 | opacity: 0; 42 | transform: translateX(-100%); 43 | background-color: #d9f0f7; 44 | transition: transform 0.3s ease-out, opacity 0.3s ease-out; 45 | display: block; } 46 | .nav__wrapper.active { 47 | visibility: visible; 48 | opacity: 1; 49 | transform: translateX(0); } 50 | @media (max-width: 679px) { 51 | .nav__wrapper { 52 | top: 101px; 53 | /* Use a CSS variable and get JS help */ } } 54 | .nav__item { 55 | border-bottom: 1px solid rgba(0, 0, 0, 0.2); } 56 | .nav__item a { 57 | display: block; 58 | padding: 1.5rem 1rem; } 59 | 60 | .sub-nav { 61 | display: flex; 62 | flex-wrap: wrap; } 63 | .sub-nav li:not(:last-child) { 64 | margin-right: 1.5rem; } 65 | @media (max-width: 679px) { 66 | .sub-nav { 67 | background: rgba(0, 0, 0, 0.1); 68 | margin: 0 -1rem -1rem; 69 | padding: 1rem; } } 70 | .search { 71 | display: flex; } 72 | 73 | .search__toggle { 74 | appearance: none; 75 | order: 1; 76 | font-size: 0; 77 | width: 34px; 78 | height: 34px; 79 | background: url("../img/header-3/search.svg") center/22px no-repeat; 80 | border: 0; } 81 | @media (max-width: 679px) { 82 | .search__toggle { 83 | position: absolute; 84 | right: 1rem; 85 | top: 0.65rem; } } 86 | .search__toggle.active { 87 | background: url("../img/header-5/close.svg") center/22px no-repeat; } 88 | @media (min-width: 680px) { 89 | .search__toggle { 90 | display: none; } } 91 | .search__form { 92 | display: none; } 93 | .search__form.active { 94 | display: block; } 95 | @media (min-width: 680px) { 96 | .search__form { 97 | display: block; } } 98 | @media (max-width: 679px) { 99 | .search__form { 100 | position: absolute; 101 | left: 0; 102 | right: 0; 103 | top: 100%; 104 | background-color: red; } 105 | .search__form input { 106 | width: 100%; } } 107 | .search__form input { 108 | min-width: 200px; 109 | appearance: none; 110 | border: 0; 111 | background-color: #fff; 112 | border-radius: 0; 113 | font-size: 16px; 114 | padding: 0.5rem; } 115 | @media (max-width: 679px) { 116 | .search__form input { 117 | border-bottom: 1px solid #979797; } } 118 | -------------------------------------------------------------------------------- /styles/header-14.css: -------------------------------------------------------------------------------- 1 | /* 2 | ** The Header Media Queries ** 3 | ** Tweak as per your needs ** 4 | */ 5 | .brand { 6 | font-weight: bold; 7 | font-size: 27px; } 8 | 9 | .site-header__top { 10 | background-color: #def7ff; } 11 | .site-header__top ul { 12 | display: flex; } 13 | .site-header__top li:not(:last-child) { 14 | margin-right: 1.5rem; } 15 | .site-header__top .site-header__start { 16 | display: none; } 17 | 18 | .site-header__bottom { 19 | position: relative; 20 | background-color: #c7f2ff; } 21 | @media (max-width: 939px) { 22 | .site-header__bottom .site-header__end { 23 | order: -1; } } 24 | .site-header__wrapper { 25 | display: flex; 26 | justify-content: space-between; } 27 | 28 | .site-header__wrapper { 29 | display: flex; 30 | justify-content: space-between; 31 | align-items: center; 32 | padding: 1rem; } 33 | @media (min-width: 940px) { 34 | .site-header__wrapper { 35 | padding-top: 0.5rem; 36 | padding-bottom: 0.5rem; } } 37 | .site-header__end { 38 | display: flex; 39 | align-items: center; } 40 | 41 | .site-header__end.top > * + * { 42 | margin-left: 1.5rem; } 43 | 44 | @media (min-width: 940px) { 45 | .site-header__end.bottom > *:not(:last-child) { 46 | margin-right: 1.5rem; } } 47 | 48 | @media (max-width: 939px) { 49 | .site-header__end.bottom .cart { 50 | margin-right: 1.5rem; } } 51 | 52 | @media (max-width: 939px) { 53 | .site-header__end.bottom .search { 54 | margin-left: 0; } } 55 | 56 | .site-header__end.bottom svg { 57 | width: 22px; 58 | height: 22px; } 59 | 60 | @media (min-width: 940px) { 61 | .nav__wrapper { 62 | display: flex; } } 63 | 64 | @media (max-width: 939px) { 65 | .nav__wrapper { 66 | position: absolute; 67 | top: 100%; 68 | right: 0; 69 | left: 0; 70 | z-index: -1; 71 | background-color: #d9f0f7; 72 | visibility: hidden; 73 | opacity: 0; 74 | transform: translateY(-100%); 75 | transition: transform 0.3s ease-out, opacity 0.3s ease-out; } 76 | .nav__wrapper.active { 77 | visibility: visible; 78 | opacity: 1; 79 | transform: translateY(0); } } 80 | 81 | .nav__item:not(:last-child) { 82 | margin-right: 1.5rem; } 83 | 84 | .nav__item a { 85 | display: block; 86 | padding-top: 1.5rem; 87 | padding-bottom: 1.5rem; } 88 | @media (max-width: 939px) { 89 | .nav__item a { 90 | padding: 1rem; } } 91 | .nav__item svg { 92 | display: inline-block; 93 | vertical-align: middle; 94 | width: 28px; 95 | height: 28px; 96 | margin-right: 1rem; } 97 | @media (min-width: 940px) { 98 | .nav__item svg { 99 | display: block; 100 | margin: 0 auto 0.5rem; } } 101 | .nav__item.active a { 102 | border-left-color: #222; } 103 | @media (min-width: 800px) { 104 | .nav__item.active a { 105 | border-bottom-color: #222; } } 106 | .nav__toggle { 107 | position: absolute; 108 | right: 1rem; 109 | top: 1rem; } 110 | @media (min-width: 940px) { 111 | .nav__toggle { 112 | display: none; } } 113 | .search { 114 | display: flex; } 115 | 116 | .search__toggle { 117 | appearance: none; 118 | order: 1; 119 | font-size: 0; 120 | width: 34px; 121 | height: 34px; 122 | background: url("../img/header-3/search.svg") center/22px no-repeat; 123 | border: 0; } 124 | @media (max-width: 939px) { 125 | .search__toggle { 126 | position: absolute; 127 | right: 5.5rem; 128 | top: 0.65rem; } } 129 | .search__toggle.active { 130 | background: url("../img/header-5/close.svg") center/22px no-repeat; } 131 | 132 | .search__form { 133 | display: none; } 134 | .search__form.active { 135 | display: block; } 136 | @media (max-width: 799px) { 137 | .search__form { 138 | position: absolute; 139 | left: 0; 140 | right: 0; 141 | top: 100%; 142 | background-color: red; } 143 | .search__form input { 144 | width: 100%; } } 145 | .search__form input { 146 | min-width: 200px; 147 | appearance: none; 148 | border: 0; 149 | background-color: #fff; 150 | border-radius: 0; 151 | font-size: 16px; 152 | padding: 0.5rem; } 153 | @media (max-width: 799px) { 154 | .search__form input { 155 | border-bottom: 1px solid #979797; } } 156 | -------------------------------------------------------------------------------- /styles/header-15.css: -------------------------------------------------------------------------------- 1 | /* 2 | ** The Header Media Queries ** 3 | ** Tweak as per your needs ** 4 | */ 5 | .brand { 6 | display: inline-block; 7 | font-weight: bold; 8 | font-size: 20px; } 9 | @media (min-width: 600px) { 10 | .brand { 11 | margin-bottom: 1rem; } } 12 | .site-header { 13 | position: relative; 14 | background-color: #def7ff; } 15 | 16 | .site-header__wrapper { 17 | padding-top: 1rem; 18 | padding-bottom: 1rem; } 19 | @media (min-width: 600px) { 20 | .site-header__wrapper { 21 | text-align: center; } } 22 | @media (min-width: 600px) { 23 | .nav__wrapper { 24 | display: inline-flex; } } 25 | 26 | @media (max-width: 599px) { 27 | .nav__wrapper { 28 | position: absolute; 29 | top: 100%; 30 | right: 0; 31 | left: 0; 32 | z-index: -1; 33 | background-color: #d9f0f7; 34 | visibility: hidden; 35 | opacity: 0; 36 | transform: translateY(-100%); 37 | transition: transform 0.3s ease-out, opacity 0.3s ease-out; } 38 | .nav__wrapper.active { 39 | visibility: visible; 40 | opacity: 1; 41 | transform: translateY(0); } } 42 | 43 | .nav__item a { 44 | display: block; 45 | padding: 1rem; } 46 | 47 | .nav__toggle { 48 | display: none; } 49 | @media (max-width: 599px) { 50 | .nav__toggle { 51 | display: block; 52 | position: absolute; 53 | right: 1rem; 54 | top: 1rem; } } 55 | -------------------------------------------------------------------------------- /styles/header-16.css: -------------------------------------------------------------------------------- 1 | /* 2 | ** The Header Media Queries ** 3 | ** Tweak as per your needs ** 4 | */ 5 | .brand { 6 | font-weight: bold; 7 | font-size: 20px; } 8 | 9 | .site-header { 10 | position: relative; 11 | background-color: #def7ff; } 12 | 13 | .site-header__wrapper { 14 | padding-top: 1rem; 15 | padding-bottom: 1rem; } 16 | @media (min-width: 600px) { 17 | .site-header__wrapper { 18 | display: flex; 19 | justify-content: space-between; 20 | align-items: center; 21 | padding-top: 0; 22 | padding-bottom: 0; } } 23 | @media (min-width: 600px) { 24 | .nav__wrapper { 25 | display: flex; } } 26 | 27 | @media (max-width: 599px) { 28 | .nav__wrapper { 29 | position: absolute; 30 | top: 100%; 31 | right: 0; 32 | left: 0; 33 | z-index: -1; 34 | background-color: #d9f0f7; 35 | visibility: hidden; 36 | opacity: 0; 37 | transform: translateY(-100%); 38 | transition: transform 0.3s ease-out, opacity 0.3s ease-out; } 39 | .nav__wrapper.active { 40 | visibility: visible; 41 | opacity: 1; 42 | transform: translateY(0); } } 43 | 44 | @media (min-width: 600px) { 45 | .nav__item:first-child a { 46 | border-left: 1px solid #b5b5b5; } } 47 | 48 | .nav__item a { 49 | display: block; 50 | padding: 1.5rem 1rem; } 51 | @media (min-width: 600px) { 52 | .nav__item a { 53 | border-right: 1px solid #b5b5b5; } } 54 | .nav__toggle { 55 | display: none; } 56 | @media (max-width: 599px) { 57 | .nav__toggle { 58 | display: block; 59 | position: absolute; 60 | right: 1rem; 61 | top: 1rem; } } 62 | -------------------------------------------------------------------------------- /styles/header-17.css: -------------------------------------------------------------------------------- 1 | /* 2 | ** The Header Media Queries ** 3 | ** Tweak as per your needs ** 4 | */ 5 | .brand { 6 | font-weight: bold; 7 | font-size: 20px; } 8 | 9 | .site-header { 10 | position: relative; 11 | background-color: #def7ff; } 12 | 13 | .site-header__start { 14 | display: flex; 15 | align-items: center; } 16 | 17 | .site-header__end { 18 | display: flex; 19 | align-items: center; } 20 | 21 | .site-header__wrapper { 22 | display: flex; 23 | justify-content: space-between; 24 | align-items: center; 25 | padding-top: 1rem; 26 | padding-bottom: 1rem; } 27 | @media (min-width: 865px) { 28 | .site-header__wrapper { 29 | padding-top: 0; 30 | padding-bottom: 0; } } 31 | @media (min-width: 865px) { 32 | .nav__wrapper { 33 | display: flex; } } 34 | 35 | @media (max-width: 864px) { 36 | .nav__wrapper { 37 | position: absolute; 38 | top: calc(100% + 35px); 39 | right: 0; 40 | left: 0; 41 | z-index: -1; 42 | background-color: #d9f0f7; 43 | visibility: hidden; 44 | opacity: 0; 45 | transform: translateY(-100%); 46 | transition: transform 0.3s ease-out, opacity 0.3s ease-out; } 47 | .nav__wrapper.active { 48 | visibility: visible; 49 | opacity: 1; 50 | transform: translateY(0); } } 51 | 52 | @media (min-width: 865px) { 53 | .nav__item:first-child a { 54 | border-left: 1px solid #8a8383; } } 55 | 56 | .nav__item:not(:last-child) { 57 | margin-right: 0.5rem; } 58 | 59 | .nav__item a { 60 | display: block; 61 | padding: 1rem; 62 | border-left: 4px solid transparent; } 63 | @media (min-width: 865px) { 64 | .nav__item a { 65 | border-right: 1px solid #8a8383; 66 | text-align: center; 67 | box-shadow: inset 0 -4px 0 0 transparent; } } 68 | .nav__item svg { 69 | display: inline-block; 70 | vertical-align: middle; 71 | width: 28px; 72 | height: 28px; 73 | margin-right: 1rem; } 74 | @media (min-width: 865px) { 75 | .nav__item svg { 76 | display: block; 77 | margin: 0 auto 0.5rem; } } 78 | @media (min-width: 865px) { 79 | .nav__item.active a { 80 | box-shadow: inset 0 -4px 0 0 #222; } } 81 | 82 | .nav__toggle { 83 | display: none; } 84 | @media (max-width: 864px) { 85 | .nav__toggle { 86 | display: block; 87 | position: absolute; 88 | right: 1rem; 89 | top: 1rem; } } 90 | .search { 91 | display: flex; 92 | margin-left: 1rem; } 93 | 94 | .search__toggle { 95 | appearance: none; 96 | order: 1; 97 | font-size: 0; 98 | width: 34px; 99 | height: 34px; 100 | background: url("../img/header-3/search.svg") center right/22px no-repeat; 101 | border: 0; 102 | display: none; } 103 | @media (min-width: 865px) { 104 | .search__toggle { 105 | border-left: 1px solid #979797; 106 | padding-left: 10px; } } 107 | @media (max-width: 864px) { 108 | .search__toggle { 109 | position: absolute; 110 | right: 5.5rem; 111 | top: 0.65rem; 112 | background: url("../img/header-3/search.svg") center/22px no-repeat; } } 113 | .search__form { 114 | display: block; } 115 | .search__form.active { 116 | display: block; } 117 | @media (max-width: 864px) { 118 | .search__form { 119 | position: absolute; 120 | left: 0; 121 | right: 0; 122 | top: 100%; } 123 | .search__form input { 124 | width: 100%; } } 125 | .search__form input { 126 | min-width: 200px; 127 | appearance: none; 128 | border: 0; 129 | background-color: #fff; 130 | border-radius: 0; 131 | font-size: 16px; 132 | padding: 0.5rem; } 133 | @media (max-width: 864px) { 134 | .search__form input { 135 | border-bottom: 1px solid #979797; } } 136 | .inactive-item { 137 | opacity: 0; } 138 | -------------------------------------------------------------------------------- /styles/header-2.css: -------------------------------------------------------------------------------- 1 | /* 2 | ** The Header Media Queries ** 3 | ** Tweak as per your needs ** 4 | */ 5 | .brand { 6 | font-weight: bold; 7 | font-size: 20px; } 8 | 9 | .site-header { 10 | position: relative; 11 | background-color: #def7ff; } 12 | 13 | .site-header__wrapper { 14 | padding-top: 1rem; 15 | padding-bottom: 1rem; } 16 | @media (min-width: 600px) { 17 | .site-header__wrapper { 18 | display: flex; 19 | align-items: center; 20 | padding-top: 0; 21 | padding-bottom: 0; } } 22 | .nav { 23 | flex: 1; } 24 | 25 | @media (min-width: 600px) { 26 | .nav__wrapper { 27 | display: flex; } } 28 | 29 | @media (max-width: 599px) { 30 | .nav__wrapper { 31 | position: absolute; 32 | top: 100%; 33 | right: 0; 34 | left: 0; 35 | z-index: -1; 36 | background-color: #d9f0f7; 37 | visibility: hidden; 38 | opacity: 0; 39 | transform: translateY(-100%); 40 | transition: transform 0.3s ease-out, opacity 0.3s ease-out; } 41 | .nav__wrapper.active { 42 | visibility: visible; 43 | opacity: 1; 44 | transform: translateY(0); } } 45 | 46 | .nav__item a { 47 | display: block; 48 | padding: 1.5rem 1rem; } 49 | 50 | @media (min-width: 600px) { 51 | .nav__item--end { 52 | margin-left: auto; } } 53 | 54 | .nav__toggle { 55 | display: none; } 56 | @media (max-width: 599px) { 57 | .nav__toggle { 58 | display: block; 59 | position: absolute; 60 | right: 1rem; 61 | top: 1rem; } } 62 | -------------------------------------------------------------------------------- /styles/header-3.css: -------------------------------------------------------------------------------- 1 | /* 2 | ** The Header Media Queries ** 3 | ** Tweak as per your needs ** 4 | */ 5 | .brand { 6 | font-weight: bold; 7 | font-size: 20px; } 8 | 9 | .site-header { 10 | position: relative; 11 | background-color: #def7ff; } 12 | 13 | .site-header__end { 14 | display: flex; 15 | align-items: center; } 16 | 17 | .site-header__wrapper { 18 | display: flex; 19 | justify-content: space-between; 20 | align-items: center; 21 | padding-top: 1rem; 22 | padding-bottom: 1rem; } 23 | @media (min-width: 800px) { 24 | .site-header__wrapper { 25 | padding-top: 0; 26 | padding-bottom: 0; } } 27 | @media (min-width: 800px) { 28 | .nav__wrapper { 29 | display: flex; } } 30 | 31 | @media (max-width: 799px) { 32 | .nav__wrapper { 33 | position: absolute; 34 | top: 100%; 35 | right: 0; 36 | left: 0; 37 | z-index: -1; 38 | background-color: #d9f0f7; 39 | visibility: hidden; 40 | opacity: 0; 41 | transform: translateY(-100%); 42 | transition: transform 0.3s ease-out, opacity 0.3s ease-out; } 43 | .nav__wrapper.active { 44 | visibility: visible; 45 | opacity: 1; 46 | transform: translateY(0); } } 47 | 48 | .nav__item a { 49 | display: block; 50 | padding: 1.5rem 1rem; } 51 | 52 | .nav__toggle { 53 | display: none; } 54 | @media (max-width: 799px) { 55 | .nav__toggle { 56 | display: block; 57 | position: absolute; 58 | right: 1rem; 59 | top: 1rem; } } 60 | .search { 61 | display: flex; } 62 | 63 | .search__toggle { 64 | appearance: none; 65 | order: 1; 66 | font-size: 0; 67 | width: 34px; 68 | height: 34px; 69 | background: url("../img/header-3/search.svg") center right/22px no-repeat; 70 | border: 0; } 71 | @media (min-width: 800px) { 72 | .search__toggle { 73 | border-left: 1px solid #979797; 74 | padding-left: 10px; } } 75 | @media (max-width: 799px) { 76 | .search__toggle { 77 | position: absolute; 78 | right: 5.5rem; 79 | top: 0.65rem; 80 | background: url("../img/header-3/search.svg") center/22px no-repeat; } } 81 | .search__form { 82 | display: none; } 83 | .search__form.active { 84 | display: block; } 85 | @media (max-width: 799px) { 86 | .search__form { 87 | position: absolute; 88 | left: 0; 89 | right: 0; 90 | top: 100%; 91 | background-color: red; } 92 | .search__form input { 93 | width: 100%; } } 94 | .search__form input { 95 | min-width: 200px; 96 | appearance: none; 97 | border: 0; 98 | background-color: #fff; 99 | border-radius: 0; 100 | font-size: 16px; 101 | padding: 0.5rem; } 102 | @media (max-width: 799px) { 103 | .search__form input { 104 | border-bottom: 1px solid #979797; } } 105 | -------------------------------------------------------------------------------- /styles/header-4.css: -------------------------------------------------------------------------------- 1 | /* 2 | ** The Header Media Queries ** 3 | ** Tweak as per your needs ** 4 | */ 5 | .brand { 6 | font-weight: bold; 7 | font-size: 20px; } 8 | 9 | .site-header { 10 | position: relative; 11 | background-color: #def7ff; } 12 | 13 | .site-header__start { 14 | display: flex; 15 | align-items: center; } 16 | 17 | .site-header__end { 18 | display: flex; 19 | align-items: center; } 20 | 21 | .site-header__wrapper { 22 | display: flex; 23 | justify-content: space-between; 24 | align-items: center; 25 | padding-top: 1rem; 26 | padding-bottom: 1rem; } 27 | @media (min-width: 800px) { 28 | .site-header__wrapper { 29 | padding-top: 0; 30 | padding-bottom: 0; } } 31 | @media (min-width: 800px) { 32 | .nav__wrapper { 33 | display: flex; } } 34 | 35 | @media (max-width: 799px) { 36 | .nav__wrapper { 37 | position: absolute; 38 | top: calc(100% + 35px); 39 | right: 0; 40 | left: 0; 41 | z-index: -1; 42 | background-color: #d9f0f7; 43 | visibility: hidden; 44 | opacity: 0; 45 | transform: translateY(-100%); 46 | transition: transform 0.3s ease-out, opacity 0.3s ease-out; } 47 | .nav__wrapper.active { 48 | visibility: visible; 49 | opacity: 1; 50 | transform: translateY(0); } } 51 | 52 | .nav__item:not(:last-child) { 53 | margin-right: 0.5rem; } 54 | 55 | .nav__item a { 56 | display: block; 57 | padding: 1rem; 58 | border-left: 4px solid transparent; } 59 | @media (min-width: 800px) { 60 | .nav__item a { 61 | text-align: center; 62 | border-left: 0; 63 | border-bottom: 4px solid transparent; } } 64 | .nav__item svg { 65 | display: inline-block; 66 | vertical-align: middle; 67 | width: 28px; 68 | height: 28px; 69 | margin-right: 1rem; } 70 | @media (min-width: 800px) { 71 | .nav__item svg { 72 | display: block; 73 | margin: 0 auto 0.5rem; } } 74 | .nav__item.active a { 75 | border-left-color: #222; } 76 | @media (min-width: 800px) { 77 | .nav__item.active a { 78 | border-bottom-color: #222; } } 79 | .nav__toggle { 80 | display: none; } 81 | @media (max-width: 799px) { 82 | .nav__toggle { 83 | display: block; 84 | position: absolute; 85 | right: 1rem; 86 | top: 1rem; } } 87 | .search { 88 | display: flex; 89 | margin-left: 1rem; } 90 | 91 | .search__toggle { 92 | appearance: none; 93 | order: 1; 94 | font-size: 0; 95 | width: 34px; 96 | height: 34px; 97 | background: url("../img/header-3/search.svg") center right/22px no-repeat; 98 | border: 0; 99 | display: none; } 100 | @media (min-width: 800px) { 101 | .search__toggle { 102 | border-left: 1px solid #979797; 103 | padding-left: 10px; } } 104 | @media (max-width: 799px) { 105 | .search__toggle { 106 | position: absolute; 107 | right: 5.5rem; 108 | top: 0.65rem; 109 | background: url("../img/header-3/search.svg") center/22px no-repeat; } } 110 | .search__form { 111 | display: block; } 112 | .search__form.active { 113 | display: block; } 114 | @media (max-width: 799px) { 115 | .search__form { 116 | position: absolute; 117 | left: 0; 118 | right: 0; 119 | top: 100%; } 120 | .search__form input { 121 | width: 100%; } } 122 | .search__form input { 123 | min-width: 200px; 124 | appearance: none; 125 | border: 0; 126 | background-color: #fff; 127 | border-radius: 0; 128 | font-size: 16px; 129 | padding: 0.5rem; } 130 | @media (max-width: 799px) { 131 | .search__form input { 132 | border-bottom: 1px solid #979797; } } 133 | .inactive-item { 134 | opacity: 0; } 135 | -------------------------------------------------------------------------------- /styles/header-5.css: -------------------------------------------------------------------------------- 1 | /* 2 | ** The Header Media Queries ** 3 | ** Tweak as per your needs ** 4 | */ 5 | .brand { 6 | font-weight: bold; 7 | font-size: 20px; } 8 | 9 | .site-header { 10 | position: relative; 11 | background-color: #def7ff; } 12 | 13 | .site-header__middle { 14 | flex: 1; } 15 | 16 | .site-header__wrapper { 17 | display: flex; 18 | justify-content: space-between; 19 | align-items: center; 20 | padding: 1rem; } 21 | @media (min-width: 940px) { 22 | .site-header__wrapper { 23 | padding-top: 0; 24 | padding-bottom: 0; } } 25 | .nav { 26 | margin-left: 1rem; 27 | margin-right: 1rem; } 28 | 29 | @media (min-width: 940px) { 30 | .nav__wrapper { 31 | display: flex; 32 | justify-content: center; } } 33 | 34 | @media (max-width: 939px) { 35 | .nav__wrapper { 36 | position: absolute; 37 | top: 100%; 38 | right: 0; 39 | left: 0; 40 | z-index: -1; 41 | background-color: #d9f0f7; 42 | visibility: hidden; 43 | opacity: 0; 44 | transform: translateY(-100%); 45 | transition: transform 0.3s ease-out, opacity 0.3s ease-out; } 46 | .nav__wrapper.active { 47 | visibility: visible; 48 | opacity: 1; 49 | transform: translateY(0); } } 50 | 51 | @media (min-width: 940px) { 52 | .nav__item:last-child a { 53 | border-right: 1px solid #222; } } 54 | 55 | @media (min-width: 1100px) { 56 | .nav__item { 57 | min-width: 140px; 58 | flex: 1; } } 59 | 60 | .nav__item a { 61 | display: block; 62 | padding: 1rem 1.25rem; 63 | border-left: 4px solid transparent; } 64 | @media (min-width: 940px) { 65 | .nav__item a { 66 | text-align: center; 67 | border-left: 1px solid #222; 68 | border-bottom: 4px solid transparent; } } 69 | .nav__item svg { 70 | display: inline-block; 71 | vertical-align: middle; 72 | width: 22px; 73 | height: 22px; 74 | margin-right: 1rem; } 75 | @media (min-width: 940px) { 76 | .nav__item svg { 77 | display: block; 78 | margin: 0 auto 0.5rem; } } 79 | .nav__item.active a { 80 | border-left-color: #222; } 81 | @media (min-width: 940px) { 82 | .nav__item.active a { 83 | border-bottom-color: #222; } } 84 | .nav__toggle { 85 | position: absolute; 86 | right: 1rem; 87 | top: 1rem; } 88 | @media (min-width: 940px) { 89 | .nav__toggle { 90 | display: none; } } 91 | .search { 92 | display: flex; } 93 | 94 | .search__toggle { 95 | appearance: none; 96 | order: 1; 97 | font-size: 0; 98 | width: 34px; 99 | height: 34px; 100 | background: url("../img/header-3/search.svg") center right/22px no-repeat; 101 | border: 0; 102 | display: none; } 103 | @media (max-width: 1239px) { 104 | .search__toggle { 105 | display: block; } } 106 | @media (max-width: 939px) { 107 | .search__toggle { 108 | position: absolute; 109 | right: 5.5rem; 110 | top: 0.65rem; 111 | background: url("../img/header-3/search.svg") center/22px no-repeat; 112 | display: block; } } 113 | .search__toggle.active { 114 | background: url("../img/header-5/close.svg") center/22px no-repeat; } 115 | 116 | .search__form { 117 | flex: 1; 118 | display: none; } 119 | @media (min-width: 1240px) { 120 | .search__form { 121 | display: block; } 122 | .search__form input { 123 | min-width: 220px; } } 124 | @media (max-width: 1239px) { 125 | .search__form { 126 | position: absolute; 127 | left: 0; 128 | right: 0; 129 | top: 100%; } 130 | .search__form.active { 131 | display: block; } 132 | .search__form input { 133 | outline: solid 1px; } } 134 | .search__form input { 135 | appearance: none; 136 | width: 100%; 137 | border: 0; 138 | background-color: #fff; 139 | border-radius: 0; 140 | font-size: 16px; 141 | padding: 0.5rem; } 142 | @media (max-width: 939px) { 143 | .search__form input { 144 | border-bottom: 1px solid #979797; } } 145 | .inactive-item { 146 | opacity: 0; } 147 | -------------------------------------------------------------------------------- /styles/header-6.css: -------------------------------------------------------------------------------- 1 | /* 2 | ** The Header Media Queries ** 3 | ** Tweak as per your needs ** 4 | */ 5 | .brand { 6 | font-weight: bold; 7 | font-size: 20px; } 8 | 9 | .site-header { 10 | position: relative; 11 | background-color: #def7ff; } 12 | 13 | .site-header__top { 14 | background-color: #def7ff; } 15 | 16 | .site-header__bottom { 17 | background-color: #c7f2ff; } 18 | 19 | .site-header__wrapper { 20 | padding-top: 1rem; 21 | padding-bottom: 1rem; } 22 | .site-header__wrapper.bottom { 23 | display: flex; 24 | justify-content: space-between; 25 | align-items: center; } 26 | @media (min-width: 600px) { 27 | .site-header__wrapper.top { 28 | display: flex; 29 | justify-content: space-between; 30 | align-items: center; 31 | padding-top: 0; 32 | padding-bottom: 0; } } 33 | @media (min-width: 600px) { 34 | .nav__wrapper { 35 | display: flex; } } 36 | 37 | @media (max-width: 599px) { 38 | .nav__wrapper { 39 | position: absolute; 40 | top: 100%; 41 | right: 0; 42 | left: 0; 43 | z-index: -1; 44 | background-color: #d9f0f7; 45 | visibility: hidden; 46 | opacity: 0; 47 | transform: translateY(-100%); 48 | transition: transform 0.3s ease-out, opacity 0.3s ease-out; } 49 | .nav__wrapper.active { 50 | visibility: visible; 51 | opacity: 1; 52 | transform: translateY(0); } } 53 | 54 | @media (min-width: 600px) { 55 | .nav__item:not(:last-child) { 56 | margin-right: 2rem; } } 57 | 58 | @media (max-width: 599px) { 59 | .nav__item a { 60 | padding-left: 1rem; 61 | padding-right: 1rem; } } 62 | 63 | .nav__item a { 64 | display: block; 65 | padding-top: 1.5rem; 66 | padding-bottom: 1.5rem; } 67 | 68 | .nav__toggle { 69 | display: none; } 70 | @media (max-width: 599px) { 71 | .nav__toggle { 72 | display: block; 73 | position: absolute; 74 | right: 1rem; 75 | top: 1rem; } } 76 | -------------------------------------------------------------------------------- /styles/header-7.css: -------------------------------------------------------------------------------- 1 | /* 2 | ** The Header Media Queries ** 3 | ** Tweak as per your needs ** 4 | */ 5 | .brand { 6 | font-weight: bold; 7 | font-size: 20px; } 8 | 9 | .site-header { 10 | position: relative; 11 | background-color: #def7ff; } 12 | 13 | .site-header__wrapper { 14 | display: flex; 15 | justify-content: space-between; 16 | align-items: center; 17 | padding-top: 1rem; 18 | padding-bottom: 1rem; } 19 | @media (min-width: 660px) { 20 | .site-header__wrapper { 21 | padding-top: 0; 22 | padding-bottom: 0; } } 23 | @media (max-width: 659px) { 24 | .site-header__end { 25 | padding-right: 4rem; } } 26 | 27 | @media (min-width: 660px) { 28 | .nav__wrapper { 29 | display: flex; } } 30 | 31 | @media (max-width: 659px) { 32 | .nav__wrapper { 33 | position: absolute; 34 | top: 100%; 35 | right: 0; 36 | left: 0; 37 | z-index: -1; 38 | background-color: #d9f0f7; 39 | visibility: hidden; 40 | opacity: 0; 41 | transform: translateY(-100%); 42 | transition: transform 0.3s ease-out, opacity 0.3s ease-out; } 43 | .nav__wrapper.active { 44 | visibility: visible; 45 | opacity: 1; 46 | transform: translateY(0); } } 47 | 48 | .nav__item a { 49 | display: block; 50 | padding: 1.5rem 1rem; } 51 | 52 | .nav__toggle { 53 | display: none; } 54 | @media (max-width: 659px) { 55 | .nav__toggle { 56 | display: block; 57 | position: absolute; 58 | right: 1rem; 59 | top: 1rem; } } 60 | -------------------------------------------------------------------------------- /styles/header-8.css: -------------------------------------------------------------------------------- 1 | /* 2 | ** The Header Media Queries ** 3 | ** Tweak as per your needs ** 4 | */ 5 | .brand { 6 | font-weight: bold; 7 | font-size: 20px; } 8 | 9 | .site-header { 10 | position: relative; 11 | background-color: #def7ff; } 12 | 13 | .site-header__wrapper { 14 | display: flex; 15 | justify-content: space-between; 16 | align-items: center; 17 | padding-top: 1rem; 18 | padding-bottom: 1rem; } 19 | @media (min-width: 660px) { 20 | .site-header__wrapper { 21 | padding-top: 0; 22 | padding-bottom: 0; } 23 | .site-header__wrapper > * { 24 | flex: 1; } } 25 | @media (min-width: 660px) { 26 | .site-header__start { 27 | text-align: center; } } 28 | 29 | @media (min-width: 660px) { 30 | .site-header__middle { 31 | order: -1; } } 32 | 33 | @media (min-width: 660px) { 34 | .site-header__end { 35 | display: flex; 36 | justify-content: flex-end; 37 | /* Better for LTR/RTL support */ } } 38 | 39 | @media (max-width: 659px) { 40 | .site-header__end { 41 | padding-right: 4rem; } } 42 | 43 | @media (min-width: 660px) { 44 | .nav__wrapper { 45 | display: flex; } } 46 | 47 | @media (max-width: 659px) { 48 | .nav__wrapper { 49 | position: absolute; 50 | top: 100%; 51 | right: 0; 52 | left: 0; 53 | z-index: -1; 54 | background-color: #d9f0f7; 55 | visibility: hidden; 56 | opacity: 0; 57 | transform: translateY(-100%); 58 | transition: transform 0.3s ease-out, opacity 0.3s ease-out; } 59 | .nav__wrapper.active { 60 | visibility: visible; 61 | opacity: 1; 62 | transform: translateY(0); } } 63 | 64 | .nav__item:not(:last-child) { 65 | margin-right: 1.5rem; } 66 | 67 | .nav__item a { 68 | display: block; 69 | padding: 1.5rem 1rem; } 70 | @media (min-width: 660px) { 71 | .nav__item a { 72 | padding-left: 0; 73 | padding-right: 0; } } 74 | .nav__toggle { 75 | display: none; } 76 | @media (max-width: 659px) { 77 | .nav__toggle { 78 | display: block; 79 | position: absolute; 80 | right: 1rem; 81 | top: 1rem; } } 82 | -------------------------------------------------------------------------------- /styles/header-9.css: -------------------------------------------------------------------------------- 1 | /* 2 | ** The Header Media Queries ** 3 | ** Tweak as per your needs ** 4 | */ 5 | .brand { 6 | font-weight: bold; 7 | font-size: 20px; } 8 | 9 | .site-header { 10 | position: relative; 11 | background-color: #def7ff; } 12 | 13 | .site-header__wrapper { 14 | display: flex; 15 | align-items: center; 16 | justify-content: space-between; 17 | padding-top: 1rem; 18 | padding-bottom: 1rem; } 19 | @media (min-width: 630px) { 20 | .site-header__wrapper { 21 | justify-content: initial; } } 22 | @media (min-width: 630px) { 23 | .site-header__middle { 24 | margin-left: auto; } } 25 | 26 | @media (max-width: 629px) { 27 | .site-header__end { 28 | padding-right: 4rem; } } 29 | 30 | @media (min-width: 630px) { 31 | .nav__wrapper { 32 | display: flex; } } 33 | 34 | @media (max-width: 629px) { 35 | .nav__wrapper { 36 | position: absolute; 37 | top: 100%; 38 | right: 0; 39 | left: 0; 40 | z-index: -1; 41 | background-color: #d9f0f7; 42 | visibility: hidden; 43 | opacity: 0; 44 | transform: translateY(-100%); 45 | transition: transform 0.3s ease-out, opacity 0.3s ease-out; } 46 | .nav__wrapper.active { 47 | visibility: visible; 48 | opacity: 1; 49 | transform: translateY(0); } } 50 | 51 | .nav__item a { 52 | display: block; 53 | padding: 1rem; } 54 | 55 | .nav__toggle { 56 | display: none; } 57 | @media (max-width: 629px) { 58 | .nav__toggle { 59 | display: block; 60 | position: absolute; 61 | right: 1rem; 62 | top: 1rem; } } 63 | -------------------------------------------------------------------------------- /styles/headers/header-1.scss: -------------------------------------------------------------------------------- 1 | /* 2 | ** The Header Media Queries ** 3 | ** Tweak as per your needs ** 4 | */ 5 | 6 | $small: 600px; 7 | 8 | .brand { 9 | font-weight: bold; 10 | font-size: 20px; 11 | } 12 | 13 | .site-header { 14 | position: relative; 15 | background-color: #def7ff; 16 | } 17 | 18 | .site-header__wrapper { 19 | padding-top: 1rem; 20 | padding-bottom: 1rem; 21 | 22 | @media (min-width: $small) { 23 | display: flex; 24 | justify-content: space-between; 25 | align-items: center; 26 | padding-top: 0; 27 | padding-bottom: 0; 28 | } 29 | } 30 | 31 | .nav__wrapper { 32 | @media (min-width: $small) { 33 | display: flex; 34 | } 35 | 36 | @media (max-width: $small - 1) { 37 | position: absolute; 38 | top: 100%; 39 | right: 0; 40 | left: 0; 41 | z-index: -1; 42 | background-color: #d9f0f7; 43 | visibility: hidden; 44 | opacity: 0; 45 | transform: translateY(-100%); 46 | transition: transform 0.3s ease-out, opacity 0.3s ease-out; 47 | 48 | &.active { 49 | visibility: visible; 50 | opacity: 1; 51 | transform: translateY(0); 52 | } 53 | } 54 | } 55 | 56 | .nav__item { 57 | a { 58 | display: block; 59 | padding: 1.5rem 1rem; 60 | } 61 | } 62 | 63 | .nav__toggle { 64 | display: none; 65 | 66 | @media (max-width: $small - 1) { 67 | display: block; 68 | position: absolute; 69 | right: 1rem; 70 | top: 1rem; 71 | } 72 | } 73 | -------------------------------------------------------------------------------- /styles/headers/header-10.scss: -------------------------------------------------------------------------------- 1 | /* 2 | ** The Header Media Queries ** 3 | ** Tweak as per your needs ** 4 | */ 5 | 6 | $small: 800px; 7 | $medium: 940px; 8 | 9 | .brand { 10 | font-weight: bold; 11 | font-size: 27px; 12 | } 13 | 14 | .site-header__top { 15 | background-color: #def7ff; 16 | 17 | ul { 18 | display: flex; 19 | } 20 | 21 | li:not(:last-child) { 22 | margin-right: 1.5rem; 23 | } 24 | 25 | .site-header__start { 26 | display: none; 27 | } 28 | } 29 | 30 | .site-header__bottom { 31 | position: relative; 32 | background-color: #c7f2ff; 33 | 34 | .site-header__end { 35 | @media (max-width: $medium - 1) { 36 | order: -1; 37 | } 38 | } 39 | } 40 | 41 | .site-header__wrapper { 42 | display: flex; 43 | justify-content: space-between; 44 | } 45 | 46 | .site-header__wrapper { 47 | display: flex; 48 | justify-content: space-between; 49 | align-items: center; 50 | padding: 1rem; 51 | 52 | @media (min-width: $medium) { 53 | padding-top: 0.5rem; 54 | padding-bottom: 0.5rem; 55 | } 56 | 57 | .site-header__top & { 58 | @media (min-width: $medium) { 59 | padding-top: 1rem; 60 | padding-bottom: 1rem; 61 | } 62 | } 63 | } 64 | 65 | .nav { 66 | margin-left: 1rem; 67 | margin-right: 1rem; 68 | } 69 | 70 | .nav__wrapper { 71 | //display: none; 72 | 73 | @media (min-width: $medium) { 74 | display: flex; 75 | } 76 | 77 | @media (max-width: $medium - 1) { 78 | position: absolute; 79 | top: 100%; 80 | right: 0; 81 | left: 0; 82 | z-index: -1; 83 | background-color: #d9f0f7; 84 | visibility: hidden; 85 | opacity: 0; 86 | transform: translateY(-100%); 87 | transition: transform 0.3s ease-out, opacity 0.3s ease-out; 88 | 89 | &.active { 90 | visibility: visible; 91 | opacity: 1; 92 | transform: translateY(0); 93 | } 94 | } 95 | } 96 | 97 | .nav__item { 98 | a { 99 | display: block; 100 | padding: 1.5rem 1.25rem; 101 | } 102 | 103 | svg { 104 | display: inline-block; 105 | vertical-align: middle; 106 | width: 28px; 107 | height: 28px; 108 | margin-right: 1rem; 109 | 110 | @media (min-width: $medium) { 111 | display: block; 112 | margin: 0 auto 0.5rem; 113 | } 114 | } 115 | 116 | &.active { 117 | a { 118 | border-left-color: #222; 119 | 120 | @media (min-width: $small) { 121 | border-bottom-color: #222; 122 | } 123 | } 124 | } 125 | } 126 | 127 | .nav__toggle { 128 | position: absolute; 129 | right: 1rem; 130 | top: 1rem; 131 | 132 | @media (min-width: $medium) { 133 | display: none; 134 | } 135 | } 136 | 137 | .search { 138 | display: flex; 139 | } 140 | 141 | .search__toggle { 142 | appearance: none; 143 | order: 1; 144 | font-size: 0; 145 | width: 34px; 146 | height: 34px; 147 | background: url("../img/header-3/search.svg") center/22px no-repeat; 148 | border: 0; 149 | 150 | @media (max-width: $medium - 1) { 151 | position: absolute; 152 | right: 5.5rem; 153 | top: 0.65rem; 154 | } 155 | 156 | &.active { 157 | background: url("../img/header-5/close.svg") center/22px no-repeat; 158 | } 159 | } 160 | 161 | .search__form { 162 | display: none; 163 | 164 | &.active { 165 | display: block; 166 | } 167 | 168 | @media (max-width: $small - 1) { 169 | position: absolute; 170 | left: 0; 171 | right: 0; 172 | top: 100%; 173 | background-color: red; 174 | 175 | input { 176 | width: 100%; 177 | } 178 | } 179 | 180 | input { 181 | min-width: 200px; 182 | appearance: none; 183 | border: 0; 184 | background-color: #fff; 185 | border-radius: 0; 186 | font-size: 16px; 187 | padding: 0.5rem; 188 | 189 | @media (max-width: $small - 1) { 190 | border-bottom: 1px solid #979797; 191 | } 192 | } 193 | } 194 | -------------------------------------------------------------------------------- /styles/headers/header-11.scss: -------------------------------------------------------------------------------- 1 | /* 2 | ** The Header Media Queries ** 3 | ** Tweak as per your needs ** 4 | */ 5 | 6 | $small: 600px; 7 | 8 | .brand { 9 | font-weight: bold; 10 | font-size: 20px; 11 | } 12 | 13 | .site-header { 14 | position: relative; 15 | background-color: #def7ff; 16 | } 17 | 18 | .site-header__wrapper { 19 | display: flex; 20 | justify-content: space-between; 21 | align-items: center; 22 | padding-top: 1rem; 23 | padding-bottom: 1rem; 24 | } 25 | 26 | .nav__wrapper { 27 | position: fixed; 28 | top: 72px; 29 | left: 0; 30 | width: Max(220px, 20%); 31 | bottom: 0; 32 | z-index: 1; 33 | visibility: hidden; 34 | opacity: 0; 35 | transform: translateX(-100%); 36 | background-color: #d9f0f7; 37 | transition: transform 0.3s ease-out, opacity 0.3s ease-out; 38 | display: block; 39 | 40 | &.active { 41 | visibility: visible; 42 | opacity: 1; 43 | transform: translateX(0); 44 | } 45 | } 46 | 47 | .nav__item { 48 | border-bottom: 1px solid rgba(#000, 0.2); 49 | 50 | a { 51 | display: block; 52 | padding: 1rem; 53 | } 54 | } 55 | -------------------------------------------------------------------------------- /styles/headers/header-12.scss: -------------------------------------------------------------------------------- 1 | /* 2 | ** The Header Media Queries ** 3 | ** Tweak as per your needs ** 4 | */ 5 | 6 | $small: 600px; 7 | 8 | .brand { 9 | font-weight: bold; 10 | font-size: 20px; 11 | } 12 | 13 | .button--icon { 14 | min-width: initial; 15 | padding: 0.5rem; 16 | } 17 | 18 | .site-header { 19 | position: relative; 20 | background-color: #def7ff; 21 | } 22 | 23 | .site-header__wrapper { 24 | display: flex; 25 | justify-content: space-between; 26 | align-items: center; 27 | flex-wrap: wrap; 28 | padding-top: 1rem; 29 | padding-bottom: 1rem; 30 | } 31 | 32 | .site-header__start { 33 | display: flex; 34 | 35 | > * + * { 36 | margin-left: 1rem; 37 | } 38 | } 39 | 40 | .site-header__middle { 41 | @media (max-width: $small - 1) { 42 | flex: 0 0 100%; 43 | order: 2; 44 | margin-top: 1rem; 45 | } 46 | } 47 | 48 | .nav__wrapper { 49 | position: fixed; 50 | top: 56px; 51 | left: 0; 52 | width: Max(220px, 20%); 53 | bottom: 0; 54 | z-index: 1; 55 | visibility: hidden; 56 | opacity: 0; 57 | transform: translateX(-100%); 58 | background-color: #d9f0f7; 59 | transition: transform 0.3s ease-out, opacity 0.3s ease-out; 60 | display: block; 61 | 62 | &.active { 63 | visibility: visible; 64 | opacity: 1; 65 | transform: translateX(0); 66 | } 67 | 68 | @media (max-width: $small - 1) { 69 | top: 104px; 70 | /* Use a CSS variable and get JS help */ 71 | } 72 | } 73 | 74 | .nav__item { 75 | border-bottom: 1px solid rgba(#000, 0.2); 76 | 77 | a { 78 | display: block; 79 | padding: 1.5rem 1rem; 80 | } 81 | } 82 | 83 | .sub-nav { 84 | display: flex; 85 | flex-wrap: wrap; 86 | 87 | li:not(:last-child) { 88 | margin-right: 1.5rem; 89 | } 90 | 91 | @media (max-width: $small - 1) { 92 | background: rgba(#000, 0.1); 93 | margin: 0 -1rem -1rem; 94 | padding: 1rem; 95 | } 96 | } 97 | -------------------------------------------------------------------------------- /styles/headers/header-13.scss: -------------------------------------------------------------------------------- 1 | /* 2 | ** The Header Media Queries ** 3 | ** Tweak as per your needs ** 4 | */ 5 | 6 | $small: 680px; 7 | 8 | .brand { 9 | font-weight: bold; 10 | font-size: 20px; 11 | } 12 | 13 | .site-header { 14 | position: relative; 15 | background-color: #def7ff; 16 | } 17 | 18 | .site-header__wrapper { 19 | display: flex; 20 | justify-content: space-between; 21 | align-items: center; 22 | flex-wrap: wrap; 23 | padding-top: 1rem; 24 | padding-bottom: 1rem; 25 | } 26 | 27 | .site-header__start { 28 | display: flex; 29 | align-items: center; 30 | 31 | > * + * { 32 | margin-left: 1rem; 33 | } 34 | } 35 | 36 | .site-header__end { 37 | @media (max-width: $small - 1) { 38 | flex: 0 0 100%; 39 | order: 2; 40 | margin-top: 1rem; 41 | } 42 | } 43 | 44 | .nav__wrapper { 45 | position: fixed; 46 | top: 66px; 47 | left: 0; 48 | width: Max(220px, 20%); 49 | bottom: 0; 50 | z-index: 1; 51 | visibility: hidden; 52 | opacity: 0; 53 | transform: translateX(-100%); 54 | background-color: #d9f0f7; 55 | transition: transform 0.3s ease-out, opacity 0.3s ease-out; 56 | display: block; 57 | 58 | &.active { 59 | visibility: visible; 60 | opacity: 1; 61 | transform: translateX(0); 62 | } 63 | 64 | @media (max-width: $small - 1) { 65 | top: 101px; 66 | /* Use a CSS variable and get JS help */ 67 | } 68 | } 69 | 70 | .nav__item { 71 | border-bottom: 1px solid rgba(#000, 0.2); 72 | 73 | a { 74 | display: block; 75 | padding: 1.5rem 1rem; 76 | } 77 | } 78 | 79 | .sub-nav { 80 | display: flex; 81 | flex-wrap: wrap; 82 | 83 | li:not(:last-child) { 84 | margin-right: 1.5rem; 85 | } 86 | 87 | @media (max-width: $small - 1) { 88 | background: rgba(#000, 0.1); 89 | margin: 0 -1rem -1rem; 90 | padding: 1rem; 91 | } 92 | } 93 | 94 | .search { 95 | display: flex; 96 | } 97 | 98 | .search__toggle { 99 | appearance: none; 100 | order: 1; 101 | font-size: 0; 102 | width: 34px; 103 | height: 34px; 104 | background: url("../img/header-3/search.svg") center/22px no-repeat; 105 | border: 0; 106 | 107 | @media (max-width: $small - 1) { 108 | position: absolute; 109 | right: 1rem; 110 | top: 0.65rem; 111 | } 112 | 113 | &.active { 114 | background: url("../img/header-5/close.svg") center/22px no-repeat; 115 | } 116 | 117 | @media (min-width: $small) { 118 | display: none; 119 | } 120 | } 121 | 122 | .search__form { 123 | display: none; 124 | 125 | &.active { 126 | display: block; 127 | } 128 | 129 | @media (min-width: $small) { 130 | display: block; 131 | } 132 | 133 | @media (max-width: $small - 1) { 134 | position: absolute; 135 | left: 0; 136 | right: 0; 137 | top: 100%; 138 | background-color: red; 139 | 140 | input { 141 | width: 100%; 142 | } 143 | } 144 | 145 | input { 146 | min-width: 200px; 147 | appearance: none; 148 | border: 0; 149 | background-color: #fff; 150 | border-radius: 0; 151 | font-size: 16px; 152 | padding: 0.5rem; 153 | 154 | @media (max-width: $small - 1) { 155 | border-bottom: 1px solid #979797; 156 | } 157 | } 158 | } 159 | -------------------------------------------------------------------------------- /styles/headers/header-14.scss: -------------------------------------------------------------------------------- 1 | /* 2 | ** The Header Media Queries ** 3 | ** Tweak as per your needs ** 4 | */ 5 | 6 | $small: 800px; 7 | $medium: 940px; 8 | 9 | .brand { 10 | font-weight: bold; 11 | font-size: 27px; 12 | } 13 | 14 | .site-header__top { 15 | background-color: #def7ff; 16 | 17 | ul { 18 | display: flex; 19 | } 20 | 21 | li:not(:last-child) { 22 | margin-right: 1.5rem; 23 | } 24 | 25 | .site-header__start { 26 | display: none; 27 | } 28 | } 29 | 30 | .site-header__bottom { 31 | position: relative; 32 | background-color: #c7f2ff; 33 | 34 | .site-header__end { 35 | @media (max-width: $medium - 1) { 36 | order: -1; 37 | } 38 | } 39 | } 40 | 41 | .site-header__wrapper { 42 | display: flex; 43 | justify-content: space-between; 44 | } 45 | 46 | .site-header__wrapper { 47 | display: flex; 48 | justify-content: space-between; 49 | align-items: center; 50 | padding: 1rem; 51 | 52 | @media (min-width: $medium) { 53 | padding-top: 0.5rem; 54 | padding-bottom: 0.5rem; 55 | } 56 | } 57 | 58 | .site-header__end { 59 | display: flex; 60 | align-items: center; 61 | } 62 | 63 | .site-header__end.top { 64 | > * + * { 65 | margin-left: 1.5rem; 66 | } 67 | } 68 | 69 | .site-header__end.bottom { 70 | > *:not(:last-child) { 71 | @media (min-width: $medium) { 72 | margin-right: 1.5rem; 73 | //outline: solid 1px; 74 | } 75 | } 76 | 77 | .cart { 78 | @media (max-width: $medium - 1) { 79 | margin-right: 1.5rem; 80 | //outline: solid 1px; 81 | } 82 | } 83 | 84 | @media (max-width: $medium - 1) { 85 | .search { 86 | margin-left: 0; 87 | } 88 | } 89 | 90 | svg { 91 | width: 22px; 92 | height: 22px; 93 | } 94 | } 95 | 96 | .nav__wrapper { 97 | @media (min-width: $medium) { 98 | display: flex; 99 | } 100 | 101 | @media (max-width: $medium - 1) { 102 | position: absolute; 103 | top: 100%; 104 | right: 0; 105 | left: 0; 106 | z-index: -1; 107 | background-color: #d9f0f7; 108 | visibility: hidden; 109 | opacity: 0; 110 | transform: translateY(-100%); 111 | transition: transform 0.3s ease-out, opacity 0.3s ease-out; 112 | 113 | &.active { 114 | visibility: visible; 115 | opacity: 1; 116 | transform: translateY(0); 117 | } 118 | } 119 | } 120 | 121 | .nav__item { 122 | &:not(:last-child) { 123 | margin-right: 1.5rem; 124 | } 125 | 126 | a { 127 | display: block; 128 | padding-top: 1.5rem; 129 | padding-bottom: 1.5rem; 130 | 131 | @media (max-width: $medium - 1) { 132 | padding: 1rem; 133 | } 134 | } 135 | 136 | svg { 137 | display: inline-block; 138 | vertical-align: middle; 139 | width: 28px; 140 | height: 28px; 141 | margin-right: 1rem; 142 | 143 | @media (min-width: $medium) { 144 | display: block; 145 | margin: 0 auto 0.5rem; 146 | } 147 | } 148 | 149 | &.active { 150 | a { 151 | border-left-color: #222; 152 | 153 | @media (min-width: $small) { 154 | border-bottom-color: #222; 155 | } 156 | } 157 | } 158 | } 159 | 160 | .nav__toggle { 161 | position: absolute; 162 | right: 1rem; 163 | top: 1rem; 164 | 165 | @media (min-width: $medium) { 166 | display: none; 167 | } 168 | } 169 | 170 | .search { 171 | display: flex; 172 | } 173 | 174 | .search__toggle { 175 | appearance: none; 176 | order: 1; 177 | font-size: 0; 178 | width: 34px; 179 | height: 34px; 180 | background: url("../img/header-3/search.svg") center/22px no-repeat; 181 | border: 0; 182 | 183 | @media (max-width: $medium - 1) { 184 | position: absolute; 185 | right: 5.5rem; 186 | top: 0.65rem; 187 | } 188 | 189 | &.active { 190 | background: url("../img/header-5/close.svg") center/22px no-repeat; 191 | } 192 | } 193 | 194 | .search__form { 195 | display: none; 196 | 197 | &.active { 198 | display: block; 199 | } 200 | 201 | @media (max-width: $small - 1) { 202 | position: absolute; 203 | left: 0; 204 | right: 0; 205 | top: 100%; 206 | background-color: red; 207 | 208 | input { 209 | width: 100%; 210 | } 211 | } 212 | 213 | input { 214 | min-width: 200px; 215 | appearance: none; 216 | border: 0; 217 | background-color: #fff; 218 | border-radius: 0; 219 | font-size: 16px; 220 | padding: 0.5rem; 221 | 222 | @media (max-width: $small - 1) { 223 | border-bottom: 1px solid #979797; 224 | } 225 | } 226 | } 227 | -------------------------------------------------------------------------------- /styles/headers/header-15.scss: -------------------------------------------------------------------------------- 1 | /* 2 | ** The Header Media Queries ** 3 | ** Tweak as per your needs ** 4 | */ 5 | 6 | $small: 600px; 7 | 8 | .brand { 9 | display: inline-block; 10 | font-weight: bold; 11 | font-size: 20px; 12 | 13 | @media (min-width: $small) { 14 | margin-bottom: 1rem; 15 | } 16 | } 17 | 18 | .site-header { 19 | position: relative; 20 | background-color: #def7ff; 21 | } 22 | 23 | .site-header__wrapper { 24 | padding-top: 1rem; 25 | padding-bottom: 1rem; 26 | 27 | @media (min-width: $small) { 28 | text-align: center; 29 | } 30 | } 31 | 32 | .nav__wrapper { 33 | @media (min-width: $small) { 34 | display: inline-flex; 35 | } 36 | 37 | @media (max-width: $small - 1) { 38 | position: absolute; 39 | top: 100%; 40 | right: 0; 41 | left: 0; 42 | z-index: -1; 43 | background-color: #d9f0f7; 44 | visibility: hidden; 45 | opacity: 0; 46 | transform: translateY(-100%); 47 | transition: transform 0.3s ease-out, opacity 0.3s ease-out; 48 | 49 | &.active { 50 | visibility: visible; 51 | opacity: 1; 52 | transform: translateY(0); 53 | } 54 | } 55 | } 56 | 57 | .nav__item { 58 | a { 59 | display: block; 60 | padding: 1rem; 61 | } 62 | } 63 | 64 | .nav__toggle { 65 | display: none; 66 | 67 | @media (max-width: $small - 1) { 68 | display: block; 69 | position: absolute; 70 | right: 1rem; 71 | top: 1rem; 72 | } 73 | } 74 | -------------------------------------------------------------------------------- /styles/headers/header-16.scss: -------------------------------------------------------------------------------- 1 | /* 2 | ** The Header Media Queries ** 3 | ** Tweak as per your needs ** 4 | */ 5 | 6 | $small: 600px; 7 | 8 | .brand { 9 | font-weight: bold; 10 | font-size: 20px; 11 | } 12 | 13 | .site-header { 14 | position: relative; 15 | background-color: #def7ff; 16 | } 17 | 18 | .site-header__wrapper { 19 | padding-top: 1rem; 20 | padding-bottom: 1rem; 21 | 22 | @media (min-width: $small) { 23 | display: flex; 24 | justify-content: space-between; 25 | align-items: center; 26 | padding-top: 0; 27 | padding-bottom: 0; 28 | } 29 | } 30 | 31 | .nav__wrapper { 32 | @media (min-width: $small) { 33 | display: flex; 34 | } 35 | 36 | @media (max-width: $small - 1) { 37 | position: absolute; 38 | top: 100%; 39 | right: 0; 40 | left: 0; 41 | z-index: -1; 42 | background-color: #d9f0f7; 43 | visibility: hidden; 44 | opacity: 0; 45 | transform: translateY(-100%); 46 | transition: transform 0.3s ease-out, opacity 0.3s ease-out; 47 | 48 | &.active { 49 | visibility: visible; 50 | opacity: 1; 51 | transform: translateY(0); 52 | } 53 | } 54 | } 55 | 56 | .nav__item { 57 | &:first-child { 58 | @media (min-width: $small) { 59 | a { 60 | border-left: 1px solid #b5b5b5; 61 | } 62 | } 63 | } 64 | 65 | a { 66 | display: block; 67 | padding: 1.5rem 1rem; 68 | 69 | @media (min-width: $small) { 70 | border-right: 1px solid #b5b5b5; 71 | } 72 | } 73 | } 74 | 75 | .nav__toggle { 76 | display: none; 77 | 78 | @media (max-width: $small - 1) { 79 | display: block; 80 | position: absolute; 81 | right: 1rem; 82 | top: 1rem; 83 | } 84 | } 85 | -------------------------------------------------------------------------------- /styles/headers/header-17.scss: -------------------------------------------------------------------------------- 1 | /* 2 | ** The Header Media Queries ** 3 | ** Tweak as per your needs ** 4 | */ 5 | 6 | $small: 865px; 7 | 8 | .brand { 9 | font-weight: bold; 10 | font-size: 20px; 11 | } 12 | 13 | .site-header { 14 | position: relative; 15 | background-color: #def7ff; 16 | } 17 | 18 | .site-header__start { 19 | display: flex; 20 | align-items: center; 21 | } 22 | 23 | .site-header__end { 24 | display: flex; 25 | align-items: center; 26 | } 27 | 28 | .site-header__wrapper { 29 | display: flex; 30 | justify-content: space-between; 31 | align-items: center; 32 | padding-top: 1rem; 33 | padding-bottom: 1rem; 34 | 35 | @media (min-width: $small) { 36 | padding-top: 0; 37 | padding-bottom: 0; 38 | } 39 | } 40 | 41 | .nav__wrapper { 42 | @media (min-width: $small) { 43 | display: flex; 44 | } 45 | 46 | @media (max-width: $small - 1) { 47 | position: absolute; 48 | top: calc(100% + 35px); 49 | right: 0; 50 | left: 0; 51 | z-index: -1; 52 | background-color: #d9f0f7; 53 | visibility: hidden; 54 | opacity: 0; 55 | transform: translateY(-100%); 56 | transition: transform 0.3s ease-out, opacity 0.3s ease-out; 57 | 58 | &.active { 59 | visibility: visible; 60 | opacity: 1; 61 | transform: translateY(0); 62 | } 63 | } 64 | } 65 | 66 | .nav__item { 67 | &:first-child { 68 | @media (min-width: $small) { 69 | a { 70 | border-left: 1px solid #8a8383; 71 | } 72 | } 73 | } 74 | 75 | &:not(:last-child) { 76 | margin-right: 0.5rem; 77 | } 78 | 79 | a { 80 | display: block; 81 | padding: 1rem; 82 | border-left: 4px solid transparent; 83 | 84 | @media (min-width: $small) { 85 | border-right: 1px solid #8a8383; 86 | text-align: center; 87 | box-shadow: inset 0 -4px 0 0 transparent; 88 | } 89 | } 90 | 91 | svg { 92 | display: inline-block; 93 | vertical-align: middle; 94 | width: 28px; 95 | height: 28px; 96 | margin-right: 1rem; 97 | 98 | @media (min-width: $small) { 99 | display: block; 100 | margin: 0 auto 0.5rem; 101 | } 102 | } 103 | 104 | &.active { 105 | a { 106 | @media (min-width: $small) { 107 | box-shadow: inset 0 -4px 0 0 #222; 108 | } 109 | } 110 | } 111 | } 112 | 113 | .nav__toggle { 114 | display: none; 115 | 116 | @media (max-width: $small - 1) { 117 | display: block; 118 | position: absolute; 119 | right: 1rem; 120 | top: 1rem; 121 | } 122 | } 123 | 124 | .search { 125 | display: flex; 126 | margin-left: 1rem; 127 | } 128 | 129 | .search__toggle { 130 | appearance: none; 131 | order: 1; 132 | font-size: 0; 133 | width: 34px; 134 | height: 34px; 135 | background: url("../img/header-3/search.svg") center right/22px no-repeat; 136 | border: 0; 137 | display: none; 138 | 139 | @media (min-width: $small) { 140 | border-left: 1px solid #979797; 141 | padding-left: 10px; 142 | } 143 | 144 | @media (max-width: $small - 1) { 145 | position: absolute; 146 | right: 5.5rem; 147 | top: 0.65rem; 148 | background: url("../img/header-3/search.svg") center/22px no-repeat; 149 | } 150 | } 151 | 152 | .search__form { 153 | //display: none; 154 | display: block; 155 | 156 | &.active { 157 | display: block; 158 | } 159 | 160 | @media (max-width: $small - 1) { 161 | position: absolute; 162 | left: 0; 163 | right: 0; 164 | top: 100%; 165 | //display: none; 166 | 167 | input { 168 | width: 100%; 169 | } 170 | } 171 | 172 | input { 173 | min-width: 200px; 174 | appearance: none; 175 | border: 0; 176 | background-color: #fff; 177 | border-radius: 0; 178 | font-size: 16px; 179 | padding: 0.5rem; 180 | 181 | @media (max-width: $small - 1) { 182 | border-bottom: 1px solid #979797; 183 | } 184 | } 185 | } 186 | 187 | .inactive-item { 188 | opacity: 0; 189 | } 190 | -------------------------------------------------------------------------------- /styles/headers/header-2.scss: -------------------------------------------------------------------------------- 1 | /* 2 | ** The Header Media Queries ** 3 | ** Tweak as per your needs ** 4 | */ 5 | 6 | $small: 600px; 7 | 8 | .brand { 9 | font-weight: bold; 10 | font-size: 20px; 11 | } 12 | 13 | .site-header { 14 | position: relative; 15 | background-color: #def7ff; 16 | } 17 | 18 | .site-header__wrapper { 19 | padding-top: 1rem; 20 | padding-bottom: 1rem; 21 | 22 | @media (min-width: $small) { 23 | display: flex; 24 | align-items: center; 25 | padding-top: 0; 26 | padding-bottom: 0; 27 | } 28 | } 29 | 30 | .nav { 31 | flex: 1; 32 | } 33 | 34 | .nav__wrapper { 35 | @media (min-width: $small) { 36 | display: flex; 37 | } 38 | 39 | @media (max-width: $small - 1) { 40 | position: absolute; 41 | top: 100%; 42 | right: 0; 43 | left: 0; 44 | z-index: -1; 45 | background-color: #d9f0f7; 46 | visibility: hidden; 47 | opacity: 0; 48 | transform: translateY(-100%); 49 | transition: transform 0.3s ease-out, opacity 0.3s ease-out; 50 | 51 | &.active { 52 | visibility: visible; 53 | opacity: 1; 54 | transform: translateY(0); 55 | } 56 | } 57 | } 58 | 59 | .nav__item { 60 | a { 61 | display: block; 62 | padding: 1.5rem 1rem; 63 | } 64 | } 65 | 66 | .nav__item--end { 67 | @media (min-width: $small) { 68 | margin-left: auto; 69 | } 70 | } 71 | 72 | .nav__toggle { 73 | display: none; 74 | 75 | @media (max-width: $small - 1) { 76 | display: block; 77 | position: absolute; 78 | right: 1rem; 79 | top: 1rem; 80 | } 81 | } 82 | -------------------------------------------------------------------------------- /styles/headers/header-3.scss: -------------------------------------------------------------------------------- 1 | /* 2 | ** The Header Media Queries ** 3 | ** Tweak as per your needs ** 4 | */ 5 | 6 | $small: 800px; 7 | 8 | .brand { 9 | font-weight: bold; 10 | font-size: 20px; 11 | } 12 | 13 | .site-header { 14 | position: relative; 15 | background-color: #def7ff; 16 | } 17 | 18 | .site-header__end { 19 | display: flex; 20 | align-items: center; 21 | } 22 | 23 | .site-header__wrapper { 24 | display: flex; 25 | justify-content: space-between; 26 | align-items: center; 27 | padding-top: 1rem; 28 | padding-bottom: 1rem; 29 | 30 | @media (min-width: $small) { 31 | padding-top: 0; 32 | padding-bottom: 0; 33 | } 34 | } 35 | 36 | .nav__wrapper { 37 | @media (min-width: $small) { 38 | display: flex; 39 | } 40 | 41 | @media (max-width: $small - 1) { 42 | position: absolute; 43 | top: 100%; 44 | right: 0; 45 | left: 0; 46 | z-index: -1; 47 | background-color: #d9f0f7; 48 | visibility: hidden; 49 | opacity: 0; 50 | transform: translateY(-100%); 51 | transition: transform 0.3s ease-out, opacity 0.3s ease-out; 52 | 53 | &.active { 54 | visibility: visible; 55 | opacity: 1; 56 | transform: translateY(0); 57 | } 58 | } 59 | } 60 | 61 | .nav__item { 62 | a { 63 | display: block; 64 | padding: 1.5rem 1rem; 65 | } 66 | } 67 | 68 | .nav__toggle { 69 | display: none; 70 | 71 | @media (max-width: $small - 1) { 72 | display: block; 73 | position: absolute; 74 | right: 1rem; 75 | top: 1rem; 76 | } 77 | } 78 | 79 | .search { 80 | display: flex; 81 | } 82 | 83 | .search__toggle { 84 | appearance: none; 85 | order: 1; 86 | font-size: 0; 87 | width: 34px; 88 | height: 34px; 89 | background: url("../img/header-3/search.svg") center right/22px no-repeat; 90 | border: 0; 91 | 92 | @media (min-width: $small) { 93 | border-left: 1px solid #979797; 94 | padding-left: 10px; 95 | } 96 | 97 | @media (max-width: $small - 1) { 98 | position: absolute; 99 | right: 5.5rem; 100 | top: 0.65rem; 101 | background: url("../img/header-3/search.svg") center/22px no-repeat; 102 | } 103 | } 104 | 105 | .search__form { 106 | display: none; 107 | 108 | &.active { 109 | display: block; 110 | } 111 | 112 | @media (max-width: $small - 1) { 113 | position: absolute; 114 | left: 0; 115 | right: 0; 116 | top: 100%; 117 | background-color: red; 118 | 119 | input { 120 | width: 100%; 121 | } 122 | } 123 | 124 | input { 125 | min-width: 200px; 126 | appearance: none; 127 | border: 0; 128 | background-color: #fff; 129 | border-radius: 0; 130 | font-size: 16px; 131 | padding: 0.5rem; 132 | 133 | @media (max-width: $small - 1) { 134 | border-bottom: 1px solid #979797; 135 | } 136 | } 137 | } 138 | -------------------------------------------------------------------------------- /styles/headers/header-4.scss: -------------------------------------------------------------------------------- 1 | /* 2 | ** The Header Media Queries ** 3 | ** Tweak as per your needs ** 4 | */ 5 | 6 | $small: 800px; 7 | 8 | .brand { 9 | font-weight: bold; 10 | font-size: 20px; 11 | } 12 | 13 | .site-header { 14 | position: relative; 15 | background-color: #def7ff; 16 | } 17 | 18 | .site-header__start { 19 | display: flex; 20 | align-items: center; 21 | } 22 | 23 | .site-header__end { 24 | display: flex; 25 | align-items: center; 26 | } 27 | 28 | .site-header__wrapper { 29 | display: flex; 30 | justify-content: space-between; 31 | align-items: center; 32 | padding-top: 1rem; 33 | padding-bottom: 1rem; 34 | 35 | @media (min-width: $small) { 36 | padding-top: 0; 37 | padding-bottom: 0; 38 | } 39 | } 40 | 41 | .nav__wrapper { 42 | @media (min-width: $small) { 43 | display: flex; 44 | } 45 | 46 | @media (max-width: $small - 1) { 47 | position: absolute; 48 | top: calc(100% + 35px); 49 | right: 0; 50 | left: 0; 51 | z-index: -1; 52 | background-color: #d9f0f7; 53 | visibility: hidden; 54 | opacity: 0; 55 | transform: translateY(-100%); 56 | transition: transform 0.3s ease-out, opacity 0.3s ease-out; 57 | 58 | &.active { 59 | visibility: visible; 60 | opacity: 1; 61 | transform: translateY(0); 62 | } 63 | } 64 | } 65 | 66 | .nav__item { 67 | &:not(:last-child) { 68 | margin-right: 0.5rem; 69 | } 70 | 71 | a { 72 | display: block; 73 | padding: 1rem; 74 | border-left: 4px solid transparent; 75 | 76 | @media (min-width: $small) { 77 | text-align: center; 78 | border-left: 0; 79 | border-bottom: 4px solid transparent; 80 | } 81 | } 82 | 83 | svg { 84 | display: inline-block; 85 | vertical-align: middle; 86 | width: 28px; 87 | height: 28px; 88 | margin-right: 1rem; 89 | 90 | @media (min-width: $small) { 91 | display: block; 92 | margin: 0 auto 0.5rem; 93 | } 94 | } 95 | 96 | &.active { 97 | a { 98 | border-left-color: #222; 99 | 100 | @media (min-width: $small) { 101 | border-bottom-color: #222; 102 | } 103 | } 104 | } 105 | } 106 | 107 | .nav__toggle { 108 | display: none; 109 | 110 | @media (max-width: $small - 1) { 111 | display: block; 112 | position: absolute; 113 | right: 1rem; 114 | top: 1rem; 115 | } 116 | } 117 | 118 | .search { 119 | display: flex; 120 | margin-left: 1rem; 121 | } 122 | 123 | .search__toggle { 124 | appearance: none; 125 | order: 1; 126 | font-size: 0; 127 | width: 34px; 128 | height: 34px; 129 | background: url("../img/header-3/search.svg") center right/22px no-repeat; 130 | border: 0; 131 | display: none; 132 | 133 | @media (min-width: $small) { 134 | border-left: 1px solid #979797; 135 | padding-left: 10px; 136 | } 137 | 138 | @media (max-width: $small - 1) { 139 | position: absolute; 140 | right: 5.5rem; 141 | top: 0.65rem; 142 | background: url("../img/header-3/search.svg") center/22px no-repeat; 143 | } 144 | } 145 | 146 | .search__form { 147 | //display: none; 148 | display: block; 149 | 150 | &.active { 151 | display: block; 152 | } 153 | 154 | @media (max-width: $small - 1) { 155 | position: absolute; 156 | left: 0; 157 | right: 0; 158 | top: 100%; 159 | //display: none; 160 | 161 | input { 162 | width: 100%; 163 | } 164 | } 165 | 166 | input { 167 | min-width: 200px; 168 | appearance: none; 169 | border: 0; 170 | background-color: #fff; 171 | border-radius: 0; 172 | font-size: 16px; 173 | padding: 0.5rem; 174 | 175 | @media (max-width: $small - 1) { 176 | border-bottom: 1px solid #979797; 177 | } 178 | } 179 | } 180 | 181 | .inactive-item { 182 | opacity: 0; 183 | } 184 | -------------------------------------------------------------------------------- /styles/headers/header-5.scss: -------------------------------------------------------------------------------- 1 | /* 2 | ** The Header Media Queries ** 3 | ** Tweak as per your needs ** 4 | */ 5 | 6 | $small: 940px; 7 | $medium: 1240px; 8 | 9 | .brand { 10 | font-weight: bold; 11 | font-size: 20px; 12 | } 13 | 14 | .site-header { 15 | position: relative; 16 | background-color: #def7ff; 17 | } 18 | 19 | .site-header__middle { 20 | flex: 1; 21 | } 22 | 23 | .site-header__wrapper { 24 | display: flex; 25 | justify-content: space-between; 26 | align-items: center; 27 | padding: 1rem; 28 | 29 | @media (min-width: $small) { 30 | padding-top: 0; 31 | padding-bottom: 0; 32 | } 33 | } 34 | 35 | .nav { 36 | margin-left: 1rem; 37 | margin-right: 1rem; 38 | } 39 | 40 | .nav__wrapper { 41 | //display: none; 42 | 43 | @media (min-width: $small) { 44 | display: flex; 45 | justify-content: center; 46 | } 47 | 48 | @media (max-width: $small - 1) { 49 | position: absolute; 50 | top: 100%; 51 | right: 0; 52 | left: 0; 53 | z-index: -1; 54 | background-color: #d9f0f7; 55 | visibility: hidden; 56 | opacity: 0; 57 | transform: translateY(-100%); 58 | transition: transform 0.3s ease-out, opacity 0.3s ease-out; 59 | 60 | &.active { 61 | visibility: visible; 62 | opacity: 1; 63 | transform: translateY(0); 64 | } 65 | } 66 | } 67 | 68 | .nav__item { 69 | @media (min-width: $small) { 70 | &:last-child { 71 | a { 72 | border-right: 1px solid #222; 73 | } 74 | } 75 | } 76 | 77 | @media (min-width: 1100px) { 78 | min-width: 140px; 79 | flex: 1; 80 | } 81 | 82 | a { 83 | display: block; 84 | padding: 1rem 1.25rem; 85 | border-left: 4px solid transparent; 86 | 87 | @media (min-width: $small) { 88 | text-align: center; 89 | border-left: 1px solid #222; 90 | border-bottom: 4px solid transparent; 91 | } 92 | } 93 | 94 | svg { 95 | display: inline-block; 96 | vertical-align: middle; 97 | width: 22px; 98 | height: 22px; 99 | margin-right: 1rem; 100 | 101 | @media (min-width: $small) { 102 | display: block; 103 | margin: 0 auto 0.5rem; 104 | } 105 | } 106 | 107 | &.active { 108 | a { 109 | border-left-color: #222; 110 | 111 | @media (min-width: $small) { 112 | border-bottom-color: #222; 113 | } 114 | } 115 | } 116 | } 117 | 118 | .nav__toggle { 119 | position: absolute; 120 | right: 1rem; 121 | top: 1rem; 122 | 123 | @media (min-width: $small) { 124 | display: none; 125 | } 126 | } 127 | 128 | .search { 129 | display: flex; 130 | //flex: 1; 131 | } 132 | 133 | .search__toggle { 134 | appearance: none; 135 | order: 1; 136 | font-size: 0; 137 | width: 34px; 138 | height: 34px; 139 | background: url("../img/header-3/search.svg") center right/22px no-repeat; 140 | border: 0; 141 | display: none; 142 | 143 | @media (max-width: $medium - 1) { 144 | display: block; 145 | } 146 | 147 | @media (max-width: $small - 1) { 148 | position: absolute; 149 | right: 5.5rem; 150 | top: 0.65rem; 151 | background: url("../img/header-3/search.svg") center/22px no-repeat; 152 | display: block; 153 | } 154 | 155 | &.active { 156 | background: url("../img/header-5/close.svg") center/22px no-repeat; 157 | } 158 | } 159 | 160 | .search__form { 161 | flex: 1; 162 | display: none; 163 | 164 | @media (min-width: $medium) { 165 | display: block; 166 | 167 | input { 168 | min-width: 220px; 169 | } 170 | } 171 | 172 | @media (max-width: $medium - 1) { 173 | position: absolute; 174 | left: 0; 175 | right: 0; 176 | top: 100%; 177 | 178 | &.active { 179 | display: block; 180 | } 181 | 182 | input { 183 | outline: solid 1px; 184 | } 185 | } 186 | 187 | input { 188 | appearance: none; 189 | width: 100%; 190 | border: 0; 191 | background-color: #fff; 192 | border-radius: 0; 193 | font-size: 16px; 194 | padding: 0.5rem; 195 | 196 | @media (max-width: $small - 1) { 197 | border-bottom: 1px solid #979797; 198 | } 199 | } 200 | } 201 | 202 | .inactive-item { 203 | opacity: 0; 204 | } 205 | -------------------------------------------------------------------------------- /styles/headers/header-6.scss: -------------------------------------------------------------------------------- 1 | /* 2 | ** The Header Media Queries ** 3 | ** Tweak as per your needs ** 4 | */ 5 | 6 | $small: 600px; 7 | 8 | .brand { 9 | font-weight: bold; 10 | font-size: 20px; 11 | } 12 | 13 | .site-header { 14 | position: relative; 15 | background-color: #def7ff; 16 | } 17 | 18 | .site-header__top { 19 | background-color: #def7ff; 20 | } 21 | 22 | .site-header__bottom { 23 | background-color: #c7f2ff; 24 | } 25 | 26 | .site-header__wrapper { 27 | padding-top: 1rem; 28 | padding-bottom: 1rem; 29 | 30 | &.bottom { 31 | display: flex; 32 | justify-content: space-between; 33 | align-items: center; 34 | } 35 | 36 | @media (min-width: $small) { 37 | &.top { 38 | display: flex; 39 | justify-content: space-between; 40 | align-items: center; 41 | padding-top: 0; 42 | padding-bottom: 0; 43 | } 44 | } 45 | } 46 | 47 | .nav__wrapper { 48 | @media (min-width: $small) { 49 | display: flex; 50 | } 51 | 52 | @media (max-width: $small - 1) { 53 | position: absolute; 54 | top: 100%; 55 | right: 0; 56 | left: 0; 57 | z-index: -1; 58 | background-color: #d9f0f7; 59 | visibility: hidden; 60 | opacity: 0; 61 | transform: translateY(-100%); 62 | transition: transform 0.3s ease-out, opacity 0.3s ease-out; 63 | 64 | &.active { 65 | visibility: visible; 66 | opacity: 1; 67 | transform: translateY(0); 68 | } 69 | } 70 | } 71 | 72 | .nav__item { 73 | @media (min-width: $small) { 74 | &:not(:last-child) { 75 | margin-right: 2rem; 76 | } 77 | } 78 | 79 | @media (max-width: $small - 1px) { 80 | a { 81 | padding-left: 1rem; 82 | padding-right: 1rem; 83 | } 84 | } 85 | 86 | a { 87 | display: block; 88 | padding-top: 1.5rem; 89 | padding-bottom: 1.5rem; 90 | } 91 | } 92 | 93 | .nav__toggle { 94 | display: none; 95 | 96 | @media (max-width: $small - 1) { 97 | display: block; 98 | position: absolute; 99 | right: 1rem; 100 | top: 1rem; 101 | } 102 | } 103 | -------------------------------------------------------------------------------- /styles/headers/header-7.scss: -------------------------------------------------------------------------------- 1 | /* 2 | ** The Header Media Queries ** 3 | ** Tweak as per your needs ** 4 | */ 5 | 6 | $small: 660px; 7 | 8 | .brand { 9 | font-weight: bold; 10 | font-size: 20px; 11 | } 12 | 13 | .site-header { 14 | position: relative; 15 | background-color: #def7ff; 16 | } 17 | 18 | .site-header__wrapper { 19 | display: flex; 20 | justify-content: space-between; 21 | align-items: center; 22 | padding-top: 1rem; 23 | padding-bottom: 1rem; 24 | 25 | @media (min-width: $small) { 26 | padding-top: 0; 27 | padding-bottom: 0; 28 | } 29 | } 30 | 31 | .site-header__end { 32 | @media (max-width: $small - 1) { 33 | padding-right: 4rem; 34 | } 35 | } 36 | 37 | .nav__wrapper { 38 | @media (min-width: $small) { 39 | display: flex; 40 | } 41 | 42 | @media (max-width: $small - 1) { 43 | position: absolute; 44 | top: 100%; 45 | right: 0; 46 | left: 0; 47 | z-index: -1; 48 | background-color: #d9f0f7; 49 | visibility: hidden; 50 | opacity: 0; 51 | transform: translateY(-100%); 52 | transition: transform 0.3s ease-out, opacity 0.3s ease-out; 53 | 54 | &.active { 55 | visibility: visible; 56 | opacity: 1; 57 | transform: translateY(0); 58 | } 59 | } 60 | } 61 | 62 | .nav__item { 63 | a { 64 | display: block; 65 | padding: 1.5rem 1rem; 66 | } 67 | } 68 | 69 | .nav__toggle { 70 | display: none; 71 | 72 | @media (max-width: $small - 1) { 73 | display: block; 74 | position: absolute; 75 | right: 1rem; 76 | top: 1rem; 77 | } 78 | } 79 | -------------------------------------------------------------------------------- /styles/headers/header-8.scss: -------------------------------------------------------------------------------- 1 | /* 2 | ** The Header Media Queries ** 3 | ** Tweak as per your needs ** 4 | */ 5 | 6 | $small: 660px; 7 | 8 | .brand { 9 | font-weight: bold; 10 | font-size: 20px; 11 | } 12 | 13 | .site-header { 14 | position: relative; 15 | background-color: #def7ff; 16 | } 17 | 18 | .site-header__wrapper { 19 | display: flex; 20 | justify-content: space-between; 21 | align-items: center; 22 | padding-top: 1rem; 23 | padding-bottom: 1rem; 24 | 25 | @media (min-width: $small) { 26 | padding-top: 0; 27 | padding-bottom: 0; 28 | 29 | > * { 30 | flex: 1; 31 | } 32 | } 33 | } 34 | 35 | .site-header__start { 36 | @media (min-width: $small) { 37 | text-align: center; 38 | } 39 | } 40 | 41 | .site-header__middle { 42 | @media (min-width: $small) { 43 | order: -1; 44 | } 45 | } 46 | 47 | .site-header__end { 48 | @media (min-width: $small) { 49 | display: flex; 50 | justify-content: flex-end; 51 | /* Better for LTR/RTL support */ 52 | } 53 | 54 | @media (max-width: $small - 1) { 55 | padding-right: 4rem; 56 | } 57 | } 58 | 59 | .nav__wrapper { 60 | @media (min-width: $small) { 61 | display: flex; 62 | } 63 | 64 | @media (max-width: $small - 1) { 65 | position: absolute; 66 | top: 100%; 67 | right: 0; 68 | left: 0; 69 | z-index: -1; 70 | background-color: #d9f0f7; 71 | visibility: hidden; 72 | opacity: 0; 73 | transform: translateY(-100%); 74 | transition: transform 0.3s ease-out, opacity 0.3s ease-out; 75 | 76 | &.active { 77 | visibility: visible; 78 | opacity: 1; 79 | transform: translateY(0); 80 | } 81 | } 82 | } 83 | 84 | .nav__item { 85 | &:not(:last-child) { 86 | margin-right: 1.5rem; 87 | } 88 | 89 | a { 90 | display: block; 91 | padding: 1.5rem 1rem; 92 | 93 | @media (min-width: $small) { 94 | padding-left: 0; 95 | padding-right: 0; 96 | } 97 | } 98 | } 99 | 100 | .nav__toggle { 101 | display: none; 102 | 103 | @media (max-width: $small - 1) { 104 | display: block; 105 | position: absolute; 106 | right: 1rem; 107 | top: 1rem; 108 | } 109 | } 110 | -------------------------------------------------------------------------------- /styles/headers/header-9.scss: -------------------------------------------------------------------------------- 1 | /* 2 | ** The Header Media Queries ** 3 | ** Tweak as per your needs ** 4 | */ 5 | 6 | $small: 630px; 7 | 8 | .brand { 9 | font-weight: bold; 10 | font-size: 20px; 11 | } 12 | 13 | .site-header { 14 | position: relative; 15 | background-color: #def7ff; 16 | } 17 | 18 | .site-header__wrapper { 19 | display: flex; 20 | align-items: center; 21 | justify-content: space-between; 22 | padding-top: 1rem; 23 | padding-bottom: 1rem; 24 | 25 | @media (min-width: $small) { 26 | justify-content: initial; 27 | } 28 | } 29 | 30 | .site-header__middle { 31 | @media (min-width: $small) { 32 | margin-left: auto; 33 | } 34 | } 35 | 36 | .site-header__end { 37 | @media (max-width: $small - 1) { 38 | padding-right: 4rem; 39 | } 40 | } 41 | 42 | .nav__wrapper { 43 | @media (min-width: $small) { 44 | display: flex; 45 | } 46 | 47 | @media (max-width: $small - 1) { 48 | position: absolute; 49 | top: 100%; 50 | right: 0; 51 | left: 0; 52 | z-index: -1; 53 | background-color: #d9f0f7; 54 | visibility: hidden; 55 | opacity: 0; 56 | transform: translateY(-100%); 57 | transition: transform 0.3s ease-out, opacity 0.3s ease-out; 58 | 59 | &.active { 60 | visibility: visible; 61 | opacity: 1; 62 | transform: translateY(0); 63 | } 64 | } 65 | } 66 | 67 | .nav__item { 68 | a { 69 | display: block; 70 | padding: 1rem; 71 | } 72 | } 73 | 74 | .nav__toggle { 75 | display: none; 76 | 77 | @media (max-width: $small - 1) { 78 | display: block; 79 | position: absolute; 80 | right: 1rem; 81 | top: 1rem; 82 | } 83 | } 84 | -------------------------------------------------------------------------------- /styles/home.css: -------------------------------------------------------------------------------- 1 | @import url("https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap"); 2 | .wrapper { 3 | max-width: 680px; 4 | padding-left: 1rem; 5 | padding-right: 1rem; 6 | margin-left: auto; 7 | margin-right: auto; } 8 | 9 | body { 10 | font-family: "Roboto"; 11 | line-height: 1.4; } 12 | 13 | strong { 14 | font-weight: bold; } 15 | 16 | img { 17 | max-width: 100%; } 18 | 19 | h2 { 20 | font-weight: bold; 21 | font-size: 1.5rem; } 22 | 23 | header { 24 | text-align: center; 25 | color: #fff; 26 | background: #3863d9 url("../img/cover.png") center/cover no-repeat; 27 | padding: 2rem 1rem; } 28 | header h1 { 29 | font-size: 2rem; 30 | font-weight: bold; } 31 | header > * + * { 32 | margin-top: 0.7rem; } 33 | header img { 34 | width: 50px; } 35 | @media (min-width: 720px) { 36 | header { 37 | padding: 5rem 1rem; } } 38 | section { 39 | padding: 2rem 1rem; } 40 | 41 | .links-wrapper { 42 | display: flex; 43 | flex-direction: column; 44 | flex-wrap: wrap; 45 | justify-content: center; } 46 | @media (min-width: 720px) { 47 | .links-wrapper { 48 | flex-direction: row; } } 49 | .link { 50 | display: inline-block; 51 | padding: 0.5rem 1rem; 52 | font-size: 1rem; 53 | background-color: #fff; 54 | color: #222; 55 | border: 1px solid transparent; 56 | border-radius: 100px; 57 | transition: background 0.3s ease-out, color 0.3s ease-out, border 0.3s ease-out; } 58 | .link:first-child { 59 | margin-bottom: 1rem; } 60 | @media (min-width: 720px) { 61 | .link:first-child { 62 | margin-right: 1rem; 63 | margin-bottom: 0; } } 64 | .link:hover { 65 | color: #fff; 66 | background-color: #101a33; } 67 | .link:hover svg { 68 | fill: #fff; } 69 | .link svg { 70 | display: inline-block; 71 | vertical-align: middle; 72 | width: 20px; 73 | height: 20px; 74 | margin-right: 0.5rem; } 75 | 76 | .link--secondary { 77 | color: #fff; 78 | background-color: transparent; 79 | border-color: #fff; } 80 | .link--secondary svg { 81 | fill: #fff; } 82 | .link--secondary:hover { 83 | border-color: #101a33; } 84 | 85 | .content > * + * { 86 | margin-top: 1rem; } 87 | 88 | .demo { 89 | display: flex; 90 | flex-wrap: wrap; } 91 | .demo li { 92 | margin-right: 0.7rem; 93 | margin-bottom: 0.7rem; } 94 | .demo a { 95 | display: inline-block; 96 | background: #def7ff; 97 | padding: 0.5rem 0.75rem; 98 | font-size: 14px; 99 | border-radius: 7px; 100 | transition: background 0.3s ease-out, color 0.3s ease-out; } 101 | .demo a:hover { 102 | color: #fff; 103 | background-color: #101a33; } 104 | 105 | footer { 106 | padding: 2rem 1rem; 107 | color: #fff; 108 | background-color: #3863d9; } 109 | footer h2 { 110 | margin-bottom: 1rem; } 111 | footer img { 112 | width: 70px; 113 | height: 70px; 114 | object-fit: cover; 115 | border-radius: 50%; } 116 | footer a { 117 | color: #fff; 118 | text-decoration: underline; } 119 | footer p + p { 120 | margin-top: 0.5rem; } 121 | 122 | .author { 123 | display: flex; 124 | flex-wrap: wrap; 125 | gap: 1rem; 126 | margin-bottom: 1.5rem; } 127 | 128 | .author-avatar { 129 | width: 70px; 130 | height: 70px; 131 | flex: 0 0 70px; 132 | object-fit: cover; 133 | border: 2px solid #fff; } 134 | 135 | .author-meta { 136 | flex: 1; } 137 | 138 | .author-name { 139 | font-weight: bold; 140 | font-size: 1.25rem; } 141 | -------------------------------------------------------------------------------- /styles/home.scss: -------------------------------------------------------------------------------- 1 | @import url("https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap"); 2 | 3 | $color-primary: #3863d9; 4 | 5 | .wrapper { 6 | max-width: 680px; 7 | padding-left: 1rem; 8 | padding-right: 1rem; 9 | margin-left: auto; 10 | margin-right: auto; 11 | } 12 | 13 | body { 14 | font-family: "Roboto"; 15 | line-height: 1.4; 16 | } 17 | 18 | strong { 19 | font-weight: bold; 20 | } 21 | 22 | img { 23 | max-width: 100%; 24 | } 25 | 26 | h2 { 27 | font-weight: bold; 28 | font-size: 1.5rem; 29 | } 30 | 31 | header { 32 | text-align: center; 33 | color: #fff; 34 | background: $color-primary url("../img/cover.png") center/cover no-repeat; 35 | padding: 2rem 1rem; 36 | 37 | h1 { 38 | font-size: 2rem; 39 | font-weight: bold; 40 | } 41 | 42 | > * + * { 43 | margin-top: 0.7rem; 44 | } 45 | 46 | img { 47 | width: 50px; 48 | } 49 | 50 | @media (min-width: 720px) { 51 | padding: 5rem 1rem; 52 | } 53 | } 54 | 55 | section { 56 | padding: 2rem 1rem; 57 | } 58 | 59 | .links-wrapper { 60 | display: flex; 61 | flex-direction: column; 62 | flex-wrap: wrap; 63 | justify-content: center; 64 | 65 | @media (min-width: 720px) { 66 | flex-direction: row; 67 | } 68 | } 69 | 70 | .link { 71 | display: inline-block; 72 | padding: 0.5rem 1rem; 73 | font-size: 1rem; 74 | background-color: #fff; 75 | color: #222; 76 | border: 1px solid transparent; 77 | border-radius: 100px; 78 | transition: background 0.3s ease-out, color 0.3s ease-out, 79 | border 0.3s ease-out; 80 | 81 | &:first-child { 82 | margin-bottom: 1rem; 83 | 84 | @media (min-width: 720px) { 85 | margin-right: 1rem; 86 | margin-bottom: 0; 87 | } 88 | } 89 | 90 | &:hover { 91 | color: #fff; 92 | background-color: #101a33; 93 | 94 | svg { 95 | fill: #fff; 96 | } 97 | } 98 | 99 | svg { 100 | display: inline-block; 101 | vertical-align: middle; 102 | width: 20px; 103 | height: 20px; 104 | margin-right: 0.5rem; 105 | } 106 | } 107 | 108 | .link--secondary { 109 | color: #fff; 110 | background-color: transparent; 111 | border-color: #fff; 112 | 113 | svg { 114 | fill: #fff; 115 | } 116 | 117 | &:hover { 118 | border-color: #101a33; 119 | } 120 | } 121 | 122 | .content { 123 | p { 124 | //font-size: 1.125rem; 125 | } 126 | 127 | > * + * { 128 | margin-top: 1rem; 129 | } 130 | } 131 | 132 | .demo { 133 | display: flex; 134 | flex-wrap: wrap; 135 | 136 | li { 137 | margin-right: 0.7rem; 138 | margin-bottom: 0.7rem; 139 | } 140 | 141 | a { 142 | display: inline-block; 143 | background: #def7ff; 144 | padding: 0.5rem 0.75rem; 145 | font-size: 14px; 146 | border-radius: 7px; 147 | transition: background 0.3s ease-out, color 0.3s ease-out; 148 | 149 | &:hover { 150 | color: #fff; 151 | background-color: #101a33; 152 | } 153 | } 154 | } 155 | 156 | footer { 157 | padding: 2rem 1rem; 158 | color: #fff; 159 | background-color: $color-primary; 160 | 161 | h2 { 162 | margin-bottom: 1rem; 163 | } 164 | 165 | img { 166 | width: 70px; 167 | height: 70px; 168 | object-fit: cover; 169 | border-radius: 50%; 170 | } 171 | 172 | a { 173 | color: #fff; 174 | text-decoration: underline; 175 | } 176 | 177 | p + p { 178 | margin-top: 0.5rem; 179 | } 180 | } 181 | 182 | .author { 183 | display: flex; 184 | flex-wrap: wrap; 185 | gap: 1rem; 186 | margin-bottom: 1.5rem; 187 | } 188 | 189 | .author-avatar { 190 | width: 70px; 191 | height: 70px; 192 | flex: 0 0 70px; 193 | object-fit: cover; 194 | border: 2px solid #fff; 195 | } 196 | 197 | .author-meta { 198 | flex: 1; 199 | } 200 | 201 | .author-name { 202 | font-weight: bold; 203 | font-size: 1.25rem; 204 | } 205 | -------------------------------------------------------------------------------- /styles/reset.min.css: -------------------------------------------------------------------------------- 1 | html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,b,u,i,center,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,embed,figure,figcaption,footer,header,hgroup,menu,nav,output,ruby,section,summary,time,mark,audio,video{margin:0;padding:0;border:0;font-size:100%;font:inherit;vertical-align:baseline}article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section{display:block}body{line-height:1}ol,ul{list-style:none}blockquote,q{quotes:none}blockquote:before,blockquote:after,q:before,q:after{content:'';content:none}table{border-collapse:collapse;border-spacing:0} -------------------------------------------------------------------------------- /styles/style.css: -------------------------------------------------------------------------------- 1 | @import url("https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap"); 2 | .wrapper { 3 | max-width: 1140px; 4 | padding-left: 1rem; 5 | padding-right: 1rem; 6 | margin-left: auto; 7 | margin-right: auto; 8 | } 9 | 10 | *, 11 | *:before, 12 | *:after { 13 | box-sizing: border-box; 14 | } 15 | 16 | a { 17 | text-decoration: none; 18 | color: #222; 19 | } 20 | 21 | html { 22 | -webkit-font-smoothing: antialiased; 23 | -moz-osx-font-smoothing: grayscale; 24 | } 25 | 26 | body { 27 | font-family: "Roboto", sans-serif; 28 | } 29 | 30 | .sr-only { 31 | position: absolute; 32 | clip: rect(1px, 1px, 1px, 1px); 33 | padding: 0; 34 | border: 0; 35 | height: 1px; 36 | width: 1px; 37 | overflow: hidden; 38 | } 39 | 40 | .button { 41 | -webkit-appearance: none; 42 | -moz-appearance: none; 43 | appearance: none; 44 | color: #fff; 45 | background-color: #2fa0f6; 46 | min-width: 120px; 47 | padding: 0.5rem 1rem; 48 | border-radius: 5px; 49 | text-align: center; 50 | } 51 | 52 | .button svg { 53 | display: inline-block; 54 | vertical-align: middle; 55 | width: 24px; 56 | height: 24px; 57 | fill: #fff; 58 | } 59 | 60 | .button span { 61 | display: none; 62 | } 63 | 64 | @media (min-width: 600px) { 65 | .button span { 66 | display: initial; 67 | } 68 | } 69 | 70 | .button--icon { 71 | min-width: initial; 72 | padding: 0.5rem; 73 | } 74 | -------------------------------------------------------------------------------- /styles/style.scss: -------------------------------------------------------------------------------- 1 | @import url("https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap"); 2 | 3 | .wrapper { 4 | max-width: 1140px; 5 | padding-left: 1rem; 6 | padding-right: 1rem; 7 | margin-left: auto; 8 | margin-right: auto; 9 | } 10 | 11 | *, 12 | *:before, 13 | *:after { 14 | box-sizing: border-box; 15 | } 16 | 17 | a { 18 | text-decoration: none; 19 | color: #222; 20 | } 21 | 22 | html { 23 | -webkit-font-smoothing: antialiased; 24 | -moz-osx-font-smoothing: grayscale; 25 | } 26 | 27 | body { 28 | font-family: "Roboto", sans-serif; 29 | } 30 | 31 | .sr-only { 32 | position: absolute; 33 | clip: rect(1px, 1px, 1px, 1px); 34 | padding: 0; 35 | border: 0; 36 | height: 1px; 37 | width: 1px; 38 | overflow: hidden; 39 | } 40 | 41 | .button { 42 | appearance: none; 43 | color: #fff; 44 | background-color: #2fa0f6; 45 | min-width: 120px; 46 | padding: 0.5rem 1rem; 47 | border-radius: 5px; 48 | text-align: center; 49 | 50 | svg { 51 | display: inline-block; 52 | vertical-align: middle; 53 | width: 24px; 54 | height: 24px; 55 | fill: #fff; 56 | } 57 | 58 | span { 59 | display: none; 60 | 61 | @media (min-width: 600px) { 62 | display: initial; 63 | } 64 | } 65 | } 66 | 67 | .button--icon { 68 | min-width: initial; 69 | padding: 0.5rem; 70 | } 71 | --------------------------------------------------------------------------------