How can I stop the sticky header from being inset in Mode Theme?

Store Design
, , ,

Topic summary

A user is experiencing an issue with the Mode theme’s sticky header becoming inset (approximately 5px on sides and top) with a shadow when scrolling. They want the header to remain full-width without inset or shadow, and need their custom bottom border to extend the full width.

Current behavior:

  • Fixed position: header appears correct but bottom border doesn’t span full width
  • Scrolling position: header becomes inset with visible shadow
  • Custom CSS only includes border and padding modifications

Solution provided:
A support member offered CSS code to be added to the theme.liquid file (above the tag). However, implementation is blocked because the user is on a trial version of the theme, which restricts code editing until purchase.

Status: The user plans to implement the solution after purchasing and publishing the theme, then will report back on whether it resolves the issue. The discussion remains open pending confirmation of the fix.

Summarized with AI on November 17. AI used: claude-sonnet-4-5-20250929.
1

Is there a way to stop the sticky header from being inset? I want the header to be full width with no inset and no shadow, and also want the bottom border I’ve added to be full width.

It only becomes inset (by approx 5px sides and top, with a shadow) when scrolling. When in it’s fixed it isn’t inset, however the bottom border I’ve added doesn’t cover the full width and seems to obey that underlying inset that shows up on scrolling. Please see screenshots below.

Fixed position (inset only showing on bottom border)

Screen Shot 2023-08-30 at 11.56.26 am.png
Screen Shot 2023-08-30 at 11.56.26 am.png824×398 7.31 KB

Scrolling position (inset on sides and top, shadow visible)

Screen Shot 2023-08-30 at 11.56.43 am.png
Screen Shot 2023-08-30 at 11.56.43 am.png890×542 215 KB

The only custom CSS on the header is currently:

For the border and padding:

.card {
border-bottom: 1px solid #000000;
padding-bottom: 15px;
padding-top: 15px;
}

Thanks in advance :slightly_smiling_face:

2

Hi @M-A-S ,

This is David at SalesHunterThemes.

I read your problem and it seems that I need to analyze your website to provide the solution here.

Would you please share your website URL

if your website is password protected then also provide the password.

David | SalesHunterThemes team.

3

Thanks @David_SHT , the Mode theme is just on a trial at the moment so not published or viewable unless logged in. Thanks anyway!

4

Hi @M-A-S
You can share your theme preview:

David_SHT_0-1693369198264.png
David_SHT_0-1693369198264.png2858×1610 292 KB

5

Ah, Thanks @David_SHT !! I’ve sent you a message with the link and password, cheers for your help thus far, I appreciate you taking a look :slightly_smiling_face:

6

Hi @M-A-S ,

You can try to follow these steps:

Go to Online Store → Themes → Actions → Edit code.

Go Assets folder → theme.liquid file.

Add the following code in the bottom of the file above tag

David_SHT_0-1693371022044.png
David_SHT_0-1693371022044.png2866×1426 178 KB

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

David | SalesHunterThemes team

7

Thanks @David_SHT - this seems like it should work though I think I can only edit the theme code once I purchase (and possibly publish) the theme! I’ll definitely check back in at that point and let you know how I went and “accept as solution” if it works (which I think it will). Appreciate your assistance!

8

You’re very welcome! I’m glad I could help. Best of luck with your theme purchase, customization, and publishing.