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

Your First 100 Leads

Join James Wedmore in this free 16-Part Training Series, that will not only help you create the perfect lead magnet ("Freebie) for your audience, but will also give you all the strategies you need to promote it!