Mobile version – horizontal scroll bar

  • Resolved winner singh

    (@winner-singh)


    4 years, 5 months ago

    Hi,
    The desktop version is super cool, but the problem is when the user operates the order page from the mobile it looks bad because there are so many tabs, so I want a horizontal scroll bar, instead of a tab that goes on the second line and also I want the position to be fixed of the tab so that when user scroll the page still user can see the tabs and scroll the tabs in a horizontal way. How could that be possible!

    look mobile version: https://ibb.co/KLQy9pK

    The page I need help with: [log in to see the link]

Viewing 11 replies - 1 through 11 (of 11 total)
  • lokeshkalosiya

    (@lokeshkalosiya)

    4 years, 5 months ago

    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

    Thread Starter winner singh

    (@winner-singh)

    4 years, 5 months ago

    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

    lokeshkalosiya

    (@lokeshkalosiya)

    4 years, 5 months ago

    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

    Thread Starter winner singh

    (@winner-singh)

    4 years, 5 months ago

    @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.

    Thread Starter winner singh

    (@winner-singh)

    4 years, 5 months ago

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

    lokeshkalosiya

    (@lokeshkalosiya)

    4 years, 5 months ago

    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

    Thread Starter winner singh

    (@winner-singh)

    4 years, 5 months ago

    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.

    Thread Starter winner singh

    (@winner-singh)

    4 years, 5 months ago

    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/

    lokeshkalosiya

    (@lokeshkalosiya)

    4 years, 5 months ago

    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

    Thread Starter winner singh

    (@winner-singh)

    4 years, 5 months ago

    thank you, now working perfectly for all.

    lokeshkalosiya

    (@lokeshkalosiya)

    4 years, 5 months ago

    Hi @winner-singh,

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

    Thank you

Viewing 11 replies - 1 through 11 (of 11 total)

The topic ‘Mobile version – horizontal scroll bar’ is closed to new replies.