Mobile version – horizontal scroll bar

Hi @winner-singh

Please follow the below steps:

Step 1-download the “Insert Headers and Footer” plugin.

Step 2-paste the below code in “script in the footer”

<script>
jQuery(document).ready(function(){
  jQuery(".wpsm_nav-tabs li").click(function() {
      var viewportWidth = jQuery(window).width();
        if (viewportWidth < 800) {
      jQuery('html, body').animate({
          scrollTop: jQuery(".tab-content").offset().top
      }, 1000);
      }
      return false;
  });
});
</script>

if it works let us know

Thank you

• This reply was modified 3 years, 1 month ago by lokeshkalosiya.

I have added the script in the plugin you mentioned but still, it is not working on mobile device, here is the screen shot: https://ibb.co/bbBNGhd

Hi @winner-singh,

Please put the below code in custom CSS.

ul#myTab_2478 {
    height: 200px;
    overflow-x: scroll;
}

if it works let us know

Thank you

• This reply was modified 3 years, 1 month ago by lokeshkalosiya.

@lokeshkalosiya thank you for your reply, this code does not work properly, what i want is to scroll from left to right(horizontal), and the code you send works from top to down on mobile devices. Please look at the screenshot what i want to do: https://ibb.co/M27cDc8 you can see in the menu category moves from left to right.

I even tried this code but it did not work correctly on this.
https://www.w3schools.com/howto/howto_css_menu_horizontal_scroll.asp

Hi @winner-singh,

Please replace the below code in custom CSS

@media only screen and (max-width: 768px) {

#primary .page .entry-content ul {
    padding: 0;
    line-height: 30px;
    display: inline-flex;
    overflow-x: scroll;
    width: 400px;
}

}

if it works let us know

Thank you

okay so now it is working perfectly, What I did is max-width: 500px because when I rotate the phone it was looking bad, so only vertical I did 500x

thank you for your help.

okay so now the same javascript code and same CSS code I added this website https://www.tajmahalindische.de/jetzt-bestellen/ but is not working for mobile whereas on this website it is working https://www.aanjal.com/jetzt-bestellen-2/

Hi

First solution:

If you want horizontally perfect then just add one more thing in custom css.

“overflow-y: scroll;”

Second solution:

Put the below code in custom css

@media (max-width: 768px){
#theme_content_navigator .entry-content ul {
    padding: 0;
    overflow-x: scroll;
    overflow-y: scroll;
    width: 100%;
    display: inline-flex;
    line-height: 30px;
}
}

and third thing is that please change the previous above code width:400px; to width:100%; in custom CSS.

and then let us know.

Thank you

• This reply was modified 3 years, 1 month ago by lokeshkalosiya.

thank you, now working perfectly for all.

Hi @winner-singh,

Glad that your issue has been resolved, if you like our plugin please rate us.

Thank you