Title: Mobile version – horizontal scroll bar
Last modified: October 7, 2021

---

# Mobile version – horizontal scroll bar

 *  Resolved [winner singh](https://wordpress.org/support/users/winner-singh/)
 * (@winner-singh)
 * [4 years, 8 months ago](https://wordpress.org/support/topic/mobile-version-horizontal-scroll-bar/)
 * 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](https://ibb.co/KLQy9pK)
 * The page I need help with: _[[log in](https://login.wordpress.org/?redirect_to=https%3A%2F%2Fwordpress.org%2Fsupport%2Ftopic%2Fmobile-version-horizontal-scroll-bar%2F%3Foutput_format%3Dmd&locale=en_US)
   to see the link]_

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

 *  [lokeshkalosiya](https://wordpress.org/support/users/lokeshkalosiya/)
 * (@lokeshkalosiya)
 * [4 years, 8 months ago](https://wordpress.org/support/topic/mobile-version-horizontal-scroll-bar/#post-14949974)
 * Hi [@winner-singh](https://wordpress.org/support/users/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 4 years, 8 months ago by [lokeshkalosiya](https://wordpress.org/support/users/lokeshkalosiya/).
 *  Thread Starter [winner singh](https://wordpress.org/support/users/winner-singh/)
 * (@winner-singh)
 * [4 years, 8 months ago](https://wordpress.org/support/topic/mobile-version-horizontal-scroll-bar/#post-14951224)
 * 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](https://ibb.co/bbBNGhd)
 *  [lokeshkalosiya](https://wordpress.org/support/users/lokeshkalosiya/)
 * (@lokeshkalosiya)
 * [4 years, 8 months ago](https://wordpress.org/support/topic/mobile-version-horizontal-scroll-bar/#post-14953205)
 * Hi [@winner-singh](https://wordpress.org/support/users/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 4 years, 8 months ago by [lokeshkalosiya](https://wordpress.org/support/users/lokeshkalosiya/).
 *  Thread Starter [winner singh](https://wordpress.org/support/users/winner-singh/)
 * (@winner-singh)
 * [4 years, 8 months ago](https://wordpress.org/support/topic/mobile-version-horizontal-scroll-bar/#post-14953481)
 * [@lokeshkalosiya](https://wordpress.org/support/users/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](https://ibb.co/M27cDc8)
   you can see in the menu category moves from left to right.
 *  Thread Starter [winner singh](https://wordpress.org/support/users/winner-singh/)
 * (@winner-singh)
 * [4 years, 8 months ago](https://wordpress.org/support/topic/mobile-version-horizontal-scroll-bar/#post-14954485)
 * I even tried this code but it did not work correctly on this.
    [https://www.w3schools.com/howto/howto_css_menu_horizontal_scroll.asp](https://www.w3schools.com/howto/howto_css_menu_horizontal_scroll.asp)
 *  [lokeshkalosiya](https://wordpress.org/support/users/lokeshkalosiya/)
 * (@lokeshkalosiya)
 * [4 years, 8 months ago](https://wordpress.org/support/topic/mobile-version-horizontal-scroll-bar/#post-14956692)
 * Hi [@winner-singh](https://wordpress.org/support/users/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](https://wordpress.org/support/users/winner-singh/)
 * (@winner-singh)
 * [4 years, 8 months ago](https://wordpress.org/support/topic/mobile-version-horizontal-scroll-bar/#post-14959141)
 * 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](https://wordpress.org/support/users/winner-singh/)
 * (@winner-singh)
 * [4 years, 8 months ago](https://wordpress.org/support/topic/mobile-version-horizontal-scroll-bar/#post-14960280)
 * okay so now the same javascript code and same CSS code I added this website [https://www.tajmahalindische.de/jetzt-bestellen/](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/](https://www.aanjal.com/jetzt-bestellen-2/)
 *  [lokeshkalosiya](https://wordpress.org/support/users/lokeshkalosiya/)
 * (@lokeshkalosiya)
 * [4 years, 8 months ago](https://wordpress.org/support/topic/mobile-version-horizontal-scroll-bar/#post-14960880)
 * 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 4 years, 8 months ago by [lokeshkalosiya](https://wordpress.org/support/users/lokeshkalosiya/).
 *  Thread Starter [winner singh](https://wordpress.org/support/users/winner-singh/)
 * (@winner-singh)
 * [4 years, 7 months ago](https://wordpress.org/support/topic/mobile-version-horizontal-scroll-bar/#post-14964099)
 * thank you, now working perfectly for all.
 *  [lokeshkalosiya](https://wordpress.org/support/users/lokeshkalosiya/)
 * (@lokeshkalosiya)
 * [4 years, 7 months ago](https://wordpress.org/support/topic/mobile-version-horizontal-scroll-bar/#post-14964618)
 * Hi [@winner-singh](https://wordpress.org/support/users/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.

 * ![](https://ps.w.org/tabs-responsive/assets/icon-256x256.png?rev=2337177)
 * [Tabs Responsive - With WooCommerce Product Tabs Extension](https://wordpress.org/plugins/tabs-responsive/)
 * [Frequently Asked Questions](https://wordpress.org/plugins/tabs-responsive/#faq)
 * [Support Threads](https://wordpress.org/support/plugin/tabs-responsive/)
 * [Active Topics](https://wordpress.org/support/plugin/tabs-responsive/active/)
 * [Unresolved Topics](https://wordpress.org/support/plugin/tabs-responsive/unresolved/)
 * [Reviews](https://wordpress.org/support/plugin/tabs-responsive/reviews/)

 * 11 replies
 * 2 participants
 * Last reply from: [lokeshkalosiya](https://wordpress.org/support/users/lokeshkalosiya/)
 * Last activity: [4 years, 7 months ago](https://wordpress.org/support/topic/mobile-version-horizontal-scroll-bar/#post-14964618)
 * Status: resolved