Solved

Image with text overlay behind the navigation bar

mb_18
Excursionist
30 0 15

I use the Debutify theme and I want my "Image with text overlay" to be also displayed behind the navigation area, but only on the main page. How do I do that?
I tried using Photoshop to illustrate my problem. The first picture is what it looks like at the moment and the second picture shows how I would like it to be.

 

BeforeBefore

AfterAfter

Accepted Solutions (2)
Kinjaldavra
Shopify Partner
2302 570 1422

This is an accepted solution.

remove old code and insert this code 

 

.template-index .site-header{
    position: relative;
    background-color: #b1a9a900 !important;
    z-index: 10;
    border-bottom: transparent !important;
}
.template-index .drawer-page-content{
    position: absolute;
    top: 0;
    width: 100%;
 }
.template-index .site-header .site-header__mobile-nav{
  background-color: #b1a9a900 !important;
 }

 

 

View solution in original post

Kinjaldavra
Shopify Partner
2302 570 1422

This is an accepted solution.

please Go to Online Store->Theme->Edit code then go to assets/theme.css ->paste below code at the bottom of the file.

.template-index .site-header  .grid  #AccessibleNav .site-nav li .site-nav__link .site-nav__label{
	color:#ffffff !important
}
.template-index .site-nav__link--active .site-nav__label {
    border-bottom-color: #ffffff !important;
}
.template-index  .site-header .site-header__icons .site-header__icons-wrapper .site-header__search-toggle .icon-search{
	fill:#ffffff !important 
}
.template-index  .site-header .site-header__icons .site-header__icons-wrapper .site-header__cart .icon-cart{
	fill:#ffffff !important 
}

 

View solution in original post

Replies 7 (7)

Kinjaldavra
Shopify Partner
2302 570 1422

Please provide website url and if your store is password protected then also provide password So I will check and provide a solution here.

mb_18
Excursionist
30 0 15

https://besi-artwork.myshopify.com/

PW: hello18shop12536

 

Thank you

Kinjaldavra
Shopify Partner
2302 570 1422

please Go to Online Store->Theme->Edit code then go to assets/theme.css ->paste below code at the bottom of the file.

.site-header{
    position: relative;
    background-color: #b1a9a900 !important;
    z-index: 10;
    border-bottom: transparent !important;
}
 .drawer-page-content{
    position: absolute;
    top: 0;
    width: 100%;
 }

 

mb_18
Excursionist
30 0 15

Thanks for this solution. The problem is now that the navigation bar is white and not transparent and that you cant see the prices anymore on the other pages for example here https://besi-artwork.myshopify.com/products/simpsons-artwork

Kinjaldavra
Shopify Partner
2302 570 1422

This is an accepted solution.

remove old code and insert this code 

 

.template-index .site-header{
    position: relative;
    background-color: #b1a9a900 !important;
    z-index: 10;
    border-bottom: transparent !important;
}
.template-index .drawer-page-content{
    position: absolute;
    top: 0;
    width: 100%;
 }
.template-index .site-header .site-header__mobile-nav{
  background-color: #b1a9a900 !important;
 }

 

 

mb_18
Excursionist
30 0 15

Wow its perfect now. Thank you. Can you tell me how to change the text color of the menus on the main page to white only? Because if the text color of the navigation bar is changed on all pages, you will not be able to see the menu items because the background color on the other pages is white.

 
Kinjaldavra
Shopify Partner
2302 570 1422

This is an accepted solution.

please Go to Online Store->Theme->Edit code then go to assets/theme.css ->paste below code at the bottom of the file.

.template-index .site-header  .grid  #AccessibleNav .site-nav li .site-nav__link .site-nav__label{
	color:#ffffff !important
}
.template-index .site-nav__link--active .site-nav__label {
    border-bottom-color: #ffffff !important;
}
.template-index  .site-header .site-header__icons .site-header__icons-wrapper .site-header__search-toggle .icon-search{
	fill:#ffffff !important 
}
.template-index  .site-header .site-header__icons .site-header__icons-wrapper .site-header__cart .icon-cart{
	fill:#ffffff !important 
}