Image with text overlay behind the navigation bar

Solved
mb_18
Excursionist
20 0 7

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

0 Likes
Natztech
Shopify Partner
646 175 432

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

Want to theme customize contact us E-mail : natztech2312@gmail.com
If helpful then please Like and Accept as Solution

PageFly Advanced Page Builder- My favorite drag and drop page builder - Visit the Shopify app store
0 Likes
mb_18
Excursionist
20 0 7

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

PW: hello18shop12536

 

Thank you

0 Likes
Natztech
Shopify Partner
646 175 432

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%;
 }

 

Want to theme customize contact us E-mail : natztech2312@gmail.com
If helpful then please Like and Accept as Solution

PageFly Advanced Page Builder- My favorite drag and drop page builder - Visit the Shopify app store
mb_18
Excursionist
20 0 7

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

0 Likes
Natztech
Shopify Partner
646 175 432

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;
 }

 

 

Want to theme customize contact us E-mail : natztech2312@gmail.com
If helpful then please Like and Accept as Solution

PageFly Advanced Page Builder- My favorite drag and drop page builder - Visit the Shopify app store
mb_18
Excursionist
20 0 7

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.

 
0 Likes
Natztech
Shopify Partner
646 175 432

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 
}

 

Want to theme customize contact us E-mail : natztech2312@gmail.com
If helpful then please Like and Accept as Solution

PageFly Advanced Page Builder- My favorite drag and drop page builder - Visit the Shopify app store