Sticky header centered position

Support
#1

Hi Guys and Happy New Year!

I have a problem with my sticky menu on safari and firefox. The sticky bar worked before (I presume the problem appeared after an X Pro upgrade), but now it’s aligned left on Safari and Firefox browser. I tried different flex setting but I still haven’t solved the problem. Can you please help me?

Thanks,
Ionut

#2

Hi Lonut,

I can see the issue. Please decrease your FLEX value on your bar to 94%.
Look at this screencast showing the difference on how browser handles it: https://screencast-o-matic.com/watch/cYVjhwvwyJ
There’s no effect in Chrome be it 100% or 94%. But on Firefox it should be 94%.

Hope this helps.

#3

Hi Lely,

It help on Firefox but not on Safari. Is there any other setting i can try?

Thanks,
Ionut

#4

Hey Ionut,

That is because the x-container class was used in your sticky bar. Please remove that class and also remove the max width classes. Don’t use Content classes in there to avoid layout conflicts.

Hope that helps.

#5

Do you mean i need to recreate the bars? These menu bars was created in a previous X Pro versions and it worked. I didn’t add any class in customs css.

Thanks,
ionut

#6

Hey Ionut,

No or maybe just the sticky bar because it’s the only one that has that class. You don’t have to redo your bars. Since the sticky bar’s content is the same as the non-sticky bar, you can duplicate the non-sticky bar and make it sticky and its background white.

Do you mean you didn’t assign the x-container class to your sticky bar like the following screenshot?

I’m curious how the x-container class was added to the sticky bar though so can provide details on what version you updated from, I’ll ask our developers if there’s a version where the class was added.

Thanks.

#7

Hey Christian,

No, I didn’t set the x-container class to any bar and the sticky bar was a copy of the main bar. Even if I’m adding a copy of the main bar or even a completely new bar, when I set the “sticky bar” to on with “hide initially” set either on or off, the problem is still there. By the way, if I set a class on the bar should not be present always on the bar’s classes? From what I see the class is added just when the bar sticks to the top of the page.

Thanks,
Ionut

#8

Hello Ionut,

The classes were added in the bar because you are using a boxed layout (Pro > Theme Options > Layout & Design > Site Layout). To better assist you with your issue, kindly provide us access to your site so that we can check your settings. 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.

#9

Hi,

I’ve added the secure note to my previous reply.

Thanks,
Ionut

#10

Hi Ionut,

Thank you for the credentials, but what is your login page URL? I tried both /wp-admin and /wp-login.php but its always redirected to /not_found. I assume you have a “hide login page” plugin or something. Please provide.

Thanks,

#11

Sorry,

You have the login URL in the last Secure note.

Thanks,
Ionut

#12

Hello Ionut,

I have checked your site and this is what I am seeing:

Top Header:

On Page Scroll:

In my test, it seems that the issue only happens in Safari. We will inform our developers about this issue.

Please bear with us.

#14

Hello RueNel,

Yes, in this moment the problem still appears on Safari. The problem was solved for Firefox modifying the Flex value of the bar to 94% as suggested by Lely above.
I’m waiting for a solution from the developers. I’m quite in a hurry with launching the website to production.

Thanks for your understanding,
Ionut

#15

Hello Ionut,

Our developers are already looking into this issue.

Please bear with us.

#16

Thank you. Let me know if you need any info from my side.

#17

You are most welcome.
You may also check out our changelog when we roll out the update release cycle.

#18

So, this problem will be solved in a future update or the developers could help me with a solution now?

Thanks,
Ionut

#19

By the way you should let the Nginx Cache plugin enabled to be able to clear the nginx cache while testing.

#20

Hey Ionut,

It’s weird that the x-container max width classes get attached when the bar gets sticky. I reinstalled the latest Pro version and it doesn’t help.

Please keep all the plugins deactivated so when our developer logs in, he could investigate the issue right away saving some time.

Would you also mind giving us FTP or cPanel access to your site?

By the way, I imported your header to my site and the x-container class does not get added so this issue could be unique or happens only in your site. You can see in the screenshot below that your header works fine on my site.

Thanks.

#21

Hi Christian,

I will not change anything on the website and I will try to create a new clean wordpress installation where to import my last backup to see if the problem persists. I will think about how to give you access over FTP as the user set in nginx is www-data. Anyway, until then I hope the developer could still work on the issue.

Thanks,
Ionut