Return to previous page

General tabs – horizontal view on mobile

This topic has 10 replies, 3 voices, and was last updated 1 years, 11 months ago ago by Rose Tyler

TheOne

Participant

November 25, 2022 at 21:17

Hello,

I’ve imported the general tabs (sushi menu) from your demo.

On mobile it shows the tabs verticaly. Can we display it horizontaly (like a slider) ? Or like 2-3 in the row?

https://xstore.8theme.com/elementor/demos/sushi/our-menu/

Thank you,

#339674 Copied Theme version: 8.3.5 WooCommerce version: 6.9.4

9 Answers
Rose Tyler

Support staff

November 26, 2022 at 06:55
Hello,

There is no such option, unfortunately.
Try to use the next custom CSS code:
```
@media only screen and (max-width: 767px) {
    .et-advance-tabs .et-tabs-nav>ul {
        display: inline-block;
    }
    .et-advance-tabs .et-tabs-nav>ul .et-tab-nav {
        max-width: 32.5%;
    }
}
```
Regards
#339696 Copied
TheOne

Participant

December 4, 2022 at 19:46

Hello,

This dosen’t seem to work. Does it work on all horizontal styles or only specific?

PS: i just noticed that you can set “select type on responsive” and it came out just fine! Can you check the code just in case? (for future projects)

#340456 Copied

Tony Rodriguez

Support staff

December 5, 2022 at 07:52

Hello, @TheOne,

Actually, the code that we shared with you will show the tabs like this: https://postimg.cc/Y4jb0Pq4 it will not make the tabs as a slider. If the code is not showing like this on your site then please share your site wp-admin URL and access in the private content area of this topic by following the below-given format

WORDPRESS ADMIN URL:
WORDPRESS ADMIN USERNAME:
WORDPRESS ADMIN PASSWORD:

So that I will check and fix your issue on your site.

Regards 8Themes Team.

#340486 Copied

TheOne

Participant

December 5, 2022 at 18:37

Hello,

Yes – access in private. Like i said i have solved my previous problem on mobile with “select type on responsive”. Tho i saw the changes in editor but i didn’t saw them on frontend.

I am trying to use your code to display my general tabs on Desktop view in two rows. It works in elementor editor but not on frontend.

Please contact administrator
for this information.

#340600 Copied

Tony Rodriguez

Support staff

December 6, 2022 at 05:04

Hello, @TheOne,

Sorry for the inconvenience but your provided WP Admin Logins are not correct, please watch the video under the private content area and provide me the correct/tested and working Logins of the site.

Regards 8Themes Team.

Please contact administrator
for this information.

#340619 Copied

TheOne

Participant

December 6, 2022 at 09:49

Hello,

I’m sorry, i forgot i changed the path.
Correct one in private.

Please contact administrator
for this information.

#340657 Copied
Tony Rodriguez

Support staff

December 6, 2022 at 10:23
Hello, @TheOne,

Thanks for the access. I have checked your site and found that you are facing a cache issue nothing else because on mobile the select type appears fine on the front-end. see the image: (Private Content)

To show the general tabs on the desktop view in two rows simply go to the Dashboard >> XStore >> Theme Settings >> Theme Custom CSS >> Global and paste the below code at the bottom of the CSS box there.
```
@media(min-width:992px){
.elementor-3793 .elementor-element.elementor-element-6668a00c .et-tabs-horizontal .et-tabs-nav ul{display:inline-block !important;}
.elementor-3793 .elementor-element.elementor-element-6668a00c .et-advance-tabs .et-tabs-nav > ul li{margin-bottom:10px !important;}}
```
Then save settings and check back to your site after clearing the browser cache.

Regards 8Themes Team.

Please contact administrator
for this information.
#340662 Copied
TheOne

Participant

December 6, 2022 at 13:12

Hello,

That did the job perfectly, thank you! Awesome support as always.
Once again can you move the picture of the site to private?

#340688 Copied

Rose Tyler

Support staff

December 6, 2022 at 13:16

Hello,

You’re welcome!

Regards

#340691 Copied
Tagged: best, general, horizontal, mobile, selling, tabs, themes, view, woocommerce
Viewing 10 results - 1 through 10 (of 10 total)