This topic has 10 replies, 3 voices, and was last updated 2 years ago ago by Rose Tyler
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,
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
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)
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.
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.
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.
Hello,
I’m sorry, i forgot i changed the path.
Correct one in private.
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.
Hello,
That did the job perfectly, thank you! Awesome support as always.
Once again can you move the picture of the site to private?
Hello,
You’re welcome!
Regards
Tagged: best, general, horizontal, mobile, selling, tabs, themes, view, woocommerce
You must be logged in to reply to this topic.Log in/Sign up