How To Make Elementor Tabs Scroll Horizontally On Mobile, Tablets, and Desktop

No video

How To Make Elementor Tabs Scroll Horizontally On Mobile, Tablets, and Desktop | Step by Step

Рет қаралды 9,666

The Creative Arena

Күн бұрын

Пікірлер: 53

@borisnieminen677 9 ай бұрын

Excellent! Thanks for posting this great tutorial. That mobile simulator extension is fantastic, complete with mock up of tool bar. Should be included with Elementor.

@zahrasameen9263 11 ай бұрын

The nested feature setting that you showed at the start, I was exactly looking for something like that and no one talked about it until I saw your video. Thank you so much. Continue creating detailed content like this. You earned a subscriber

@li8houzz Жыл бұрын

God Bless you man! Been looking for this whole day!!! I wish I could pay you.

@thecreativarena Жыл бұрын

glad it was helpful to you

@li8houzz Жыл бұрын

@@thecreativarena thank you. Just one question, if I want to do it only for mobile, is it possible? So desktop and tab will be like usual second line not scrollable. Please let me know.

@li8houzz Жыл бұрын

I only want that scrollable option in mobile, but for tab and computer, 2-3 lines are even fine, how to do that my friend? Please help.

@thecreativarena Жыл бұрын

if you scroll down to the comment section of the snippet page alot of answers and modifications to the code is added there. your will find something to help you there

@mahadahmed4181 6 ай бұрын

Amazing, this video helped me so much Also now you dont need to add html code for scrolling there is now an option for that in > additional settings

@thecreativarena 6 ай бұрын

Yes i have also made a video for that you can see here kzfaq.info/get/bejne/hpOfoLGmvLzennk.html and other videos on Horizontal scroll on the channel

@rohandesigner Жыл бұрын

Wooh!!! That's Awesome, I've been looking for this.

@karcmamuzykancko7109 Жыл бұрын

Great video! Congrats! :) That's exactly what I was looking for! Just have one.... maybe two questions ;) Is it possible to add Arrows Navigation to tabs and how to do it?

@thecreativarena Жыл бұрын

thats bad UI, arrow navigation is good on carousel or slider content not tab

@borisnieminen677 9 ай бұрын

@thecreativarena That may be true, so what prompts the user to explore further? In my case I have 10 tabs that I would like to display using this method. What would you propose to indicate to the user that there is more to discover? I noticed that Maxime has this as an option in this tutorial: element.how/elementor-horizontal-scroll-menu-taxonomy-tabs-extra-features/

@Webdevhamzabinzia 11 ай бұрын

This is awesome. Thanks for the video. Is there any way I can use this scroll on the tab with the following button? so when I client the next button the tab scrolls?

@thecreativarena 11 ай бұрын

That Doesn't sound to me like a good UI practice, if you want that you can use the new elementor Carousel or check this video if it helps kzfaq.info/get/bejne/otSlqK-mm529qmg.html

@ferrywap 3 ай бұрын

Plesse im having issues with mine, so i elementor i have a parent container with the default style, boxed an 1140px (default style) and in the parent container i have different child containers each has the styling of width 22% and min-height 14vh. When i add the code overflow-x: scroll, etc it works but it makes the child container shrinks. I already add a custom width to the css of 70% so i scroll within a specific width but the inner container shinks, the more containers i duplicate/add the more it shrinks. Please how can you help fix it?. Thank you for all you do. Please note im not using tabs just a separate design

@user-hs8lu2sv2y 6 ай бұрын

hi dear , thanks for sharing why the first tabs is look bigger than other

@thecreativarena 6 ай бұрын

if this method didnt work our well for you please try this method on this tutorial kzfaq.info/get/bejne/hpOfoLGmvLzennk.html

@ashwinsalunke9929 8 ай бұрын

this is nice explanation but how I can add arrows to the left and right tabs ??

@eriknelsen1308 11 ай бұрын

thank you for the video! my first tab wants to be a bit higher than the others any idea why?

@thecreativarena 11 ай бұрын

Do you mean the tabs titles are not of the same height? i don't really understand what you mean however you can check this second method of how to make your tabs scroll horizontally kzfaq.info/get/bejne/hpOfoLGmvLzennk.html

@leanprogrammer 10 ай бұрын

hey nice tutorial! what plugin are you using to show all the devices on the right? 😎

@thecreativarena 9 ай бұрын

its a Chrome extension called Mobile Simulator and you can find other wonderful extensions i use as a web designer here kzfaq.info/get/bejne/qJebjZh-25vQmnU.html

@leanprogrammer 9 ай бұрын

@@thecreativarena Amazing, Thanks!!

@Hassanakora Жыл бұрын

Which tool you are using for checking on different devices

@thecreativarena Жыл бұрын

its an addon for chrome browser you can see it here and a list of other cool addons i use kzfaq.info/get/bejne/qJebjZh-25vQmnU.html

@user-oy2pv7ri7w 11 ай бұрын

Hi, This is really helpful. But I have an issue, I want a Vertical Tab on the Desktop and Tablet view, and Horizontal Tab on the mobile view. Could please help me out with it

@thecreativarena 11 ай бұрын

yeah sure thats posible but you will have to duplicate the and go to responsiveness settings and make one visible only on mobile and the other vissible on tablet and desktop and the make the one tablet vertical leaving the one on mobile the way it is i hope this was helpful to you

@thecreativarena Жыл бұрын

You can also check this simple video showing how to achieve this without the need for any code or extra plugin. kzfaq.info/get/bejne/hpOfoLGmvLzennk.html Code Snippet Here element.how/elementor-tabs-mobile-scroll/

@socalwebcontent 11 ай бұрын

This is great! What about a dropdown menu for mobile? I'm creating many tabs with long names. Thanks in advance!

@thecreativarena 11 ай бұрын

Dropdown Menu For tabs on mobile?? that is totally not advisable as that is a bad design practice, tabs is different from menu widget hope you understand

@user-oy2pv7ri7w 11 ай бұрын

@@thecreativarena Hi, Even I have such a query. I am not from a coding background, and I need to do a list of contents on a particular page - like tabs and content, and when we go to mobile view the content tab has to become like a dropdown menu and one particular to be active by default. Could you help me out with it?

@thecreativarena 11 ай бұрын

for tabs to be fully functional it has to be either vertical or horizontal not dropdown how i wish i could see a sample of what you are talking about to understand it better

@Aziz-Ahmed-UK 11 ай бұрын

Any idea how to add left and right navigation arrows to this menu bar so that user can scroll left and right using arrows? and can you use navigation menu widget instead of using tabs, like the one youtube has? thanks

@thecreativarena 11 ай бұрын

i will look in to i make a video about it subsequently however you can look this video up also to see if it helps kzfaq.info/get/bejne/iLagjMJ10L7JqY0.html

@Miladd79 11 ай бұрын

Hi, how can I sticky the tab heading in top Can we do it with coding? If possible, put the tutorial or the code🙏🏻

@thecreativarena 11 ай бұрын

yes you can stick the tab by simply going to the advance settings of the tab widget and use either the position option set it to fixed, or better still go down to the motion effects and set the sticky option to either top or bottom. but i think its not a good UX practice to stick tab heading to the top. But i have a better way to go about achieving something that may be similar to what you may have in mind and will make a video about it shortly if it will help

@Miladd79 11 ай бұрын

@@thecreativarena Thank you for answering. I tried the way you said to fix the position and even sticky option in motion effects, but unfortunately, the contents of the tabs are locked in this method and they do not have the ability to scroll vertically. I am waiting to watch your short video🙏🏻❤️

@thecreativarena 11 ай бұрын

Yes the content of the tabs will also be locked and when you scroll down the tabs and the content follows as well if there are other contents below the container where the tab is it will make your site look bad and very unprofessional

@thecreativarena 11 ай бұрын

you can type the url here with gaps between something like this example . com or www websitename com and i will know and look it up and tell you how it was achieved

@vadsanakhammanivong5962 11 ай бұрын

Can i do it with coding

@ZiDesigner Жыл бұрын

Thank u bro

@tomgacz 8 ай бұрын

How to create horizontal scroll loop grid?

@thecreativarena 8 ай бұрын

it really simple to do this from the video with the use of tabs and filter product or post by category check this video for help kzfaq.info/get/bejne/bMeWedyKqZq1kqM.html

@tomgacz 8 ай бұрын

@@thecreativarena it’s loop carousel, i need scrolling on loop grip, because loop carousel don’t have option to add alternate template

@thecreativarena 8 ай бұрын

please help understand better so i can help you

@mohammadrahighi713 10 ай бұрын

thanks for tut. where is code? link is not open

@thecreativarena 10 ай бұрын

the link is opening try again and just sign in using your email to view the code

@user-hx3wx3dg2p 6 ай бұрын

not worked

@shohrux5722 6 ай бұрын

.e-n-tabs-heading.e-n-tabs-heading.e-n-tabs-heading.e-n-tabs-heading { overflow-x: auto; /* enable horizontal scrolling */ display: flex; flex-wrap: nowrap; justify-content: start; padding-bottom: 10px; } .e-n-tabs-heading > .e-n-tab-title{ white-space: nowrap; /* optional, prevent tabs title from breaking into 2 lines */ } .e-n-tabs-content .e-n-tab-title { display: none; /* don't display mobile tab titles */ } /* Desktop scroll bar styling, if you want the horizontal scroll on desktop as well */ @media (min-width:1025px){ .e-n-tabs-heading::-webkit-scrollbar-track { background-color: #dedede; } .e-n-tabs-heading::-webkit-scrollbar { height: 8px; } .e-n-tabs-heading::-webkit-scrollbar-thumb { background-color: #aeaeae; } } /* optional: make the tabs titles sticky */ .e-n-tabs-heading { position: sticky; top: 0; z-index: 9; background-color: #fff; } /* Code from element.how/elementor-tabs-mobile-scroll/ * Version 1.0 * Copyright 2022 Maxime Desrosiers */ document.addEventListener('DOMContentLoaded',function(){ let scrollableNavigations = document.querySelectorAll('.e-n-tabs-heading'); scrollableNavigations.forEach((scrollableNavigation, index) => { let navigationItems = scrollableNavigation.querySelectorAll('.e-n-tab-title'); scrollableNavigation.style.scrollBehavior = "smooth"; navigationItems.forEach((navigationItem,i) => { let scrollToPosition = (navigationItem.getBoundingClientRect().left + navigationItem.offsetWidth/2) - (window.innerWidth/2); navigationItem.addEventListener('click',function(event){ scrollableNavigation.scrollTo(scrollToPosition, 0); }); }); }); });