Boxed Navigation bar Width is too short on scroll

[smoothjapan]

Hello,

My development site at http://dev.smoothjapan.com has a boxed layout with a navigation bar that simply won’t stretch out to the whole width.
I’ve migrated the site but since deleted all custom CSS I know of.
Could you have a look?

[werner7]

Hi @smoothjapan, is fullwidth selected in your theme options?

If so, try setting it to boxed and back to fullwidth and see if that does the trick.

[smoothjapan]

@werner7 Thanks for having a look. I actually want to have a boxed theme to limit the range of sliders and other elements on the site.

However, I followed your advise in reverse (set fullwidth, save, then set to boxed again). However still the same result is seen on my Safari browser.

[lely]

Thank you @werner7!

Hi @smoothjapan,

When you say whole width, do you mean at the edge of that box? Like this image below:
If yes, please try using this custom CSS:
.x-navbar-inner>.x-container.width.max { max-width: 100% !important; width: 100% !important; }

If that is not what you are trying to achieve, please clarify so we can be specific on our suggestion.

[smoothjapan]

Hi @Lely and thanks for your reply.

I’m not looking to spread out the navbar beyond the box defined by the layout. 1200px wide is just fine. I do however experience a bug on Safari, Chrome and other browsers of desktop width.

On first load, everything seems fine. But once I scroll the navbar loses about 5% width on each side. Please have a look at the below screenshots in case this isn’t reproducible at your end.

After Scrolling

As you can see, the logo positions also changes so I think there is something wrong with ‘margin’ or similar? I have removed all custom CSS already so I’m not sure what would cause this.

[thai]

Hi There,

The navbar seems to work fine on my end:

Which browsers you’re using?

Thanks.

[smoothjapan]

Latest Safari 10.1.1
and latest Chrome
on latest MacOS Sierra 101.2.5

Display is continuously wrong on both of them.

[nabeel]

Hi again,

I was able to replicate the issue on my end, please try adding the following code in your Customizer:

.x-navbar-fixed-top, .x-navbar {
    width: 100% !important;
}

Let us know how this goes!

[smoothjapan]

Awesome stuff @nabeel. Thanks!

[nico]

Hi @smoothjapan,

Happy to hear that.

Feel free to ask us again.

Thanks.