How to Make Your Header Bar "Full Width"

code css kajabi kajabi tips meg burrage Oct 13, 2022
meg burrage; kajabi email;kajabi tips;header fill width

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:

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:

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


Just like this... 

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

Free Kajabi Quick Start

If Our 6 most popular homepage designs, step-by-step funnel training and all the best launch resources.