Superfly menu and header center

[Virtanen]

Hello,

I’m using a pro theme, Superfly menu that is always visible on desktop.

Im trying to center the header text. The problem is that at the beginning the text is OK, but as soon I as scroll down the text jumps little bit to the right. I think the problem is that at the beginning the header bar is up to the Superfly menu, but as soon as i scroll the header bar is up to the screen edge.

There is Probably an easy solution, but I cant figure it out.

Best wishes,
Teemu

[tristup]

Hi Teemu,

Thanks for reaching out.
It seems that the issue is due to the sticky header bar, which shrinks during the scroll. Can you please share your website credentials in the secure note for further investigation? Please include the following details in credentials.

– WordPress Site URL & Login URL
– WordPress Admin username/password

To create a secure note, click the key icon underneath any of your posts.

Thanks

[Virtanen]

Hello,
Just added the secure note. Hope you can help
Best wishes,
Teemu

[ruenel]

Hey Teemu,

Because you have added the Superfly menu to the right side, you will have to set a maximum width for the fixed bar.

To get this resolve, you need to use the Google Chrome Developer Toolbar to check the live HTML code and find which CSS selector you need to use. Therefore, the final code which will be added in your Header Builder > CSS is this:

.x-bar.x-bar-fixed {
  max-width: calc(100% - 275px);
}

Please note that custom coding is outside the scope of our support. Issues that might arise from the use of custom code and further enhancements should be directed to a third-party developer.

Please check your site now.

[Virtanen]

Hello,
Thank you. It seems to be working perfectly on desktop mode, but in mobile with hamburger the logo this solution unfortunately dos not work :-/ Any ideas how to fix?

Best wisihes,
Teemu

[tristup]

Hi Teemu,

For the smaller screen, you need to add the following code to increase the width up to 100%.

@media  (max-width: 768px) 
{
    .x-bar.x-bar-fixed 
    {
        max-width: 100% !important;
    }
}

Hope it works.
Thanks

[Virtanen]

Seems to be working. Thank you very much!

[tristup]

Hi Teemu,

Glad that it work.

Thanks