Header + Announcement

Go to Sections > Header

1 - Announcement

1.1 - Use announcement

1.2 - Use sticky for announcement

1.3 - Max width section

Wide
1200 px
Full width

1.4 - Max width content?

1.5 - Responsive

{
"0": {
"slidesPerView": 1,
"spaceBetween": 0
},
"320": {
"slidesPerView": 1,
"spaceBetween": 0
},
"768": {
"slidesPerView": 1,
"spaceBetween": 0
},
"992": {
"slidesPerView": 1,
"spaceBetween": 0
},
"1200": {
"slidesPerView": 1,
"spaceBetween": 0
}
}

1.6 - Margin top/bottom/padding(top right bottom left)

  • Margin top and bottom: 2.5rem|3rem|3.5rem|4rem|4.5rem|5rem

  • Paddings (top right bottom left): 6rem 6rem 0 6rem

1.7 - Background image

Size suggestion: 1920 x 752 pixels

1.8 - Hide on mobile/tablet

2 - Header top

2.1 - Use header top and use sticky

2.2 - Max width section

2.3 - Margin top/bottom/padding(top right bottom left)

  • Margin top and bottom: 2.5rem|3rem|3.5rem|4rem|4.5rem|5rem

  • Paddings (top right bottom left): 6rem 6rem 0 6rem

2.4 - Background image

Size suggestion: 1920 x 752 pixels

2.5 - Hide on mobile/tablet

3 - Main header

3.1 - Use Sticky

3.2 - Max width section

3.3 - Margin top/bottom/padding

  • Margin top/bottom: 2.5rem|3rem|3.5rem|4rem|4.5rem|5rem

  • Paddings (top right bottom left): 6rem 6rem 0 6rem

3.4 - Background image

Size suggestion: 1920 x 752 pixels

4 - Icons control

4.1 - Use cart

4.2 - Use compare

4.3 - Use whislist

5 - Main menu settings

5.1 - Select header (18 headers)

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

5.2 - Padding item level 1

4.3rem
0.5rem

6 - Categories settings

6.1 - Title

6.2 - Header 2+3+4+11

6.3 - Header 7+8+16

7 - Content

Refer in Header and megamenu

From The4

Hope you success!!