Broadcast Theme: Navigation Menu Help

[sorellallc]

Hi! I'm trying to figure out how to remove a gap on my websites home page, in the header above the slideshow section. This is only a problem on mobile view, and it's also not a padding issue. From what I can tell, when looking at the "mobile menu" section, it's dead space left over from the navigation menu select. When I deselect this option, it disappears and leaves a white space in its place. I'd like for the white space to be gone when the menu disappears as well. I have no use for this style menu on mobile because I already have the hamburger style one on the left side.

I'm using the broadcast "clean" theme, which was uploaded not installed - I had a graphic designer set up the site but I'm no longer working with them, plus they did not know how to fix the issue lol.

I noticed the theme files were modified (code was either added or removed) but I don't know much about that to change anything myself! Any help would be appreciated! My website is www.sorellaofficial.com

I've had a few people try to give me some solutions on another post but none worked and they cut the banner 3/4 its size...I'd like to keep everything as it is, just remove the white part! Thanks 

[PaulNewton]

Hi @sorellallc 👋 Avoid duplicate posts.

From this duplicate post https://community.shopify.com/c/shopify-discussions/broadcast-theme-how-to-remove-gap-between-header...

If free code help that's already been given doesn't fix things hire someone to actually fix it.

Basic troubleshooting

• If theme code has been modified check the site in an html validator for errors https://validator.w3.org/ .
• Check a fresh install of the theme to see if this is an issue in the theme itself, if so contact the themes developers to report a bug.

Otherwise it's probably from theme customizations or apps.

Merchants that need theme repair services can contact me.
Contact info in forum signature below ⬇ ⬇ ⬇.
ALWAYS please provide context, examples: store url, theme name, post url(s) , or any further detail in ALL correspondence.

[loptimisator]

Hello,

I took a look, and the issue on mobile is caused by this line in your header.liquid (or possibly another header-related file):

<div class="header__backfill" data-header-backfill=""></div>

This element is essentially empty and doesn't serve a functional purpose — but it still takes up vertical space, which is why you’re seeing that white gap above your slideshow.

---

How to fix it:

 

1. Safest approach — hide it with CSS:

Add this to your theme’s CSS file (likely base.css or theme.css):

.header__backfill {
    display: none;
}

✔️ Tested, cleanly remove the space without affecting anything else on the homepage or layout.

Cheers!

Edit: As @PaulNewton mentionned about the duplicate post, https://community.shopify.com/c/shopify-discussions/broadcast-theme-how-to-remove-gap-between-header...:

=> The solutions provided in the initial post also work. Not sure why the duplication.

[Guleria · Accepted solution]

Hello @sorellallc ,

Follow these steps:

1. Go to Online Store -> Theme -> Edit code

2. Open your theme.css file and paste the following code at the bottom:

.header__backfill {
    display: none;
}
div#shopify-section-template--20982533194031__slideshow {
    padding-top: 11%;
}

Regards
Guleria

[sorellallc]

Thank you so much! This solution worked the best for me. 

[Dan-From-Ryviu]

Please go to your store admin > Sales channels > Online Store > Themes > Customize > Theme settings > in Custom CSS, add this code and then click Save button

@media (max-width: 749px) {
    .header__backfill {
        height: auto !important;
    }

[tim]

I do not quit follow the logic of the theme code -- it could be that your header height is modified with some custom CSS, but theme code is not aware of this and assigns wrong size to CSS variables...

So yes, you can hide the header_backfill element or set its height to 0, but it is used for sticky header functionality, which would not work if you do this.

My suggestion is to rather use this code -- you can put it into "Theme settings"=> "Custom CSS"

.js .header__backfill {
  height: var(--header-height);
}

Theme has JS code which updates this variable to match header height for different screen widths.