How to Make Your Header Bar "Full Width"
Oct 13, 2022
![meg burrage; kajabi email;kajabi tips;header fill width](https://kajabi-storefronts-production.kajabi-cdn.com/kajabi-storefronts-production/blogs/10337/images/JinOqaN1TRGUIKgIGxn3_Blog_Covers.png)
What do I even mean by "full width"?
Here's a teeny weeny little tutorial this week on how to make your header bar full width.
I mean taking it from this below, where the Kajabi default is to leave a whole lot of white space on the outside of your logo and any menu links/buttons:
![](https://kajabi-storefronts-production.kajabi-cdn.com/kajabi-storefronts-production/themes/2151875617/settings_images/S3uMT3SU2qBRoei9lUXw_v7-1.png)
More White Space
To this, where all the available space is used and you're left with more white space in the middle of your header bar, which I personally prefer:
![](https://kajabi-storefronts-production.kajabi-cdn.com/kajabi-storefronts-production/themes/2151875617/settings_images/XYbTnk9NSbOsbdKZVsoW_v7-2.png)
What's the Code?
To achieve this look, you'll need to add this little bit of css code to your page settings, inside the Custom CSS area
/* Header code to make full width */
.header__container {
max-width: 100%;
}
![](https://kajabi-storefronts-production.kajabi-cdn.com/kajabi-storefronts-production/themes/2151875617/settings_images/r8tYJo5Qja0jSW1KJicQ_v7-3.png)
Just like this...
![](https://kajabi-storefronts-production.kajabi-cdn.com/kajabi-storefronts-production/themes/2151875617/settings_images/aFFDSl9VTEy1krnTjuUK_v7-4.png)
Moral of the Story?
You can't break anything.
If you'd like to achieve the full-width header on your site, just give it a go!
You can't break anything š
Until the next time!
Meg xx