how to make transparent header on concept theme by roartheme

Store Design
, , ,

Topic summary

A user is trying to enable a transparent header on the Concept theme by RoarTheme for a slideshow section, as the theme only supports this feature with video overlays by default. They also want to remove side spacing to make the slideshow full-width.

Proposed Solutions:

  • Transparent Header: Add CSS to force the header to be transparent and positioned absolutely on the homepage
  • Full-Width Slideshow: Apply CSS to remove padding/margins and set width to 100vw

A community member provided specific CSS code snippets for both customizations, targeting .template-index .header-wrapper and .slideshow-section classes.

Current Status: The discussion remains unresolved—the original poster reported that the suggested CSS solutions did not work as expected.

Summarized with AI on October 31. AI used: claude-sonnet-4-5-20250929.
3

don’t know why my previous response doesn’t show up correctly but here:

opt1:

.template-index .header-wrapper {
background: transparent !important;
position: absolute;
width: 100%;
z-index: 999;
}

opt2:

.slideshow-section {
max-width: 100vw !important;
width: 100% !important;
padding: 0 !important;
margin: 0 auto !important;
}
.slideshow__slide {
width: 100% !important;
}