Hero Banner in den Hintergrund des Menüs setzen

Store Design
1

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:

Florence_0-1722336870433.png
Florence_0-1722336870433.png3653×1776 952 KB

Kann mir jemand sagen wie ich das ändern kann?

Danke!

Florence

2

Hey @Florence_4

Share your Store URL and Password if enabled.

Best Regards,

Moeed

3

Hi @Moeed

pw: cheat

thanks

Florence

4

Hey @Florence_4

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 tag

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

Best Regards,
Moeed

5

Hello @Florence_4

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

10.png
10.png1190×655 915 KB

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

6

Hi @Florence_4

Do you mea like this?

Made4uoRibe_0-1722338258840.png
Made4uoRibe_0-1722338258840.png1258×806 350 KB

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 tag and paste the code below before the tag.
{% if template == 'index' %}

{% endif %}
  • And Save.
  • This only change on hompage.

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

7

Hi @Moeed

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

Florence_0-1722339098189.png
Florence_0-1722339098189.png3647×1761 1.05 MB

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

thanks for help!

Florence

8

Hey @Florence_4

Remove the previous code and this updated code.

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

Best Regards,
Moeed

9

thanks that worked!

10

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.

11

@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.

Florence_0-1722340663426.png
Florence_0-1722340663426.png3309×1603 471 KB

Thanks

Florence

12

also the breadcrumbs are in a different position now.

Florence_1-1722340744236.png
Florence_1-1722340744236.png1875×1031 159 KB

13

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:

Florence_0-1722423113409.png
Florence_0-1722423113409.png2376×1088 346 KB

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

Florence_1-1722423291461.png
Florence_1-1722423291461.png2459×1347 429 KB

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

Florence

14

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

15

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.

16

ok thanks