Hero Banner in den Hintergrund des Menüs setzen

[Florence]

Hi,

möchte gerne in meinem Shopify DAWN Theme 15.0.0. die Höhe des Hero Banners ändern, sodass er hinter der Menüleiste auch zu sehen ist. Weiters würde ich ihn auch gern noch mehr nach unten ziehen, sodass nichts weißes mehr im 1. Fold zu sehen ist, wenn man auf die Homepage kommt. Siehe Foto:

Kann mir jemand sagen wie ich das ändern kann?

Danke!

Florence

[Moeed]

Hey @Florence 

Share your Store URL and Password if enabled.

Best Regards,

Moeed

[Florence]

Hi @Moeed 

florence-streif.com

pw: cheat

thanks

Florence

[Moeed]

Hey @Florence 

Follow these Steps:

1) Go to Online Store
2) Edit Code
3) Find theme.liquid file

4) Add the following code in the bottom of the file above </body> tag

<style>
.header {
    background: transparent !important;
    max-width: 100% !important;
    position: absolute !important;
    width: 100% !important;
}
</style>

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

Best Regards,
Moeed

[Florence]

Hi @Moeed 

thanks that worked, however the banner does not go to the end of the screen now, there is still something white:

How can I make it go to the end of the first fold?

thanks for help!

Florence

[Moeed]

Hey @Florence 

Remove the previous code and this updated code.

<style>
.header {
    background: transparent !important;
    max-width: 100% !important;
    position: absolute !important;
    width: 100% !important;
}
div#Banner-template--22788933517635__image_banner {
     height: 100vh;
}
</style>

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

Best Regards,
Moeed

[Florence]

thanks that worked!

[Moeed]

Thank you for your reply. I'm glad to hear that the solution worked well for you. If you require any more help, please don't hesitate to reach out. If you find this information useful, a Like would be greatly appreciated.

[Florence]

@Moeed 

unfortunately there is now an issue with the menu when scrolling, it does not stick anymore, even thought I did not change the settings and it was sticky before adding your code. 

Thanks

Florence

[Florence]

also the breadcrumbs are in a different position now. 

[GTLOfficial]

Hello @Florence 

Go to online store ---------> themes --------------> actions ------> edit code------->base.css
and add this code at the end of the file.

media screen and (min-width: 990px) {
.header {
background-color: transparent !important;
position: absolute !important;
width: 100% !important;
}
}

and the result will be

If this was helpful, hit the like button and mark the job as completed.
Thanks

[Made4uo-Ribe · Accepted solution]

Hi @Florence 

Do you mea like this? 

If it is check this one. 

1. From your Shopify admin dashboard, click on "Online Store" and then "Themes"
2. Find the theme that you want to edit and click on "Actions" and then "Edit code".
3. In the "theme. Liquid" file. Find the </body> tag and paste the code below before the tag. 

{% if template == 'index' %}
<style>
div#Banner-template--22788933517635__image_banner {
     margin-top: -13vh;
     height: 100vh;
}
sticky-header.header-wrapper {
    background: transparent;
}

header.header.header--middle-left * {
    color: white;
}
</style>
{% endif %}

• And Save.
• This only change on hompage. 

Please don't forget to Like and Mark Solution to the post that helped you. Thanks!

[Florence]

Hi @Made4uo-Ribe 

thanks this one helped better than the other solutions. One thing that still does not work: the Menu is not readable on the entry page when scrolling (on the other pages it works) see photo - here it does not work, when I scroll down: 

here it works and you can still read the menu when scrolling:

on the entry page it overlaps with the content on the website. How can I make it readable? Is it even possible? Thanks!

Florence

[Florence]

@Made4uo-Ribe would be great if you can help me. Thanks!

[Made4uo-Ribe]

I am already expecting on the problem, that needs a another javascript what it will change the background color when it scrolled(you will need a developer for this. Or you need to set your header not to scroll. 

[Florence]

ok thanks