Navbar not displayed correctly on iphone

Support
#1

Hey there the problem occours on iphone 6s safari

The navbar should be displayed like on every other device and not be squeezed into the left corner. You’ll see the right way to display the header if you launch the site from any other mobile device than iphone.
Thanks for your help

#2

Hi @zerotoone.de,

I checked on my phone(iphone safari) and it seems to look fine. I have also checked in a device emulator and it looks fine as well.

Can you try clearing your phone browser cache then check again.

Thanks

#3

cleared the cache, same problem used this tutorial https://support.apple.com/de-de/HT201265
The correct menu is displayed when scrolling
And now I this is not the only issue:

  • There is also no option to close the menu
  • the subindicator is shifted to the bottom
  • and the menu does not display the backgroundcolor sometimes

Same problem on internet explorer

#4

Hi @zerotoone.de,

Thank you for the screenshots, I checked your site and I see you’ve defined the width of the Bar that is not supported in some browsers (see screenshot)

Please change it to width: 80% instead of width: calc(100% - (calc(10%) * 2));

  • To fix the close icon, try adding the following code in the Theme Options > CSS: 
.no-preserve3d .x-anchor-toggle .x-anchor-content .x-graphic:before {
    content: "\f0c9";
}
.no-preserve3d .x-active.x-anchor-toggle .x-anchor-content .x-graphic:before {
    content: "\f00d";
}

.no-preserve3d .x-anchor-toggle .x-anchor-content .x-graphic:before, .x-active.x-anchor-toggle .x-anchor-content .x-graphic:before {
    display: inline-block;
    cursor: pointer !important;
    font-style: normal;
    font-family: "FontAwesome";
    font-weight: 900;
    text-decoration: inherit;
    text-rendering: auto;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    color: #000;
}
.no-preserve3d .x-anchor-toggle .x-anchor-content .x-graphic-toggle {
    display: none;
}
  • To fix the sub indicator issue, try adding the following code as well:
.x-anchor-sub-indicator {
    top: 0px;
}

Don’t forget to clear all caches including your browser’s cache after adding the code. Let us know how this goes!

#5

I cant change the width to 80% if you look in the header option it only lets e set the margin sides under dimensions of the bar

#6

Hey @zerotoone.de,

Sorry for the confusion. That Width value setup is the builder’s output and that is cross-browser compatible. Our products follow the browsers supported by WordPress. See https://make.wordpress.org/core/handbook/best-practices/browser-support/

Please check your iOS version and your Safari version against what is supported by WordPress. It looks like Paul is using the latest version of iOS and Safari so as you can see, the issue does not happen on his end.

Thanks.

#7

so what is the solution for me now?

#8

Hello @zerotoone.de,

@Nabeel already provided a recommendation already

Please change it to width: 80% instead of width: calc(100% - (calc(10%) * 2));

Please let us know how it goes.

#9

as I said: it is not possible to change the width
I’ll send you a screenshot for clarification! the word width does not even appear when editing this header bar http://prntscr.com/nclbhq

#10

Hi @zerotoone.de,

Please try adding this custom CSS:

@media only screen 
and (min-device-width : 375px) 
and (max-device-width : 667px) {
    .x-bar.navshadow {
        width: 100% !important;
    }
}

Let us know how it goes!

#11

This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.