Center Sticky Navigation Bar in Pro

[lucbas]

Hi theme.co team!

Big fan of your theme and have been using it for years.

I have a sticky navigation bar on my website and like to have it the same width as the site.
(width: 1000px, max-width: 80%)

I used following code to for the width (worked) and now like to center it, as it sticks to the left side.

$el.x-bar-top {
  border-radius: 15px;
  width: 80%;
  max-width:1000px;
}

(also margin: 10px in the Pro Header settings to make it float)

Could you help me to center the bar?

Thank you very much!

[christian]

Hey @lucbas,

Thank you for your feedback.

It looks like you have the same problem like in this thread https://theme.co/apex/forum/t/pro-sticky-header-positioning/40638/2?u=christian_y. The user also uses a custom code to override the max width and even though the bar is centered using the margin: 0 auto trick, when the bar becomes sticky, it moves to the left. Please try following the instruction provided in the thread.

If you want to jump to the solution directly, please see https://youtu.be/06qRkxpysOc

Hope that helps.

[lucbas]

Thanks! That helped!

What I had to do:

• In the bar: Flex Layout --> Horizontal --> Center
• Move all styling from the bar to the container
• Set width in the container
• Adjust margin/padding

Great!

Have a nice day!

[christian]

You’re welcome. That’s correct.

[lucbas]

Hi theme.co team

Quick follow-up question:
Do you have a fix for people using Internet Explorer and messing up the center alignment of the navigation bar?
I read it could be something with flex layout.

Thank you!

[friech]

Hi Lucbas,

Please provide us login credentials in a secure note so we can take a look on your header configuration.

Thanks,

[lucbas]

Thank you @friech, appreciated!

[friech]

Hi Lucbas,

Thanks, that’s weird it seems IE can’t find the center of the bar. You can resolve that by defining a Content Max Length (max-width) to your Bar.

Hope it helps,
Cheers!

[lucbas]

That worked beautifully, thank you very much!

[ruenel]

You’re welcome!
We’re glad we were able to help you out.