Separate header and slidehow in impulse theme

Store Design
,

Topic summary

A user wants to visually separate the header menu from the slideshow section in their Shopify Impulse theme, creating two distinct areas instead of an overlapping design.

Solution provided:

  • Add custom CSS to the theme.css file to modify header positioning and styling
  • Initial code creates separation but causes visual issues due to parallax background settings and color contrast problems

Implementation steps:

  1. Set header wrapper to static positioning with white background
  2. Change navigation link color to black (#000)
  3. Add !important flag to ensure color changes override existing styles on the homepage

Outcome:
The customization successfully separates the header from the slideshow. Minor text visibility issues on the homepage (white text on white background) were resolved by forcing the navigation link color with the !important declaration.

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

hi,

i want to separate my menu and my slidehow, to have 2 distinct parts

Thank you :slightly_smiling_face:

jeycherries_2-1674730857482.png
jeycherries_2-1674730857482.png1202×742 736 KB

to have something like this

jeycherries_1-1674730844222.png
jeycherries_1-1674730844222.png1227×594 341 KB

2

@jeycherries - can you please share your website link?

3

https://jeycherries.com/

4

@jeycherries - it can be made like this, but due to background image parallax settings, it has glitches

suyash1_0-1674735171099.png
suyash1_0-1674735171099.png1366×768 187 KB

5

ok i see but how i do this ? can i change the color to white ?

6

@jeycherries - add this css to the very end of your theme.css file and check, should look like below

.header-wrapper--sticky {position: initial; background: #fff;}
.site-nav__link{color: #000;}

suyash1_0-1674737884659.png
suyash1_0-1674737884659.png1366×768 190 KB

1 Like
7

Ok it works but my texts is blank on blank now :confused: On others page it’s fine, on home page the changing color doesn’t work.

jeycherries_0-1674740550429.png
jeycherries_0-1674740550429.png1199×341 72.6 KB

8

@jeycherries - add !important and check

.site-nav__link{color: #000 !important;}
1 Like
9

It works ty very much :slightly_smiling_face: