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!
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.
For @AndrewJ .
My setup is a container with custom class name slide-in-container.
.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;
}
Adding this to cover the mobile case.
.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.
For @Jeff_Hager
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;
}
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.
div[class*="overlay-content___StyledMDiv"]:has(.overlay-container)
For mobile, if I remove only the following line, it also works.
#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.
//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.
I think I’ll hold off on mobile because since I still need the form buttons in the top bar.
Thanks again.
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.
Be careful with your double slash code. If this is what you are using then many strange things will happen. 
Ah, ok. Didn’t realize you added a class name.
Yeah I was just using it for comments. Didn’t seem to be causing issues, but I’ll switch it to /* */
