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