Making header transparent/have slideshow as background on Empire Theme

Technical Q&A
1

Hello, I’m trying to make my Empire Theme header transparent/have a slideshow or image the background. I’ve attached images below of examples.

Website: cleanergarage.com

Password:2013

Thank you!

Screenshot_53.jpg
Screenshot_53.jpg1904×605 67.2 KB

Screenshot_62.jpg
Screenshot_62.jpg1869×581 67.5 KB

1 Like
2

@kqxer

add this code

  1. Go to Online Store->Theme->Edit code
  2. Asset->/theme.css ->paste below code at the bottom of the file.
.template-index.site-header-sticky .site-header {
    position: absolute;
    top: 48px;
}
.template-index .site-navigation.site-navigation, .template-index .site-navigation-wrapper, .template-index .site-header-main, .template-index .site-header-wrapper {
    background: transparent;
}

yes, please confirm this look only home page

KetanKumar_0-1664975903843.png
KetanKumar_0-1664975903843.png1898×870 253 KB

3

Thanks for the response.

Yes it’s only for the home page. However, when I scroll down the sticky header doesn’t work. Also, would it be possible to have the header turn white when you start scrolling down?

vid.gif

1 Like
4

@kqxer

yes, its possible to make customization code like this

https://codepen.io/JGallardo/pen/ZEBbeP

5

hi there, I’m also looking to make my site’s header transparent on the front page and this code did not work. I followed the instructions, promise. Is there anything I need to do differently?