# Change height of header with the blog title?

**URL:** <https://colorlibsupport.com/t/change-height-of-header-with-the-blog-title/19158>\
**Category:** Shapely\
**Created:** [November 27, 2017, 10:46am UTC](https://colorlibsupport.com/t/change-height-of-header-with-the-blog-title/19158 "2017-11-27T10:46:21Z")\
**Posts on this page:** 10\
**Page:** 1

<div class="post-metadata">

**Author:** ![frime](https://colorlibsupport.com/letter_avatar_proxy/v4/letter/f/47e85d/32.png) [@frime](https://colorlibsupport.com/u/frime)\
**Post date:** [November 27, 2017, 10:46am UTC](https://colorlibsupport.com/t/change-height-of-header-with-the-blog-title/19158/1 "2017-11-27T10:46:21Z")

</div>

How can I decrease the height of the header withe the blog title?

---

<div class="post-metadata">

**Author:** ![mikesupport17](https://colorlibsupport.com/letter_avatar_proxy/v4/letter/m/bc8723/32.png) [@mikesupport17](https://colorlibsupport.com/u/mikesupport17)\
**Post date:** [November 27, 2017, 10:56am UTC](https://colorlibsupport.com/t/change-height-of-header-with-the-blog-title/19158/2 "2017-11-27T10:56:40Z")

</div>

Hello there,

I hope you are doing well today.

You can use the following CSS code to change the header height by going to Appearance \> Customize \> Additional CSS and pasting it there.

`
/*Header height*/
.page-title-section {
    height: 160px;
}
`

Best Regards,  
Support

---

<div class="post-metadata">

**Author:** ![frime](https://colorlibsupport.com/letter_avatar_proxy/v4/letter/f/47e85d/32.png) [@frime](https://colorlibsupport.com/u/frime)\
**Post date:** [November 27, 2017, 11:09am UTC](https://colorlibsupport.com/t/change-height-of-header-with-the-blog-title/19158/3 "2017-11-27T11:09:17Z")

</div>

Thanks, but for some reason it doesn’t work. Nothing happens when adding this code to the CSS…

---

<div class="post-metadata">

**Author:** ![mikesupport17](https://colorlibsupport.com/letter_avatar_proxy/v4/letter/m/bc8723/32.png) [@mikesupport17](https://colorlibsupport.com/u/mikesupport17)\
**Post date:** [November 27, 2017, 1:51pm UTC](https://colorlibsupport.com/t/change-height-of-header-with-the-blog-title/19158/4 "2017-11-27T13:51:18Z")

</div>

Hello there,

Thanks for telling me this.

Could you please provide a link to your website so that I can inspect it and provide a new CSS code?

Best Regards,  
Support

---

<div class="post-metadata">

**Author:** ![frime](https://colorlibsupport.com/letter_avatar_proxy/v4/letter/f/47e85d/32.png) [@frime](https://colorlibsupport.com/u/frime)\
**Post date:** [November 27, 2017, 7:04pm UTC](https://colorlibsupport.com/t/change-height-of-header-with-the-blog-title/19158/5 "2017-11-27T19:04:01Z")

</div>

Thanks,

> **[Hem - Svensk Plastindustriförening SPIF](https://www.svenskplast.org/)**
>
> fgdfgf dfgdfg dfgdfg

Best regards

---

<div class="post-metadata">

**Author:** ![frime](https://colorlibsupport.com/letter_avatar_proxy/v4/letter/f/47e85d/32.png) [@frime](https://colorlibsupport.com/u/frime)\
**Post date:** [November 28, 2017, 7:02pm UTC](https://colorlibsupport.com/t/change-height-of-header-with-the-blog-title/19158/6 "2017-11-28T19:02:06Z")

</div>

Thanks,

> **[Hem - Svensk Plastindustriförening SPIF](https://www.svenskplast.org/)**
>
> fgdfgf dfgdfg dfgdfg

Best regards

---

<div class="post-metadata">

**Author:** ![mikesupport17](https://colorlibsupport.com/letter_avatar_proxy/v4/letter/m/bc8723/32.png) [@mikesupport17](https://colorlibsupport.com/u/mikesupport17)\
**Post date:** [November 28, 2017, 8:37pm UTC](https://colorlibsupport.com/t/change-height-of-header-with-the-blog-title/19158/7 "2017-11-28T20:37:36Z")

</div>

Hey there,

You can try achieving this by adding the following CSS code in the Custom CSS option of your theme on the below path.

Admin Area -\> Appearance -\> Customize -\> Additional CSS

```auto
/*increase header height and top padding to bring down logo and navigation*/
nav#site-navigation {
    height: 25vh;
    padding-top: 7vh;
}

```

Best regards,  
Support.

---

<div class="post-metadata">

**Author:** ![frime](https://colorlibsupport.com/letter_avatar_proxy/v4/letter/f/47e85d/32.png) [@frime](https://colorlibsupport.com/u/frime)\
**Post date:** [November 29, 2017, 8:55am UTC](https://colorlibsupport.com/t/change-height-of-header-with-the-blog-title/19158/8 "2017-11-29T08:55:50Z")

</div>

Thanks, but this doesn’t change the height of the title background. It just Changes the space around logotype and menu.

Best regards

---

<div class="post-metadata">

**Author:** ![frime](https://colorlibsupport.com/letter_avatar_proxy/v4/letter/f/47e85d/32.png) [@frime](https://colorlibsupport.com/u/frime)\
**Post date:** [November 29, 2017, 9:04am UTC](https://colorlibsupport.com/t/change-height-of-header-with-the-blog-title/19158/9 "2017-11-29T09:04:31Z")

</div>

Problem is solved 🙂  
I added “!important”:

/_Header height_/  
.page-title-section {  
height: 160px !important;  
}

---

<div class="post-metadata">

**Author:** ![mikesupport17](https://colorlibsupport.com/letter_avatar_proxy/v4/letter/m/bc8723/32.png) [@mikesupport17](https://colorlibsupport.com/u/mikesupport17)\
**Post date:** [November 29, 2017, 10:27am UTC](https://colorlibsupport.com/t/change-height-of-header-with-the-blog-title/19158/10 "2017-11-29T10:27:16Z")

</div>

Hello there,

I am glad the solution worked for you.  
Please feel free to contact us again in the future regarding any other issues.

Best Regards,  
Support