Debut - How can I make hero image the background for header (Like in the Brooklyn theme)

Solved
New Member
3 0 0

Okay, so this is what I currently have with my Debut theme:

 debut.JPG

 

And this is what I want:

Brooklyn.JPG

 

I pulled the latter picture from adding the Brooklyn theme. I do however prefer the Debut theme, but I want the slide image to look like it's from the Brooklyn theme. The only difference is that in the Brooklyn theme, the image is background for the header. So, the question is, how can I make my slide image a background, instead of the white header, in the Debut theme?

 

0 Likes

Success.

Shopify Partner
566 122 186

@Bjarni_Petersen

 

Add following CSS at the last of your theme.scss.css file:

div#shopify-section-header {
    position: absolute;
    width: 100%;
}

.site-header__mobile-nav{
    background-color: transparent;
}

Let me know if you need more help for the same.

 

Thank you,

Tejas

Shopify Expert | Skype: tejas.nadpara
- Like and Mark as an Accepted Solution if reply helpful
- Feel free to contact me on support@hexaecommerce.com regarding any help
1 Like
New Member
3 0 0

Oh wow, you really saved me there Tejas!!!!!

I've been struggling with this for 2 days straight and was getting a few gray hairs, because I'm not too familiar with coding :P

 

If possible, do you know a way to make the text in the header on the homepage white? This means, that throughout the whole site, the header text is black, but for the homepage, it's white. Do you think that is possible?

 

Thank you so much!!

 

- Bjarni Petersen

0 Likes
New Member
3 0 0

Okay, so I was a little early to accept it as a solution. The code you gave me looks good on the homepage, but for every other page, it moved the contents up:

1.jpg

 

As you can see, the title has now become a part of the header, which is quite unfortunate.

Is there a solution for this?

0 Likes
Excursionist
22 0 0

Hi! @Tejas_Nadpara , I just tried the code, and it worked! pretty great! but here's a problem that I've never been able to solve... it is my mobile nav cuts off like that... do you have any solutions that can help me out? please...

IMG_10801.jpeg

0 Likes
New Member
2 0 1

To accomplish this, you require a few steps:

 

Open - theme.scss.liquid - from themes > edit code and scroll to the bottom to add new code.

 

To make this only happen on the home-page we first define this section (or any page template)

 

.template-index {
}

We then define that we only want to change the styles in the header section, our code now looks like:

 

 

.template-index {
      div#shopify-section-header {
}
}

Now we set some basic styles to get started.

 

This will move the header to the top, allowing the page body to flow under:

 

position: absolute;
width: 100%;

and this will make the background transparent:

 

 

.site-header__mobile-nav {
     background-color: transparent;	
}

 

Some optional things to change would be the font and button colors etc.

 

       font-weight:bolder;
       .site-nav__label
        {
            color:white;
        }
        a
        {
            color: white;
        }
        .site-nav__dropdown
        {
            background-color: black;
        }
        .btn--link, .site-nav__link
        {
            color:white; 
            font-weight:bolder;
        }
        .icon-close
      	{
       	color:black;
      	}
      	.mobile-nav__link, .mobile-nav__return-btn, .mobile-nav__sublist-link
      {
       color:black!important; 
      }

All together your code will look like:

 

 

.template-index
{
  
    div#shopify-section-header
  	{
        position: absolute;
        width: 100%;
        font-weight:bolder;

        .site-nav__label
        {
            color:white;
        }
        a
        {
            color: white;
        }
        .site-nav__dropdown
        {
            background-color: black;
        }
        .btn--link, .site-nav__link
        {
            color:white; 
            font-weight:bolder;
        }

	

  
		.site-header__mobile-nav
    	{
    		background-color: transparent;
  	
		}
      	.icon-close
      	{
       	color:black;
      	}
      	.mobile-nav__link, .mobile-nav__return-btn, .mobile-nav__sublist-link
      {
       color:black!important; 
      }
	}  
}

After doing all this, you will notice your mobile navigation is not accounting for the menu being moved, to overcome this open theme.js and search for:

 

$pageContainer.css (Hint: tap in the document then press ctrl-F to search)

 

change

 

translateMenuHeight 

to

 

 

(translateMenuHeight + 81)

where 81 is your header height, you can change this to your liking.

 

 

now do a search for:

translate3d 

and change

cache.$mobileNavContainer[0].scrollHeight

to

(cache.$mobileNavContainer[0].scrollHeight + 81)

Now everything should be working fine.

 

1 Like
New Member
2 0 1

Drume

 

YOU'RE A GENIUSS !!

SUPER AMAZING

 

a lot of thanks

 

1 Like
New Member
7 0 0

Hi, this may be a shot in the dark, but how can I change the drop-down text color for the home-page only?

0 Likes
New Member
2 0 1
It is in the code above already

.template-index
{
div#shopify-section-header
{
a
{
Color: black;
}
}
}


Some elements may be buttons (btn) so it's just a matter of inspecting the element in your browser, checking what it is and adding it to the above code inside these tags

div#shopify-section-header
{
}
0 Likes