Hello,
How can I make my hero image full width? I want it to be present on my header too like to below eg. Shop link: https://yoursimpleliving.com/ psw:test27.
Thanks in advance 
1 Like
Please add the following code at the bottom of your assets/theme.css file.
.site-header { position: absolute !important; background-color: transparent !important;}
.site-header__mobile-nav {background-color: transparent !important;}
.site-nav__link { color: #fff !important;}
.site-nav__link--active .site-nav__label { border-bottom-color: #fff !important;}
Thanks!
1 Like
@Liz93 you can add some lines to the great code that @dmwwebartisan shared, so you can have a full height image and the search and card icon also white color.
/* full size image */
.hero--large {height: 750px !important;}
/* search and card icon white */
.btn--link { color: #fff !important;}
.site-header__account, .site-header__cart {color: white; !important;}
I hope this helps!
Thank you @dmwwebartisan this was very helpful, looks great on the home page! How can I prevent the header to overlap in the other pages?
Thank you @OUTSIDEGRID , I’ve added the line but nothing’s changed?
Please share store password.
hello @Liz93
please Go to Online Store->Theme->Edit code then go to assets/theme.css ->paste below code at the bottom of the file.
.template-product .main-content ,.template-collection .main-content , .template-cart .main-content , .template-password .main-content, .template-page .main-content {
padding-top:200px; !important;
}
.template-collection .site-header .grid .grid__item .site-nav a , .template-product .site-header .grid .grid__item .site-nav a,.template-cart .site-header .grid .grid__item .site-nav a,
.template-password .site-header .grid .grid__item .site-nav a , .template-page .site-header .grid .grid__item .site-nav a
{
color: #000000 !important;
}
1 Like
Please remove previous css code and add this new code
.template-index .site-header { position: absolute !important; background-color: transparent !important;}
.template-index .site-header__mobile-nav {background-color: transparent !important;}
.template-index .site-nav__link { color: #fff !important;}
.template-index .site-nav__link--active .site-nav__label { border-bottom-color: #fff !important;}
Thanks!
1 Like
Thank yo so much @Kinjaldavra
It worked! Thank you @dmwwebartisan 
Hi! I just entered this thread. It helped me a lot too! I wanted to know something. in my mobile version, when I deploy the hamburger menu it hides behind the hero. Any solutions? Thanks!
Always backup themes, files and notifications before making changes
Probably a z-index issue possible quickfix website unseen
.site-header__menu {
z-index: 10;
}
1 Like
Thank you @PaulNewton it worked!