Docs

[SaShah]

Hi,
I have few problems on mobile devices:
1). Top bar text color is transparent ONLY on mobile devices and user cannot see anything on it. (see image top-bar)

2.) When we click the nav menu to expand it on ONLY mobile devices such as iphone the search bar does not show properly and lost its customization and very bad for user experience (see image search-bar)

3.) when we click on nav menu ONLY on mobile devices the drop down menu shows in transparent on the slides and user cannot properly see the menus (see image menu-problem)

4.) This problem is with the tabs on home page but ONLY on mobile devices, please open the home page on mobile device and scroll down until you reach on product tabs and then touch on that to open it but you cannot open it and even very difficult to scroll further down or up on the screen and they suddenly jump and does nothing. Please note this problem is only with the touch devices like iphone, ipad etc.(see image tabs-problem)

Please help me to solve these problem because i tried to find the solution but unable to find.

Thank you.

[SaShah]

This reply has been marked as private.

[Rue Nel]

Hello There,

Thanks for writing in and the very detailed information!

1] To resolve this issue, please add the following css code in the customizer, Appearance > Customize > Custom > CSS

.x-topbar .p-info {
    background-color: black;
}

2] To resolve this, please add the following css code in the customizer, Appearance > Customize > Custom > CSS

.mobile .menu-item-search {
    position: relative !important;
    top: auto;
    left: auto;
}

.mobile .search-box-container .text_input {
    margin-left: 20px;
    max-width: 200px;
}

3] You just need to add a background color for the mobile menu. Please add the following css code in the customizer, Appearance > Customize > Custom > CSS

.x-navbar .mobile .x-nav {
    background-color: #fff;
    padding-left: 10px;
}

4] This is known bug. You can fix this by adding the following JS code in the customizer, Appearance > Customize > Custom > Javascript

jQuery( function($) {
  $('.vc_tta-tab a').on('click', function( e ){
    setTimeout( function() { 
     $('html, body').stop().stop();
       console.log('scrolling stopped');
    }, 100 );
  });

  $(document).ready(function() {
    $('.vc_tta.vc_general .vc_tta-panel-title > a, .vc_tta.vc_general .vc_tta-panel-title > a, .vc_tta-tab a').off('click touchstart touchend');
  });
});

Hope this helps. Please let us know how it goes.

[SaShah]

Hi again,
That’s great, they worked except #3, i think we are missing any class, i tried many other classes as well but did not work, would you please have a look again on it.

Thanks

[Rue Nel]

Hello There,

In your code, .x-navbar and .mobile doesn’t have any space which is incorrect.

The correct code should be:

*/ to fix the nav menu on mobile devices */
.x-navbar .mobile .x-nav {
    background-color: #fff !important;
    padding-left: 20px !important;
}

Please let us know how it goes.

[SaShah]

i fixed it but nothing happened and the problem is still there. please have a look again.
Thanks

[Thai]

Hi There,

For #2, please add the following CSS:

body.x-navbar-fixed-top-active .x-navbar-wrap, 
body.x-navbar-fixed-top-active .x-navbar-wrap .x-navbar-inner {
    min-height: 150px;
    height: auto;
}

Hope it helps 🙂

[SaShah]

its not about #2 its about #3 please.

please see #3 image and i have entered #3 code as suggested:

.x-navbar .mobile .x-nav {
background-color: #fff;
padding-left: 10px;
}

but nothing happened and the problem is still there. please help.
Thanks

[Jade]

Hi there,

Please try this code:

.x-navbar .mobile .x-nav li > a {
    background-color: #fff;
}

Hope this helps.

[SaShah]

it worked but with a problem, when we hover on the sub menus on the mobile devices like: Women > Accessories:
then we can notice that the sub menu “Accessories” is left indent and whatever in the background can be seen and when we touch over to any sub menu the text turns into white and we cannot see it because the background is white as well.

I tried on mobile device and ipad as well, the problem is with any mobile device. please try it on any touch mobile device to experience the problem.

Hop you understand.

Thanks

[Lely]

Hi There,

Please also add this CSS:

.x-navbar .mobile .x-nav ul {
    padding: 0;
    margin: 0;
}
.x-navbar .mobile .x-nav ul li > a {
    padding-left: 2.25em;
    text-decoration: none;
}

.x-navbar .mobile .x-nav ul li > a:hover {
    background-color: #000;

}

See attached screenshot for the result.
Hope this helps.

[SaShah]

it worked perfectly.

Thank you so much for the help.

[Lely]

You’re welcome Sashah!

Cheers!

[Author]

Posts