Align header navigation with content

[zero_to_one]

Hey there,
I’d like my header bar (black) to be aligned with my content on the page. Thanks for our help!

[jade]

Hi @ZerotoOneaerial,

Please edit the Container settings then set the Max Width to 1000px then the margin left and right to auto:

Hope this helps.

[zero_to_one]

I tried it, but it squished my bar
and made the text overlap
it is now all the way on the left, but not as expected. please have a look

[ruenel]

Hello @ZerotoOneaerial,

Since your initial position of the bar is Absolute, please do not forget to set the maximum content length in the bar settings.

• 

Hope this helps.

[zero_to_one]

yes thats the setting I had it on all the time. and I also changed the column setting. Nothing changed for me

[ruenel]

Hello @ZerotoOneaerial,

Since the suggested solution is not working for you, kindly provide us access to your site so that we can check your settings and fix the issue for you. Please create a secure note with the following info:
– Link to your site
– WordPress Admin username / password
​
To know how to create a secure note, please check this out: https://theme.co/apex/forum/t/how-to-get-support/288

Regards.

[christian]

Hey @ZerotoOneaerial,

The issue is due to the custom Element CSS in your bar affecting the options that were suggested.

Please remove it.

Thanks.

[zero_to_one]

thank you I did, but now I need to align it. now the bar is full width. please have a look

[christian]

Hey @ZerotoOneaerial,

Sorry about that. I’m not sure why the header is still fullwidth but it’s much faster to replicate the setup in tutorial video below than to investigate each option.

Please check your screencast in the secure note.

Hope that helps.

[zero_to_one]

Thank you, how do I set the correct length now this has a lot of space now and I’d like to limit it to its content

[christian]

Hey @ZerotoOneaerial,

For that, set the Container’s Flexbox > Self Flex to Standard.

To understand the rest of the Flex options, I’d recommend you go through our Flex Layout tutorial here: https://theme.co/docs/use-flex-layout

Hope that helps.

[zero_to_one]

ok I got it, thank you! how do I stop my header from loosing its spacing above when scrolling?

[ruenel]

Hello @ZerotoOneaerial,

To maintain the space above your bar, I had to edit your custom header and removed the 32 pixels margin on top, the shrink amount is set to 0 and then I added an inline css in the “Customize” tab adding a top padding;

$el.x-bar {
  padding-top: 32px;
}

• 

Please check your header again.