How do I make a transparent banner for the home page only in Dawn 10.0 theme?

Store Design
, ,
1

Hello there! i would like to make the header transparent and move banner image higher to be background of the header (shown in picture) but only for landing (home) page (index page).

I found this code that did the job unfortunately it moves all pages with it (shown in pictures as well):

"

.header-wrapper {
position: absolute !important;
width: 100% !important;
background: transparent !important;
}

"

Do anybody know how to make it work? Im desperate and spent many hours trying to fix it / find a solution:(

A.png
A.png1920×1474 475 KB

B.png
B.png1920×1474 573 KB

C.png
C.png1920×1474 422 KB

2

In dawn theme 10.0 Parent menu of sub navigation are not clickable.. Can you on this ?

3

@146545341sdfgfd , just wrap the CSS code in if condition like this

{% if template contains 'index' %}
  .header-wrapper {
position: absolute !important;
width: 100% !important;
background: transparent !important;
}
  {% endif %}

If I managed to help you then don’t forget to Like it and Mark it as Solution

4

This doesnt work (obviously i tried simple solutions like this) tried it in base.css as well as in “custom CSS” field on page!:frowning:

5

Try this https://youtu.be/Z1JelHGDjMU

6

yes i been waiting for his tutorial (sent him message about this 10 days back)! thanks

7

works like charm!