How to change the size of the header (Debut Template)

[AmericoDiCola]

Please,

1. How to change the size of the header (Debut Template) its to big for me, how can i edit the Height?
2. How to change the color of the header and the bottom to black and the body background to white?

thanks for your time, i appreciate it.

[May]

Hi, there!

This is May from Shopify.

Those are some good questions! You can make these changes by editing your theme settings and your theme code. Below are the steps on how to make these changes:

1. Changing the size of the header on Debut Theme.

• First, you’ll want to log in to your admin, and open ‘Online Store > Customize’.

• On the menu to the left, click ‘Header’. If you have a logo uploaded, you can customize your logo size, and it will automatically change the height of the header.

If you don’t have a logo, or if you only want to adjust the height, you’ll need to edit your theme code. Before making any code changes, I strongly recommend duplicating your theme, to ensure that your customers aren’t affected if you see any unintended results! After you duplicate you theme, you can proceed with the steps below:

• From your admin, go to ‘Online Store > Actions > Edit Code’.

• Then, you’ll see a list of folders on the left. Inside your ‘Assets’ folder, select ‘theme.scss.liquid’.  

• In that file, search for ‘site-header {‘, and add ‘height: [your height size here];’. This is what your code should look like:

• Click ‘Save’.

2. Changing the color of the header, footer and body

To change the color of your header and footer, you’ll also need to edit your theme code.

Changing the header color

• In the same file and section as above, you’ll want to edit your ‘background-color’. Replace ‘background-color: $color-body;’ with ‘background-color: #000;’. #000 is a hex color value for black. If you’d like to change this color in the future, you can replace #000 with your desired color.

• Your final ‘.site-header’ code should look like:

.site-header {
 height: 100px; /**adjust your height size here**/
 background-color: #000;
 position: relative;
 padding: 0 $gutter-site;

 @include media-query($small) {
   border-bottom: 1px solid $color-border;
   padding: 0;
 }

 @include media-query($medium-up) {
   &.logo--center {
     padding-top: $grid-gutter;
   }
 }
}

• Click ‘Save’.

Changing the footer color

• In the same file, ‘theme.scss.liquid’, search for ‘.site-footer’, and add this line: ‘background-color: #000;’.

• When you add this color, you’ll see that the padding and margin has shifted. To fix this, you’ll want to remove this line: ‘margin: $section-spacing 0;’ and add these two lines: ‘margin-top: $section-spacing;’ and ‘padding-bottom: $section-spacing;’

• After the edits, your final ‘.site-footer’ code should look like:

.site-footer {
 background-color: #000;
 margin-top: $section-spacing;
 padding-bottom: $section-spacing;

 @include media-query($small) {
   text-align: center;
 }
}

• Click ‘Save'.

Changing the body color

• You can change the body color from your theme settings. From your admin, click on ‘Online Store > Customize’.

• On the left side, select ‘Theme Settings > Colors’.

• Scroll down to the bottom and find ‘Background’. Changing this color will change the body background color.

• Click ‘Save’.

It’s important to note that the 'theme.scss.liquid' can’t be reverted back to older versions, so it would be best to speak with a developer directly if you’re unsure of how to make this change. Since you are using a theme made by Shopify, if your account is eligible, our theme support may be able to look into making the change as well.

Let me know if this helps. Feel free to reply back to this thread or contact our 24/7 support, and we’ll happily help!

Kind Regards,

May

Shopify Support

[Iana_Iakovenko]

Hi May,

I have the same issue. I would like to change the size of header. make it not as tall as it is at the moment. 

the problem is my codding looks different from what you showed.

.site-header {
background-color: $color-body;
position: relative;
padding: 0 $gutter-site;

@include media-query($small) {
border-bottom: 1px solid $color-border;
padding: 0;
}

@include media-query($medium-up) {
&.logo--center {
padding-top: $grid-gutter;
}
}
}

it doesn't have height at all. :(

Could you please help?

I also have Debut Theme.

 Thanks,

Iana

[huntrmia]

I did that same theme same everything but then the div that contains the menu does not change size, the one that contains it changes tho. so it still looks same height but with a smaller div behind it

[shara09]

it doesn't give me  that choice to resize

i just want my header to be skinner its too big for me

[strapc]

Hey guys i am having the exact same issue, after changing the header size to 75px now the background that contains the menu is bigger and did not change size with header.

i have attached the picture of my header.

1 Like

[mwtrunk]

Have you found a way to fix the background that won't change with the header? 

[PeterJSY]

Thanks.

The change to the colour of the header leaves the whole of the inside still white using the Debut Theme?

Any idea?

[pkt]

I have the same problem

this thing is creating the problem, what to do?

[JoshStewartBloc]

Hi there,

I am having issues with trying to change the colour of the header. I followed the code that you posted before however It has only changed part of the header. Please can anyone help with this please.