How can I extend my image banner to the top of the page (behind the menu) on all pages?

Technical Q&A
, , , ,

Topic summary

A user wants to extend image banners behind the navigation menu across all pages of their Shopify store, not just the homepage. The solution involves modifying CSS code by adding a negative margin-top value to the banner class:

.banner.banner--content-align-center {
    margin-top: -200px;
}

Follow-up issue resolved: The dropdown menu had unwanted white space underneath. This was fixed by adding negative margin to the mega-menu content:

.mega-menu[open] .mega-menu__content {
    margin-top: -25px;
}

Ongoing challenges: Multiple users with Dawn theme are experiencing:

  • Difficulty replicating the effect beyond the homepage
  • “Too many CSS” errors when applying to all pages
  • Extra spacing at the bottom of image banners creating gaps between sections

One user shared their store URL (adawellness.ie) and collaboration code (8289) seeking assistance with these Dawn-specific implementation issues. A helper acknowledged that newer Dawn theme versions require different approaches but the thread remains open without a complete solution for Dawn users.

Summarized with AI on October 24. AI used: claude-sonnet-4-5-20250929.
1

Hello,

How can I extend my image banner to the top of the page (behind the menu) on all pages, not just the home page? I was able to get my homepage to do what I’m trying to do with the image banner, but can’t replicate it to all pages. I’d like this effect site-wide so each image banner at the top of all pages extends to the top.

Please help! Thank you in advanced!

1 Like
2

Hi @madisonrome

Do your other pages have image banners as well? If so, please share your store URL so I can take a look. Thanks!

3

Yes! Thank you so much. My site is: https://madrome.co/

You’ll see on the Contact, About, FAQ, etc. each has an image banner at the
top.

4

Thanks, I see that you a code that is margin-top:

Made4uoRibe_0-1739997108062.png
Made4uoRibe_0-1739997108062.png413×107 2.55 KB

Replace on this code below.

.banner.banner--content-align-center {
    margin-top: -200px;
}

And Save.

Result:

Made4uoRibe_1-1739997155237.png
Made4uoRibe_1-1739997155237.png1289×500 297 KB

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

1 Like
5

Hi!

If you wouldn’t mind helping again, what code can I add so that my drop down menu doesn’t have any white space underneath it? Here is my link: https://madrome.co/

Thank you!!

6

Hello,

Im sorry, i didnt get what you mean. You have some sample pictures of the problem?

7

Yes of course! You see the drop down menu falls far below the menu itself?
There is a gap in the white space.

[image: Screenshot 2025-02-27 at 11.21.07 AM.png]

8

I cant see the image, do you mean this space?

Made4uoRibe_0-1740673641062.png
Made4uoRibe_0-1740673641062.png526×125 62.9 KB

from the nav.menu and the dropdown? The space is the height of the header. If you like lesser space you can add this code below.

  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 “Assets” folder, click on “base.css, style.css or theme.css” file, depending on which file your theme uses to store its CSS styles. At the bottom of the file, add the following CSS code:
.mega-menu[open] .mega-menu__content {
    margin-top: -25px;
}

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

1 Like
9

Thank you!!! This is just what I was looking for!

1 Like
10

Hi, I am trying to do this just for my homepage Dawn Theme but I haven’t been able to do it at all and some of the instructions are really confusing me. Can anybody please help. I want the image banner to sit behind my Menu.

11

Hey @UserAD1610,

You are right. This is happen because of the new version of the Dawn theme.

By any chance can you please share your store url and collab code so that I can implement the same feature in your Dawn theme.

Waiting to hear back from you.

Thanks

12

Hi I am having the same problem, i have it on the homepage, but it says I have too many CSS, to put it on all pages. Also There is extra space at the bottom of my image banner on the homepage that is making a huge gap between my sections. Can anybody help please. This is my store url https://adawellness.ie and collabaroation code is 8289

13

Hi, just wondering how on Dawn theme you can get the image to apply on all pages behind the menu. Currently only have it on the homepage and need it on all pages. There’s also extra space that is appearing at the bottom of the one on the homepage which is making extra space between the sections.Any tips?

14

This is the store url https://adawellness.ie