# Adjust header image to fill top of "slide in" screen

**URL:** <https://community.glideapps.com/t/adjust-header-image-to-fill-top-of-slide-in-screen/80173>\
**Category:** Ask for Help\
**Tags:** custom-css, custom-code\
**Created:** [February 19, 2025, 3:49pm UTC](https://community.glideapps.com/t/adjust-header-image-to-fill-top-of-slide-in-screen/80173 "2025-02-19T15:49:31Z")\
**Posts on this page:** 9\
**Page:** 1

<div class="post-metadata">

**Author:** ![AndrewJ](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/andrewj/32/84903_2.png) [@AndrewJ](https://community.glideapps.com/u/AndrewJ)\
**Post date:** [February 19, 2025, 3:49pm UTC](https://community.glideapps.com/t/adjust-header-image-to-fill-top-of-slide-in-screen/80173/1 "2025-02-19T15:49:31Z")

</div>

Hey all, I’m wanting to move the header image up to fill the white space seen in this picture below. I was able to use CSS to accomplish this on a “main view”, but I haven’t been able to replicate this on the “slide in” view for a new screen. The second picture below is where i successfully accomplished this in the “main view.”

Is anyone here a CSS god who could lend me a hand? I tried making the margin-top negative and I tried increasing it’s “z-index” without success. Thanks all!

 ![image](https://us1.discourse-cdn.com/flex002/uploads/glideapps/original/3X/7/0/702c2d697988b88bbf9d15a024aa8ee44003c36d.jpeg)

 ![image](https://us1.discourse-cdn.com/flex002/uploads/glideapps/original/3X/8/d/8df51ceb10ad8a95b425e41aacf8918b1a94df0f.jpeg)

---

<div class="post-metadata">

**Author:** ![Jeff\_Hager](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/jeff_hager/32/43_2.png) [@Jeff\_Hager](https://community.glideapps.com/u/Jeff_Hager)\
**Post date:** [February 19, 2025, 4:32pm UTC](https://community.glideapps.com/t/adjust-header-image-to-fill-top-of-slide-in-screen/80173/2 "2025-02-19T16:32:22Z")

</div>

Tried to figure this out as well last night with no luck. I have a similar but slightly different case. In my case, I have an overlay and I just want to apply the theme accent color to the top bar of the overlay or remove it entirely. The top container inside my overlay uses the accent background color. Not sure about the slide-in, but overlays also have a persistent white bar at the bottom too. Those white bars looks so out of place if you’re using any sort of color or image at the top or bottom.

---

<div class="post-metadata">

**Author:** ![ThinhDinh](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/thinhdinh/32/49_2.png) [@ThinhDinh](https://community.glideapps.com/u/ThinhDinh)\
**Post date:** [February 20, 2025, 12:56am UTC](https://community.glideapps.com/t/adjust-header-image-to-fill-top-of-slide-in-screen/80173/3 "2025-02-20T00:56:07Z")

</div>

For @AndrewJ .

 ![CleanShot 2025-02-20 at 07.56.31](https://us1.discourse-cdn.com/flex002/uploads/glideapps/original/3X/c/c/ccb42644da0c7c799b80529bfe646289b03db287.jpeg)

My setup is a container with custom class name slide-in-container.

 ![CleanShot 2025-02-20 at 07.55.43](https://us1.discourse-cdn.com/flex002/uploads/glideapps/original/3X/7/3/73a4e66533278449ceb86ab082b6f8f5ea764649.png)

```auto
.sidebar-overlay:has(.slide-in-container) div[class*="chrome-common___StyledDiv"] {
display: none;
}

.sidebar-overlay:has(.slide-in-container) div[class*="slide-in-content___StyledDiv8"] {
margin-top: 0px !important;
}

```

---

<div class="post-metadata">

**Author:** ![ThinhDinh](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/thinhdinh/32/49_2.png) [@ThinhDinh](https://community.glideapps.com/u/ThinhDinh)\
**Post date:** [February 20, 2025, 12:57am UTC](https://community.glideapps.com/t/adjust-header-image-to-fill-top-of-slide-in-screen/80173/4 "2025-02-20T00:57:57Z")

</div>

![CleanShot 2025-02-20 at 07.57.40](https://us1.discourse-cdn.com/flex002/uploads/glideapps/original/3X/2/8/2815c8935147df5c0a30214dabfe96cfd3417e73.jpeg)

Adding this to cover the mobile case.

```auto
.sidebar-overlay:has(.slide-in-container) div[class*="chrome-common___StyledDiv"] {
display: none;
}

.sidebar-overlay:has(.slide-in-container) div[class*="slide-in-content___StyledDiv8"] {
margin-top: 0px !important;
}

.sidebar-overlay:has(.slide-in-container) div[class="sheet"] {
margin-top: 0px !important;
}

```

Basically I tried to remove that header altogether, and you will have to include a close button somewhere. Clicking out of the slide in also gets you out, though.

---

<div class="post-metadata">

**Author:** ![ThinhDinh](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/thinhdinh/32/49_2.png) [@ThinhDinh](https://community.glideapps.com/u/ThinhDinh)\
**Post date:** [February 20, 2025, 1:17am UTC](https://community.glideapps.com/t/adjust-header-image-to-fill-top-of-slide-in-screen/80173/5 "2025-02-20T01:17:07Z")

</div>

For @Jeff_Hager

 ![CleanShot 2025-02-20 at 08.16.52](https://us1.discourse-cdn.com/flex002/uploads/glideapps/original/3X/0/e/0ebc63d200de09e20f6176ffbcb88f848716f4e5.png)

 ![CleanShot 2025-02-20 at 08.16.31](https://us1.discourse-cdn.com/flex002/uploads/glideapps/original/3X/4/3/430ac9626c8904b7de8b2bb17f73465de92b82fb.jpeg)

```auto
div[class*="overlay-content___StyledMDiv"]:has(.overlay-container) div[class*="chrome-common___StyledDiv"] {
display: none;
}

#app-root:has(.overlay-container) header[class*="mobile-nav-bar___StyledHeader"] {
display: none;
} 

```

---

<div class="post-metadata">

**Author:** ![Jeff\_Hager](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/jeff_hager/32/43_2.png) [@Jeff\_Hager](https://community.glideapps.com/u/Jeff_Hager)\
**Post date:** [February 20, 2025, 5:53am UTC](https://community.glideapps.com/t/adjust-header-image-to-fill-top-of-slide-in-screen/80173/6 "2025-02-20T05:53:59Z")

</div>

Thanks @ThinhDinh. What you posted didn’t work for me for desktop or mobile as is, but it definitely got me on the right track. Not sure why, unless it’s because my overlay is a form??? But for the desktop version, if I remove only the following line and leave the rest, desktop mode works for me.

```auto
div[class*="overlay-content___StyledMDiv"]:has(.overlay-container)

```

For mobile, if I remove only the following line, it also works.

```auto
#app-root:has(.overlay-container)

```

I decided to go a different route and keep the top bar, but change the background color and text color, which I think I like better. This is what I have at the moment for the desktop version.

```auto
//Overlay - Accent top bar
div[class*="chrome-common___StyledDiv"], span[class*="chrome-common___StyledSpan"], button[class*="chrome-common___StyledButton"] {
background-color: var(--gv-accent); 
color: rgb(230, 230, 230, 1);
}

```

Which results in this.

 ![image](https://us1.discourse-cdn.com/flex002/uploads/glideapps/original/3X/7/d/7d34b4de21793f523fb758906e0aaecdfb5b80f6.png)

I think I’ll hold off on mobile because since I still need the form buttons in the top bar.

Thanks again.

---

<div class="post-metadata">

**Author:** ![ThinhDinh](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/thinhdinh/32/49_2.png) [@ThinhDinh](https://community.glideapps.com/u/ThinhDinh)\
**Post date:** [February 20, 2025, 8:36am UTC](https://community.glideapps.com/t/adjust-header-image-to-fill-top-of-slide-in-screen/80173/7 "2025-02-20T08:36:59Z")

</div>

> [@Jeff\_Hager](#):
>
> What you posted didn’t work for me for desktop or mobile as is, but it definitely got me on the right track. Not sure why, unless it’s because my overlay is a form???

I think it’s because that part is using a custom class name (overlay-container). I name the top container that way so that not all your overlays are treated the same, only the one that has the container will apply.

---

<div class="post-metadata">

**Author:** ![Himaladin](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/himaladin/32/71023_2.png) [@Himaladin](https://community.glideapps.com/u/Himaladin)\
**Post date:** [February 20, 2025, 11:43am UTC](https://community.glideapps.com/t/adjust-header-image-to-fill-top-of-slide-in-screen/80173/8 "2025-02-20T11:43:39Z")

</div>

> [@Jeff\_Hager](#):
>
> `//Overlay - Accent top bar`

Be careful with your double slash code. If this is what you are using then many strange things will happen. 😉

---

<div class="post-metadata">

**Author:** ![Jeff\_Hager](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/jeff_hager/32/43_2.png) [@Jeff\_Hager](https://community.glideapps.com/u/Jeff_Hager)\
**Post date:** [February 20, 2025, 1:03pm UTC](https://community.glideapps.com/t/adjust-header-image-to-fill-top-of-slide-in-screen/80173/9 "2025-02-20T13:03:45Z")

</div>

> [@ThinhDinh](#):
>
> I name the top container that way so that not all your overlays are treated the same, only the one that has the container will apply

Ah, ok. Didn’t realize you added a class name.

> [@Himaladin](#):
>
> double slash code

Yeah I was just using it for comments. Didn’t seem to be causing issues, but I’ll switch it to `/* */`