[StartblockParticipant]

Hi,

I am having issues with my navigation menu when viewed in a mobile browser. The small mobile navbar when selected shows the navigation links but only for a brief second, and also this overlaps one of my images on my home page.

How can I make this mobile navigation bar more static and also be more responsive in a mobile browser?

My other issue is that I have been informed by someone who recently viewed my site in an Internet Explorer version 9 browser that formatting of the site was out of sync. How can my X theme and customisations be made compatible for older versions of all modern browsers?

My URL is: http://www.startblock.co.uk

Many thanks for your help.

Kind regards,

Charles Piper

[StartblockParticipant]

This reply has been marked as private.

[RadModerator]

Hi there,

Thanks for posting in.

Add this css at your customizer’s custom css under Admin > Appearance.

@media (max-width: 979px) {
.x-nav-collapse, .x-nav-collapse.collapse {
overflow: hidden;
height: 0;
}
.x-nav-collapse, .x-nav-collapse.collapse.in {
overflow: hidden;
height: auto;
}
.x-navbar-fixed-left .x-navbar-inner, .x-navbar-fixed-right .x-navbar-inner {
height: auto !important;
}
}

IE9 is older browser which lacks of some browser standards. So it is only partially supported by X. Development for older browsers could take time, so we don’t support intensive troubleshooting and fixes. You may want to consult to a developer for more dedicated time. As X improve, it also gets more feature that older browser can’t adapt. Just like software that will require higher specs 🙂

Thanks!

[StartblockParticipant]

Thank you so very much for all your help!

I am so pleased I purchased X Theme, you are all great people and so very helpful in every way!

Best Regards,

Charles Piper

[Paul RModerator]

You’re welcome Charles and thank you for your kind words.

Have a nice day! 🙂

[Lyn PParticipant]

Hi there,
Sorry to join a finished conversation but we’re having the same issue here: http://www.boozebrotherscharity.com.au/testsite. I’ve applied the CSS suggested above and now the menu opens, closes and opens again before we can click on it. Can we make it so it works properly? ie. opens and stays, close when we click on it again.
Cheers, San

[ZeshanMember]

Hi Lyn,

Thank you for writing in!

Instead of using above given CSS code, please try the following:

@media (max-width: 979px){
   .x-nav-collapse, .x-nav-collapse.collapse {
      overflow: hidden;
      max-height: 0px;
      height: auto;
      -webkit-transition: all 0.3s ease;
      -moz-transition: all 0.3s ease;
      -ms-transition: all 0.3s ease;
      -o-transition: all 0.3s ease;
      transition: all 0.3s ease;
   }
   
   .x-nav-collapse, .x-nav-collapse.collapse.in {
      max-height: none;
   }
}

Hope this helps. 🙂

Thank you.

[Lyn PParticipant]

Hi, thanks for that. It seems it did the trick. It worked straight away on Androids but not on iOS, so I added the !important to the heights and overflow and it’s now working. Better yet, it went live: http://www.boozebrotherscharity.com.au/
Thanks again

[ZeshanMember]

Glad we were able to help! Have a good day! 🙂

[newmedParticipant]

Great post. We had the same problem and this worked!

[DB CParticipant]

Was having the same issue and this worked for me – brilliant! THX!!!!

[CousettMember]

Glad this was able to help multiple people!

[KiljanParticipant]

I also have the same issue but i wanted to check it some of my current code might conflict to the code above.

This is what my current CSS looks like:

.x-img {max-width: 100%;}

@media (min-width: 980px) {
    .x-navbar .sub-menu a, .x-navbar .x-navbar-inner .x-nav-collapse .sub-menu a {
        font-size: 18px;
    }
}
@media (max-width: 980px) {
    .x-navbar .sub-menu a, .x-navbar .x-navbar-inner .x-nav-collapse .sub-menu a {
        font-size: 18px;
    }
}
@media (max-width: 979px) {
.x-nav>li>a {
font-size: 18px !important;
}
}

Please help me get the mobile version to work again.
Thank you

[Nabeel AModerator]

Hi Kiljan,

Can you please provide us the URL of your website so we can take a closer look into your issue?

[Scott AParticipant]

This reply has been marked as private.

[Author]

Posts