Navigate back to the homepage

Custom Header With Hide on Scroll Down & Show on Scroll Up in Shopify - No app

Driss Oudmine
March 7th, 2021 · 1 min read

Have you ever wondered if it’s possible to customize the header of your Shopify store to something more robust and professional, the answer is big yes! That’s what we are going to see in this article tutorial. Also I encourage you to watch the whole video on YouTube, so you can use this custom header easily and If you are not using Minimal theme and you want this header on your Shopify store then DM me on Instagram so I can create it for you. So, let’s get started

  1. First thing, first! We need to create a new three navigation, so we can use them in our new custom header. One for mobile navigation and second for the left side of logo and third one is for the right side of logo. Watch the video tutorial so you can understand more
  2. From your Shopify admin, go to Online Store > Themes.
  3. Find the Minimal theme, and then click Actions > Duplicate.
  4. Find the theme that called Copy of Minimal then click Actions > Edit Code.
  5. On the left bar, search for a folder called Layout then Copy and paste the following code inside the file ‘theme.liquid’ on the line 86.
1{% include 'announcement' %}

6. Again, on the left bar search for a folder called Sinppets then create a new file called “announcement.liquid” then copy & paste the following code inside it

1{% if settings.show_announcement %}
2 {% if settings.home_page_only == false or request.page_type == 'index' %}
3 <style>
4 .announcement-bar {
5 background-color: {{ settings.color_bg }};
6 display: block;
7 }
8 .announcement-bar--link:hover {
9 {% assign brightness = settings.color_bg | color_brightness %}
10
11 {% if brightness <= 192 %}
12 {% assign lightenAmount = 255 | minus: brightness | divided_by: 255 | times: 16 %}
13 background-color: {{ settings.color_bg | color_lighten: lightenAmount }};
14 {% else %}
15 {% assign darkenAmount = 255 | divided_by: brightness | times: 8 %}
16 background-color: {{ settings.color_bg | color_darken: darkenAmount }};
17 {% endif %}
18 }
19 .announcement-bar__message {
20 color: {{ settings.color_text }};
21 }
22 </style>
23
24 {% if settings.announcement_link == blank %}
25 <div class="announcement-bar">
26 {% else %}
27 <a href="{{ settings.announcement_link }}" class="announcement-bar announcement-bar--link">
28 {% endif %}
29 <p class="announcement-bar__message">{{ settings.announcement_text | escape }}</p>
30 {% if settings.announcement_link == blank %}
31 </div>
32 {% else %}
33 </a>
34 {% endif %}
35 {% endif %}
36{% endif %}

7. Next, search for a folder called config on the left bar, then click on a file called ‘settings_schema.json’

8. Inside the file ‘settings_schema.json’ add the following code at the bottom (Before the closing Bracket)

1,{
2 "name": "Advanced settings",
3 "settings" : [
4 {
5 "type": "header",
6 "content": "Announcement Bar"
7 },
8 {
9 "type": "checkbox",
10 "id": "show_announcement",
11 "label": "Show announcement",
12 "default": true
13 },
14 {
15 "type": "checkbox",
16 "id": "home_page_only",
17 "label": "Home page only",
18 "default": false
19 },
20 {
21 "type": "text",
22 "id": "announcement_text",
23 "label": "Text",
24 "default": "Announce something here"
25 },
26 {
27 "type": "url",
28 "id": "announcement_link",
29 "label": "Link"
30 },
31 {
32 "type": "color",
33 "id": "color_text",
34 "label": "Text color",
35 "default": "#fff"
36 },
37 {
38 "type": "color",
39 "id": "color_bg",
40 "label": "Bar color",
41 "default": "#000"
42 }
43 ]
44}

9. Finally, copy & paste the following code inside the file called “header” in the Sections folder after you delete what’s in it

1<style>
2 .myheader-section {
3 position: sticky;
4 top: 0;
5 right: 0;
6 left: 0;
7 z-index: 36;
8 transition: top 0.2s ease-in-out;
9 }
10 .sticky-header {
11 background-color: #fff;
12 }
13 .nav-up {
14 top: -180px;
15 }
16
17 .container {
18 max-width: 1340px;
19 margin: 0 auto;
20 padding: 0 15px;
21 }
22 @media only screen and (min-width: 480px) {
23 .container {
24 padding: 0 30px;
25 }
26 }
27 .navigation {
28 padding: 16px 0;
29 }
30 .nav-center {
31 display: flex;
32 /* align-items: center; */
33 justify-content: space-between;
34 }
35 .header-item {
36 display: -ms-flexbox;
37 display: flex;
38 -ms-flex-align: center;
39 align-items: center;
40 -ms-flex: 1 1 auto;
41 flex: 1 1 auto;
42 }
43 .nav-center .header-item--navigation,
44 .nav-center .header-item--icons {
45 -ms-flex: 1 1 130px;
46 flex: 1 1 130px;
47 }
48 .header-item--icons {
49 -ms-flex-pack: end;
50 justify-content: flex-end;
51 -ms-flex: 0 1 auto;
52 flex: 0 1 auto;
53 }
54 .header-item--logo-split {
55 display: -ms-flexbox;
56 display: flex;
57 -ms-flex-pack: center;
58 justify-content: center;
59 -ms-flex-align: center;
60 align-items: center;
61 -ms-flex: 1 1 100%;
62 flex: 1 1 100%;
63 }
64 .header-item--left .site-nav {
65 margin-left: -9px;
66 }
67 .header-item--icons .site-nav {
68 margin-right: -12px;
69 }
70 .header-item--logo-split .header-item:not(.header-item--logo) {
71 text-align: center;
72 -ms-flex: 1 1 20%;
73 flex: 1 1 20%;
74 }
75 .site-header__logo-link {
76 max-width: {{ section.settings.logo_width }} px;
77 }
78 .header-item--split-left {
79 -ms-flex-pack: end;
80 justify-content: flex-end;
81 }
82 .header-bar__cart-icon {
83 font-size: 24px;
84 }
85 .header-bar__search-icon {
86 font-size: 23px;
87 }
88 span.icon.icon-hamburger {
89 font-size: 27px;
90 }
91 @media only screen and (min-width: 769px) {
92 .nav-center .header-item--logo {
93 margin: 0 30px;
94 flex: 0 0 160px;
95 }
96 }
97 .site-nav {
98 margin: 0;
99 }
100 .site-nav .site-nav__icons {
101 display: flex;
102 white-space: nowrap;
103 }
104 .site-nav__link {
105 border: none;
106 display: flex;
107 vertical-align: middle;
108 text-decoration: none;
109 padding: 7.5px 15px !important;
110 white-space: nowrap;
111 color: #000;
112 }
113 .login-icon {
114 stroke: #000;
115 }
116 @media only screen and (max-width: 768px) {
117 .site-nav__link {
118 padding: 7.5px 8px !important;
119 }
120 }
121 .site-nav__link--icon {
122 padding-left: 12px;
123 padding-right: 12px;
124 }
125 .icon.icon-search,
126 .icon.user-tie {
127 align-self: center;
128 }
129 span.icon.user-tie {
130 margin-top: 6px;
131 }
132 @media only screen and (min-width: 1024px) {
133 .medium-up--hide {
134 display: none !important;
135 }
136 }
137 @media only screen and (max-width: 1023px) {
138 .medium-down--hide {
139 display: none !important;
140 }
141 }
142 .site-nav--has-dropdown.is-focused,
143 .site-nav--has-dropdown:hover {
144 z-index: 7;
145 }
146 .site-nav--has-dropdown {
147 z-index: 6;
148 }
149 .site-nav__item {
150 position: relative;
151 display: inline-block;
152 margin: 0;
153 }
154 .site-nav--has-dropdown:hover .site-nav__dropdown,
155 .is-focused>.site-nav__dropdown {
156 display: block;
157 visibility: visible;
158 transform: translate3d(0px, 0px, 0px);
159 transition: all 300ms cubic-bezier(0.2, 0.06, 0.05, 0.95);
160 }
161 .site-nav__dropdown {
162 position: absolute;
163 left: 0;
164 margin: 0;
165 z-index: 5;
166 display: block;
167 visibility: hidden;
168 background-color: #fff;
169 min-width: 100%;
170 padding: 10px 0 5px;
171 box-shadow: 0px 10px 20px rgba(0, 0, 0, 0.09);
172 transform: translate3d(0px, -12px, 0px);
173 }
174 .text-left {
175 text-align: left !important;
176 }
177 .site-nav__dropdown>li {
178 position: relative;
179 }
180 .site-nav__dropdown li {
181 margin: 0;
182 }
183 .site-nav__item li {
184 display: block;
185 }
186 .site-nav__link,
187 .site-nav__dropdown-link:not(.site-nav__dropdown-link--top-level) {
188 font-size: 14px;
189 }
190 .site-nav__dropdown>li>a {
191 position: relative;
192 z-index: 6;
193 }
194 .site-nav__dropdown a {
195 background-color: #fff;
196 }
197 .site-nav__dropdown-link {
198 display: block;
199 padding: 8px 15px;
200 white-space: nowrap;
201 }
202 .site-nav--has-dropdown>.site-nav__link {
203 position: relative;
204 z-index: 6;
205 }
206 .site-nav__link,
207 .mobile-nav__link--top-level {
208 text-transform: uppercase;
209 letter-spacing: 0.2em;
210 }
211 .site-nav__item:hover .site-nav__link--underline:after {
212 right: 0;
213 }
214 .site-nav--has-dropdown .site-nav__link--underline:after {
215 border-bottom-color: #000;
216 }
217 .site-nav__link--underline:after {
218 content: '';
219 display: block;
220 position: absolute;
221 bottom: 0;
222 left: 0;
223 right: 100%;
224 margin: 0 15px;
225 border-bottom: 2px solid #000;
226 transition: right 0.5s;
227 }
228 .cart-link {
229 position: relative;
230 }
231 .cart-total {
232 color: #fff;
233 background-color: {{ settings.color_primary }};
234 border-radius: 50%;
235 display: block;
236 font-size: 12.5px;
237 font-weight: 400;
238 text-align: center;
239 line-height: 20px;
240 height: 20px;
241 width: 20px;
242 position: absolute;
243 left: -10px;
244 top: 0;
245 }
246 .bigcounter {
247 margin-left: 3px;
248 }
249
250 /*===== HEADER FOR MOBILE =====*/
251 .bd-grid {
252 max-width: 1024px;
253 display: -ms-grid;
254 display: grid;
255 -ms-grid-columns: 100%;
256 grid-template-columns: 100%;
257 margin-left: 1.5rem;
258 margin-right: 1.5rem;
259 }
260 .header {
261 position: relative;
262 }
263 @media screen and (max-width: 768px) {
264 .nav {
265 position: fixed;
266 top: 0;
267 left: -100%;
268 background-color: #ffffff;
269 color: #000000;
270 width: 100%;
271 height: 100vh;
272 padding: 1.5rem 0;
273 z-index: 30;
274 -webkit-transition: .5s;
275 transition: .5s;
276 }
277 }
278 @media screen and (min-width: 1024px) {
279 .header {
280 display: none;
281 }
282 }
283 .nav__content {
284 height: 100%;
285 -ms-grid-rows: max-content 1fr max-content;
286 grid-template-rows: -webkit-max-content 1fr -webkit-max-content;
287 grid-template-rows: max-content 1fr max-content;
288 row-gap: 2rem;
289 }
290 .nav__close {
291 position: absolute;
292 top: .5rem;
293 right: 1rem;
294 font-size: 1rem;
295 padding: .25rem;
296 border-radius: 50%;
297 cursor: pointer;
298 }
299 .nav__menu {
300 -ms-flex-item-align: center;
301 -ms-grid-row-align: center;
302 align-self: center;
303 }
304 ul.nav__list {
305 margin-top: 60px;
306 }
307 .nav__item {
308 padding: 15px 0;
309 position: relative;
310 }
311 .nav__item:first-child {
312 border-top: 1px solid #e8e8e1;
313 }
314 .nav__item::after {
315 content: '';
316 position: absolute;
317 bottom: 0;
318 left: 0;
319 right: 0;
320 border-bottom: 1px solid #e8e8e1;
321 }
322 .nav__link-top {
323 color: #000000;
324 text-transform: uppercase;
325 letter-spacing: 0.2em;
326 }
327 .nav__social {
328 display: flex;
329 }
330 .nav__social-icon .social-icons li {
331 margin-right: 0 !important;
332 }
333 .nav__social-icon .social-icons li a {
334 color: #1a1a1a;
335 }
336 .nav__social-icon:hover {
337 color: #ffce00;
338 }
339 /* Dropdown For Mobile */
340 .dropdown__link {
341 display: flex;
342 align-items: center;
343 justify-content: space-between;
344 }
345 .dropdown__icon {
346 font-size: 1.3rem;
347 transition: .5s;
348 transform: rotate(-90deg);
349 }
350 .dropdown__item {
351 margin: 1rem 0;
352 }
353 .rotate__icon {
354 transform: rotate(0deg);
355 }
356 .default-skin {
357 font-weight: 400;
358 font-size: 14px;
359 font-smooth: antialiased;
360 -webkit-font-smoothing: antialiased;
361 -moz-osx-font-smoothing: grayscale;
362 --skin: #ffffff;
363 --skin-hover: #f0f0f0;
364 --skin-color: #1f1f1f;
365 }
366 .menu-body.visibility {
367 visibility: hidden;
368 }
369 .menubar {
370 width: 100%;
371 height: 48px;
372 display: block;
373 background: var(--skin);
374 color: var(--skin-color);
375 line-height: 48px;
376 box-shadow: 1px 1px 4px rgba(0, 0, 0, 0.6);
377 }
378 .menu-trigger {
379 position: absolute;
380 -webkit-appearance: none;
381 border: 0;
382 outline: 0;
383 background: transparent;
384 top: 10px;
385 padding: 0 5px;
386 color: var(--skin-color);
387 cursor: pointer;
388 -webkit-tap-highlight-color: rgba(0, 0, 0, .2);
389 }
390 .menu-trigger:hover {
391 opacity: 0.8;
392 -webkit-opacity: 0.8;
393 }
394 .menu-trigger.left {
395 left: 20px;
396
397 }
398 .menu-trigger.right {
399 right: 20px;
400 }
401 .sticky {
402 position: fixed;
403 top: 0;
404 left: 0;
405 }
406 .menu-container {
407 overflow: auto;
408 display: block;
409 top: 0;
410 }
411 .menu-container::-webkit-scrollbar {
412 width: 0;
413 }
414 .menu-container::-webkit-scrollbar-track {
415 background: rgba(255, 255, 255, 0.2);
416 }
417 .menu-container::-webkit-scrollbar-thumb {
418 background: rgba(0, 0, 0, 0.11);
419 }
420 .menu-container::-webkit-scrollbar-thumb:hover {
421 background: #555;
422 }
423 .position-left {
424 left: -270px;
425 }
426 .position-right {
427 right: -270px;
428 }
429 .position-left.open {
430 left: 0;
431 }
432 .position-right.open {
433 right: 0;
434 }
435 .menu-container,
436 .menu-head,
437 .menu-left,
438 .menu-left.open .menu-right,
439 .menu-right.open {
440 transition: .4s;
441 -webkit-transition: .4s;
442 -moz-transition: .4s;
443 -ms-transition: .4s;
444 }
445 .menu-container,
446 .menu-head {
447 background: var(--skin);
448 position: fixed;
449 z-index: 1000;
450 width: 270px;
451 }
452 .menu-head .layer {
453 background: rgba(0, 0, 0, 0.2);
454 display: block;
455 padding: 15px;
456 }
457 .menu-head {
458 height: 120px;
459 box-sizing: border-box;
460 margin: 0px;
461 top: 0;
462 }
463 .menu-items {
464 list-style: none;
465 font-size: 14px;
466 margin-top: 45px;
467 }
468 .menu-items li {
469 margin: 0;
470 }
471 .dropdown-heading,
472 .menu-items li a {
473 text-transform: uppercase;
474 letter-spacing: 0.2em;
475 text-decoration: none;
476 padding: 15px 5px 15px 15px;
477 display: block;
478 color: var(--skin-color);
479 border-bottom: 1px solid #e8e8e1;
480 margin: 0;
481 cursor: pointer;
482 user-select: none;
483 -webkit-user-select: none;
484 }
485
486 /* Icon Style */
487 .menu-items li i {
488 font-size: 16px;
489 margin-right: 10px;
490 }
491 .dropdown-heading {
492 -webkit-tap-highlight-color: transparent;
493 }
494 .dropdown-heading:hover,
495 .menu-items li a:hover {
496 background: var(--skin-hover);
497 }
498 @keyframes fadeIn {
499 from {
500 opacity: 0;
501 -webkit-opacity: 0;
502 }
503
504 to {
505 opacity: 1;
506 -webkit-opacity: 1;
507 }
508 }
509 @-webkit-keyframes fadeIn {
510 from {
511 opacity: 0;
512 -webkit-opacity: 0;
513 }
514
515 to {
516 opacity: 1;
517 -webkit-opacity: 1;
518 }
519 }
520
521 /* Dropdowns */
522 .has-sub ul {
523 list-style: none;
524 overflow: hidden;
525 display: none;
526 margin: 0 !important;
527 }
528 .has-sub ul li a {
529 display: block;
530 padding: 12px 33px;
531 border-bottom: 0;
532 text-transform: capitalize;
533 font-size: 13px;
534 color: #444;
535 transition: .1s;
536 -webkit-transition: .1s;
537 border-bottom: 1px dotted #e1e1e1;
538 }
539 .has-sub ul li a:hover {
540 background: #dedede;
541 transition: .1s;
542 -webkit-transition: .1s;
543 }
544 .has-sub span {
545 display: block;
546 box-sizing: border-box;
547 }
548 .has-sub i.dropdown__icon {
549 float: right;
550 margin-right: 10px;
551 transition: 0.360s;
552 font-size: 16px;
553 color: #1f1f1f;
554 }
555 .has-sub .dropdown__icon.d-down {
556 transform: rotateZ(0deg);
557 -webkit-transform: rotateZ(0deg);
558 -moz-transform: rotateZ(0deg);
559 transition: 0.360s;
560 -webkit-transition: 0.360s;
561 -moz-transition: 0.360s;
562 }
563 .col {
564 display: table;
565 }
566 .row {
567 display: table-cell;
568 }
569 .for-name {
570 max-width: 140px;
571 padding: 10px;
572 color: var(--skin-color);
573 }
574 .for-pic {
575 max-width: 70px;
576 }
577 .profile-pic img {
578 width: 60px;
579 height: 60px;
580 border-radius: 50%;
581 border: 1px solid rgba(255, 255, 255, 0.01);
582 object-fit: cover;
583 }
584 .menu-head h3 {
585 top: -35px;
586 font-size: 13pt;
587 font-weight: 400;
588 }
589 .tagline,
590 .menu-head h3 {
591 display: block;
592 position: relative;
593 overflow: hidden;
594 text-overflow: ellipsis;
595 white-space: nowrap;
596 }
597 .tagline {
598 font-size: 11px;
599 bottom: 32px;
600 display: block;
601 }
602
603 /* Dim background effect */
604 .dim-overlay {
605 display: none;
606 position: relative;
607 z-index: 33;
608 }
609 .dim-overlay:before {
610 content: "";
611 background-color: rgba(0, 0, 0, .4);
612 height: 100vh;
613 left: 0;
614 position: fixed;
615 top: 0;
616 width: 100%;
617 overflow: hidden;
618 z-index: 5;
619 }
620 .logo {
621 display: block;
622 text-align: center;
623 margin-left: auto;
624 margin-right: auto;
625 font-size: 22px;
626 }
627 .logo img {
628 width: 130px;
629 margin-top: 10px;
630 height: auto;
631 }
632 .logo a {
633 text-decoration: none;
634 color: var(--skin-color);
635 }
636 .logo a:hover {
637 color: var(--skin-hover);
638 }
639 .cus__account {
640 padding-left: 15px;
641 margin-bottom: 15px;
642 }
643
644 /* SEARCH BANNER STYLE */
645 #search-menu {
646 position: fixed;
647 width: 100%;
648 height: 132px;
649 top: -20em;
650 left: 0;
651 right: 0;
652 white-space: nowrap;
653 z-index: 9999;
654 background-color: #fff;
655 opacity: 0;
656 visibility: hidden;
657 -webkit-transition: 500ms ease all;
658 -moz-transition: 500ms ease all;
659 transition: 500ms ease all;
660 }
661 #search-menu.toggled {
662 top: 0;
663 opacity: 1;
664 visibility: visible;
665 }
666 #search-menu .wrapper {
667 position: relative;
668 margin: 36px 20px 0;
669 padding: 0 1em;
670 }
671 #search-menu .wrapper input {
672 width: 90%;
673 padding: 0 0 0.125em 0;
674 background: transparent;
675 border: none;
676 border-bottom: 3px solid #bfbfbf;
677 font-size: 22px;
678 color: #010101;
679 }
680 #search-menu .wrapper input:focus {
681 outline: none;
682 }
683 #search-menu .wrapper button {
684 position: absolute;
685 display: block;
686 width: 10%;
687 right: 0;
688 top: 0;
689 background: transparent;
690 border: none;
691 -webkit-transition: 500ms ease all;
692 -moz-transition: 500ms ease all;
693 transition: 500ms ease all;
694 }
695 #search-menu .wrapper button:focus {
696 outline: none;
697 }
698 .search-icon {
699 -webkit-transition: 500ms ease all;
700 -moz-transition: 500ms ease all;
701 transition: 500ms ease all;
702 cursor: pointer;
703 padding-right: 15px !important;
704 }
705
706 /* ANNOUNCE BAR STYLE */
707 @media only screen and (min-width: 769px) {
708 .announcement-bar {
709 font-size: 15px;
710 }
711 }
712
713 .announcement-bar {
714 font-size: 13px;
715 position: relative;
716 text-align: center;
717 padding: 10px 0;
718 width: 100%;
719 }
720 .announcement-bar p {
721 margin: 0;
722 letter-spacing: 2px;
723 }
724</style>
725
726<!-- Menu Mobile -->
727<div class="menu-body visibility">
728 <nav class="menu-container">
729 <ul class="menu-items">
730 {%- for link in linklists[section.settings.nav_menu-mobile].links -%}
731 {%- assign childlink_handle = link.title | handle -%}
732 {%- if linklists[childlink_handle] and linklists[childlink_handle].links.size > 0 -%}
733 <li class="has-sub">
734 <span class="dropdown-heading">{{ link.title }}</span>
735 <ul>
736 {%- for childlink in linklists[childlink_handle].links -%}
737 <li> <a href="{{ childlink.url }}">{{ childlink.title }}</a> </li>
738 {%- endfor -%}
739 </ul>
740 </li>
741 {%- else -%}
742 <li> <a href="{{ link.url }}">{{ link.title }}</a></li>
743 {%- endif -%}
744 {%- endfor -%}
745 </ul>
746 {% if shop.customer_accounts_enabled %}
747 <div class="cus__account"><a href="/account/login">Log in</a></div>
748 {% endif %}
749 <div class="nav__social-icon">
750 {% if settings.social_twitter_link != blank or settings.social_facebook_link != blank or settings.social_pinterest_link != blank or settings.social_google_plus_link != blank or settings.social_instagram_link != blank or settings.social_snapchat_link != blank or settings.social_tumblr_link != blank or settings.social_youtube_link != blank or settings.social_vimeo_link != blank or settings.social_fancy_link != blank or settings.social_rss_link != blank %}
751 {% assign show_social_icons = true %}
752 {% else %}
753 {% assign show_social_icons = false %}
754 {% endif %}
755 {% include 'social-links' %}
756 </div>
757 </nav>
758</div>
759
760<div class="sticky-header" data-section-id="{{ section.id }}" data-section-type="header-section">
761 <header id="home">
762 <nav class="navigation">
763 <div class="nav-center container">
764 <div class="header-item header-item--left header-item--navigation">
765 <div class="site-nav medium-down--hide">
766 <a class="search-icon site-nav__link site-nav__link--icon">
767 <span class="icon icon-search header-bar__search-icon"></span>
768 </a>
769 </div>
770 <div class="site-nav medium-up--hide">
771 <button type="button" class="site-nav__link site-nav__link--icon js-drawer-open-nav" id="nav-toggle">
772 <span class="icon icon-hamburger"></span>
773 </button>
774 </div>
775 </div>
776 <div class="header-item header-item--logo-split" role="navigation" aria-label="Primary">
777 <div class="header-item header-item--split-left">
778 <ul class="site-nav site-navigation medium-down--hide">
779 {% for link in linklists[section.settings.nav_menu-left].links %}
780 {% if link.links != blank %}
781 {% assign parent_index = forloop.index %}
782 <li class="site-nav__item site-nav__expanded-item site-nav--has-dropdown">
783 <a href="{{ link.url }}"
784 class="site-nav__link site-nav__link--underline site-nav__link--has-dropdown">
785 {{ link.title }}
786 </a>
787 <ul class="site-nav__dropdown text-left">
788 {% for childlink in link.links %}
789 <li>
790 <a href="{{ childlink.url }}"
791 class="site-nav__link site-nav__dropdown-link--second-level ">
792 {{ childlink.title | escape }}
793 </a>
794 </li>
795 {% endfor %}
796 </ul>
797 </li>
798 {%- else -%}
799 <li class="site-nav__item site-nav__expanded-item">
800 <a href="{{ link.url }}" class="site-nav__link site-nav__link--underline">
801 {{ link.title | escape }}
802 </a>
803 </li>
804 {% endif %}
805 {% endfor %}
806 </ul>
807 </div>
808 <div class="header-item header-item--logo">
809 <!-- LOGO -->
810 <div class="h1 site-header__logo">
811 {%- if section.settings.logo -%}
812 {% capture logo_size %}{{ section.settings.logo_width | escape }}x{% endcapture %}
813 <a href="/" class="site-header__logo-link logo--has-inverted">
814 <img src="{{ section.settings.logo | img_url: logo_size }}"
815 alt="{{ section.settings.logo.alt | default: shop.name }}"
816 {%- if section.settings.ratina_logo_enable -%}
817 srcset="{{ section.settings.logo | img_url: logo_size }} 1x, {{ section.settings.logo | img_url: logo_size, scale: 2 }} 2x"
818 {%- endif -%}>
819 </a>
820 {%- else -%}
821 <a href="/">
822 <strong>{{ shop.name }}</strong>
823 </a>
824 {%- endif -%}
825 </div>
826 </div>
827 <div class="header-item header-item--split-right">
828 <ul class="site-nav site-navigation medium-down--hide">
829 {% for link in linklists[section.settings.nav_menu-right].links %}
830 {% if link.links != blank %}
831 {% assign parent_index = forloop.index %}
832 <li class="site-nav__item site-nav__expanded-item site-nav--has-dropdown">
833 <a href="{{ link.url }}"
834 class="site-nav__link site-nav__link--underline site-nav__link--has-dropdown">
835 {{ link.title }}
836 </a>
837 <ul class="site-nav__dropdown text-left">
838 {% for childlink in link.links %}
839 <li>
840 <a href="{{ childlink.url }}"
841 class="site-nav__link site-nav__dropdown-link--second-level ">
842 {{ childlink.title | escape }}
843 </a>
844 </li>
845 {% endfor %}
846 </ul>
847 </li>
848 {%- else -%}
849 <li class="site-nav__item site-nav__expanded-item">
850 <a href="{{ link.url }}" class="site-nav__link site-nav__link--underline">
851 {{ link.title | escape }}
852 </a>
853 </li>
854 {% endif %}
855 {% endfor %}
856 </ul>
857 </div>
858 </div>
859 <div class="header-item header-item--icons">
860 <div class="site-nav">
861 <div class="site-nav__icons">
862 <a class="search-icon site-nav__link site-nav__link--icon medium-up--hide">
863 <span class="icon icon-search header-bar__search-icon"></span>
864 </a>
865 {% if shop.customer_accounts_enabled %}
866 <ul class="header-bar__module header-bar__module--list">
867 {% if customer %}
868 <li>
869 <a href="{{ routes.account_url }}">{{ 'layout.customer.account' | t }}</a>
870 </li>
871 <li>
872 {{ 'layout.customer.log_out' | t | customer_logout_link }}
873 </li>
874 {% else %}
875 <li>
876 <a class="site-nav__link site-nav__link--icon medium-down--hide" href="/account/login">
877 <span class="icon user-tie" aria-hidden="true">
878 <svg class="login-icon" xmlns="http://www.w3.org/2000/svg" width="17" height="21" viewBox="0 0 17 21">
879 <path id="user"
880 d="M64.174,33.947A18.332,18.332,0,0,0,72,35.988a16.577,16.577,0,0,0,7.838-2.047A.333.333,0,0,0,80,33.654a10.732,10.732,0,0,0-2.324-6.935,7.554,7.554,0,0,0-3.814-2.486,4.333,4.333,0,1,0-3.724,0,7.555,7.555,0,0,0-3.814,2.486A10.732,10.732,0,0,0,64,33.654.333.333,0,0,0,64.174,33.947Zm4.16-13.626A3.667,3.667,0,1,1,72,23.988a3.667,3.667,0,0,1-3.667-3.667Zm-1.5,6.827a6.6,6.6,0,0,1,10.332,0,10.007,10.007,0,0,1,2.166,6.311A16.314,16.314,0,0,1,72,35.321a17.864,17.864,0,0,1-7.331-1.869A10,10,0,0,1,66.834,27.149Z"
881 transform="translate(-63.5 -15.487)" stroke-width="1" />
882 </svg>
883 </span>
884 </a>
885 </li>
886 {% endif %}
887 </ul>
888 {% endif %}
889 {%- assign item_count = cart.item_count -%}
890 <a href="/cart" class="site-nav__link site-nav__link--icon">
891 <span class="cart-link">
892 <span class="icon icon-cart header-bar__cart-icon"></span>
893 <span class="cart-total"><span class="bigcounter">{{ item_count }}</span></span>
894 </span>
895 </a>
896 </div>
897 </div>
898 </div>
899 </div>
900 </nav>
901 </header>
902</div>
903<div id="search-menu">
904 <div class="wrapper">
905 <form id="form" action={{ routes.search_url }} method="get" role="search">
906 <input id="popup-search" type="search" name="q" value="{{ search.terms | escape }}" aria-label="{{ 'general.search.placeholder' | t }}" placeholder="{{ 'general.search.placeholder' | t }}">
907 <button id="popup-search-button" type="submit" name="search"><i class="icon icon-search header-bar__search-icon"></i></button>
908 </form>
909 </div>
910</div>
911
912<script>
913 (function ($) {
914 $.fn.jSideMenu = function (options) {
915 var setting = $.extend({
916 jSidePosition: "position-left", //possible options position-left or position-right
917 jSideSticky: true, // menubar will be fixed on top, false to set static
918 jSideSkin: "default-skin", // to apply custom skin, just put its name in this string
919 jSideTransition: 400, //Define the transition duration in milliseconds
920 }, options);
921
922 return this.each(function () {
923 var jSide, target, headHeight, devHeight, arrow, dimBackground;
924 target = $(this);
925 //Accessing DOM
926 jSide = $(".menu-container, .menu-head");
927 devHeight = $(window).height();
928 dHeading = $(".dropdown-heading");
929 menuTrigger = $("#nav-toggle");
930 arrow = $("<i></i>");
931 dimBackground = $("<div>");
932 // Set the height of side menu according to the available height of device
933 $(target).css({
934 'height': devHeight,
935 });
936 if (setting.jSideSticky == true) {
937 $(".menubar").addClass("sticky");
938 } else {
939 $(".menubar").removeClass("sticky");
940 }
941 $(".menubar").addClass(setting.jSideSkin);
942 $(jSide).addClass(setting.jSideSkin).addClass(setting.jSidePosition);
943 if ($(jSide).hasClass("position-left")) {
944 $("#nav-toggle").addClass("left").removeClass("right");
945 } else {
946 $("#nav-toggle").removeClass("left").addClass("right");
947 }
948 //Dropdown Arrow
949 $(arrow).addClass("icon icon-arrow-down dropdown__icon").appendTo(dHeading);
950 //Dim Layer
951 $(dimBackground).addClass("dim-overlay").appendTo("body");
952 //Dropdowns
953 $(dHeading).click(function () {
954 $(this).parent().find("ul").slideToggle(setting.jSideTransition);
955 $(this).find(".dropdown__icon").toggleClass("d-down");
956 });
957 $(menuTrigger).click(function () {
958 $(jSide).toggleClass("open");
959 $('.myheader-section').addClass('nav-up');
960 $(dimBackground).show(setting.jSideTransition);
961 $(".menu-body").removeClass("visibility");
962 });
963 //close menu if user click outside of it
964 $(window).click(function (e) {
965 if ($(e.target).closest('#nav-toggle').length) {
966 return;
967 }
968 if ($(e.target).closest(jSide).length) {
969 return;
970 }
971 $(jSide).removeClass("open");
972 if (!$(jSide).hasClass("open")) {
973 $(dimBackground).hide(setting.jSideTransition);
974 }
975 $(".menu-body").addClass("visibility");
976 });
977 });
978 };
979 })(jQuery);
980
981$(function () {
982 $(".menu-container").jSideMenu({
983 jSidePosition: "position-left",
984 });
985});
986
987// SEARCH SCRIPT
988$(function() {
989 $('#search-menu').removeClass('toggled');
990
991 $('.search-icon').click(function(e) {
992 e.stopPropagation();
993 $('#search-menu').toggleClass('toggled');
994 $("#popup-search").focus();
995 });
996
997 $('#search-menu input').click(function(e) {
998 e.stopPropagation();
999 });
1000
1001 $('#search-menu, body').click(function() {
1002 $('#search-menu').removeClass('toggled');
1003 });
1004});
1005
1006// Hide Header on on scroll down
1007var didScroll;
1008var lastScrollTop = 0;
1009var delta = 10;
1010var navbarHeight = $('header').outerHeight();
1011
1012$(window).scroll(function(event){
1013 didScroll = true;
1014});
1015
1016setInterval(function() {
1017 if (didScroll) {
1018 hasScrolled();
1019 didScroll = false;
1020 }
1021}, 250);
1022
1023function hasScrolled() {
1024 var st = $(this).scrollTop();
1025
1026 // Make sure they scroll more than delta
1027 if(Math.abs(lastScrollTop - st) <= delta)
1028 return;
1029
1030 // If they scrolled down and are past the navbar, add class .nav-up.
1031 // This is necessary so you never see what is "behind" the navbar.
1032 if (st > lastScrollTop && st > navbarHeight){
1033 // Scroll Down
1034 $('.myheader-section').addClass('nav-up');
1035 } else {
1036 // Scroll Up
1037 if(st + $(window).height() < $(document).height()) {
1038 $('.myheader-section').removeClass('nav-up');
1039 }
1040 }
1041
1042 lastScrollTop = st;
1043}
1044</script>
1045
1046{% schema %}
1047{
1048 "name": {
1049 "da": "Overskrift",
1050 "de": "Titel",
1051 "en": "Header",
1052 "es": "Encabezado",
1053 "fi": "Ylätunniste",
1054 "fr": "En-tête",
1055 "hi": "हैडर",
1056 "it": "Header",
1057 "ja": "ヘッダー",
1058 "ko": "헤더",
1059 "nb": "Header",
1060 "nl": "Koptekst",
1061 "pt-BR": "Cabeçalho",
1062 "pt-PT": "Cabeçalho",
1063 "sv": "Rubrik",
1064 "th": "ส่วนหัว",
1065 "zh-CN": "标头",
1066 "zh-TW": "標頭"
1067 },
1068 "class": "myheader-section",
1069 "settings": [
1070 {
1071 "type": "image_picker",
1072 "id": "logo",
1073 "label": {
1074 "da": "Logo",
1075 "de": "Logo",
1076 "en": "Logo",
1077 "es": "Logo",
1078 "fi": "Logo",
1079 "fr": "Logo",
1080 "hi": "लोगो",
1081 "it": "Logo",
1082 "ja": "ロゴ",
1083 "ko": "로고",
1084 "nb": "Logo",
1085 "nl": "Logo",
1086 "pt-BR": "Logotipo",
1087 "pt-PT": "Logótipo",
1088 "sv": "Logotyp",
1089 "th": "โลโก้",
1090 "zh-CN": "logo",
1091 "zh-TW": "商標"
1092 },
1093 "info": {
1094 "da": "450 x 200 pixel anbefales",
1095 "de": "450 x 200 Pixel empfohlen",
1096 "en": "450 x 200px recommended",
1097 "es": "450 x 200px recomendado",
1098 "fi": "Suositus 450 x 200px",
1099 "fr": "450 x 200 px recommandé",
1100 "hi": "450 x 200px की अनुशंसा की जाती है",
1101 "it": "450 x 200 px consigliato",
1102 "ja": "450 x 200ピクセルを推奨",
1103 "ko": "450x200 픽셀 권장",
1104 "nb": "450 x 200 px anbefales",
1105 "nl": "450 x 200 px aanbevolen",
1106 "pt-BR": "450 x 200 px recomendado",
1107 "pt-PT": "450 x 200 píxeis (recomendado)",
1108 "sv": "450 x 200px rekommenderas",
1109 "th": "แนะนำขนาด 450 x 200 พิกเซล",
1110 "zh-CN": "推荐使用 450 x 200 像素大小",
1111 "zh-TW": "建議使用 450 x 200px"
1112 }
1113 },
1114 {
1115 "type": "text",
1116 "id": "logo_width",
1117 "label": {
1118 "da": "Tilpasset logobredde (i pixels)",
1119 "de": "Benutzerdefinierte Logobreite (Pixel)",
1120 "en": "Custom logo width (in pixels)",
1121 "es": "Ancho del logo personalizado (en píxeles)",
1122 "fi": "Mukautettu logon leveys (pikseleinä)",
1123 "fr": "Largeur personnalisée du logo (en pixels)",
1124 "hi": "कस्टम लोगो की चौड़ाई (पिक्सेल)",
1125 "it": "Larghezza logo personalizzato (in pixel)",
1126 "ja": "ロゴの幅をカスタマイズする (ピクセル単位)",
1127 "ko": "사용자 지정 로고 폭 (픽셀)",
1128 "nb": "Tilpasset logobredde (i piksler)",
1129 "nl": "Aangepaste logobreedte (in pixels)",
1130 "pt-BR": "Largura do logotipo personalizado (em pixels)",
1131 "pt-PT": "Largura de logótipo personalizada (em píxeis)",
1132 "sv": "Anpassad logotypbredd (i pixlar)",
1133 "th": "ความกว้างของโลโก้แบบกำหนดเอง (เป็นพิกเซล)",
1134 "zh-CN": "自定义 logo 宽度(像素)",
1135 "zh-TW": "自訂標誌寬度 (單位為像素)"
1136 },
1137 "default": {
1138 "da": "450",
1139 "de": "450",
1140 "en": "450",
1141 "es": "450",
1142 "fi": "450",
1143 "fr": "450",
1144 "hi": "450",
1145 "it": "450",
1146 "ja": "450",
1147 "ko": "450",
1148 "nb": "450",
1149 "nl": "450",
1150 "pt-BR": "450",
1151 "pt-PT": "450",
1152 "sv": "450",
1153 "th": "450",
1154 "zh-CN": "450",
1155 "zh-TW": "450"
1156 }
1157 },
1158 {
1159 "type": "checkbox",
1160 "id": "ratina_logo_enable",
1161 "label": "Retina Logo Enable",
1162 "default": true
1163 },
1164 {
1165 "type": "header",
1166 "content": {
1167 "da": "Hovedmenu",
1168 "de": "Hauptmenü",
1169 "en": "Main menu",
1170 "es": "Menú principal",
1171 "fi": "Päävalikko",
1172 "fr": "Menu principal",
1173 "hi": "मुख्य मेनू",
1174 "it": "Menu principale",
1175 "ja": "メインメニュー",
1176 "ko": "주 메뉴",
1177 "nb": "Hovedmeny",
1178 "nl": "Hoofdmenu",
1179 "pt-BR": "Menu principal",
1180 "pt-PT": "Menu principal",
1181 "sv": "Huvudmeny",
1182 "th": "เมนูหลัก",
1183 "zh-CN": "主菜单",
1184 "zh-TW": "主選單"
1185 }
1186 },
1187 {
1188 "type": "link_list",
1189 "id": "nav_menu-left",
1190 "label": {
1191 "da": "Menu",
1192 "de": "Menü",
1193 "en": "Left Main Menu",
1194 "es": "Menú",
1195 "fi": "Valikko",
1196 "fr": "Menu",
1197 "hi": "मेनू",
1198 "it": "Menu",
1199 "ja": "メニュー",
1200 "ko": "메뉴",
1201 "nb": "Meny",
1202 "nl": "Menu",
1203 "pt-BR": "Menu",
1204 "pt-PT": "Menu",
1205 "sv": "Meny",
1206 "th": "เมนู",
1207 "zh-CN": "菜单",
1208 "zh-TW": "選單"
1209 }
1210
1211 },
1212 {
1213 "type": "link_list",
1214 "id": "nav_menu-right",
1215 "label": {
1216 "da": "Menu",
1217 "de": "Menü",
1218 "en": "Right Main Menu",
1219 "es": "Menú",
1220 "fi": "Valikko",
1221 "fr": "Menu",
1222 "hi": "मेनू",
1223 "it": "Menu",
1224 "ja": "メニュー",
1225 "ko": "메뉴",
1226 "nb": "Meny",
1227 "nl": "Menu",
1228 "pt-BR": "Menu",
1229 "pt-PT": "Menu",
1230 "sv": "Meny",
1231 "th": "เมนู",
1232 "zh-CN": "菜单",
1233 "zh-TW": "選單"
1234 }
1235 },
1236 {
1237 "type": "link_list",
1238 "id": "nav_menu-mobile",
1239 "label": {
1240 "da": "Menu",
1241 "de": "Menü",
1242 "en": "Mobile Main Menu",
1243 "es": "Menú",
1244 "fi": "Valikko",
1245 "fr": "Menu",
1246 "hi": "मेनू",
1247 "it": "Menu",
1248 "ja": "メニュー",
1249 "ko": "메뉴",
1250 "nb": "Meny",
1251 "nl": "Menu",
1252 "pt-BR": "Menu",
1253 "pt-PT": "Menu",
1254 "sv": "Meny",
1255 "th": "เมนู",
1256 "zh-CN": "菜单",
1257 "zh-TW": "選單"
1258 }
1259 }
1260 ]
1261}
1262{% endschema %}

That’s it! I really hope you find this tutorial useful.

More articles from doudmine

Advanced Slider for your Shopify store

In this tutorial you will learn how to implement an advanced slider that has a lot of features to your shopify store

February 5th, 2021 · 1 min read

Modern Products carousel slider for Debut theme

I´m going to show you step by step how to implement Product slider within the Debut theme.

November 20th, 2020 · 1 min read
© 2020–2021 doudmine
Link to $https://www.instagram.com/doudmine/Link to $https://www.youtube.com/channel/UCYF73P2A2NdVr6c9aONH22w