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.
@zahrasameen926311 ай бұрын
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
@mahadahmed41816 ай бұрын
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
@thecreativarena6 ай бұрын
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
@borisnieminen6779 ай бұрын
@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/
@Webdevhamzabinzia11 ай бұрын
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?
@thecreativarena11 ай бұрын
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
@ferrywap3 ай бұрын
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-hs8lu2sv2y6 ай бұрын
hi dear , thanks for sharing why the first tabs is look bigger than other
@thecreativarena6 ай бұрын
if this method didnt work our well for you please try this method on this tutorial kzfaq.info/get/bejne/hpOfoLGmvLzennk.html
@ashwinsalunke99298 ай бұрын
this is nice explanation but how I can add arrows to the left and right tabs ??
@eriknelsen130811 ай бұрын
thank you for the video! my first tab wants to be a bit higher than the others any idea why?
@thecreativarena11 ай бұрын
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
@leanprogrammer10 ай бұрын
hey nice tutorial! what plugin are you using to show all the devices on the right? 😎
@thecreativarena9 ай бұрын
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
@leanprogrammer9 ай бұрын
@@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-oy2pv7ri7w11 ай бұрын
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
@thecreativarena11 ай бұрын
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/
@socalwebcontent11 ай бұрын
This is great! What about a dropdown menu for mobile? I'm creating many tabs with long names. Thanks in advance!
@thecreativarena11 ай бұрын
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-oy2pv7ri7w11 ай бұрын
@@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?
@thecreativarena11 ай бұрын
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-UK11 ай бұрын
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
@thecreativarena11 ай бұрын
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
@Miladd7911 ай бұрын
Hi, how can I sticky the tab heading in top Can we do it with coding? If possible, put the tutorial or the code🙏🏻
@thecreativarena11 ай бұрын
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
@Miladd7911 ай бұрын
@@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🙏🏻❤️
@thecreativarena11 ай бұрын
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
@thecreativarena11 ай бұрын
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
@vadsanakhammanivong596211 ай бұрын
Can i do it with coding
@ZiDesigner Жыл бұрын
Thank u bro
@tomgacz8 ай бұрын
How to create horizontal scroll loop grid?
@thecreativarena8 ай бұрын
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
@tomgacz8 ай бұрын
@@thecreativarena it’s loop carousel, i need scrolling on loop grip, because loop carousel don’t have option to add alternate template
@thecreativarena8 ай бұрын
please help understand better so i can help you
@mohammadrahighi71310 ай бұрын
thanks for tut. where is code? link is not open
@thecreativarena10 ай бұрын
the link is opening try again and just sign in using your email to view the code
@user-hx3wx3dg2p6 ай бұрын
not worked
@shohrux57226 ай бұрын
.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); }); }); }); });
@userunknozn9 ай бұрын
.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; /* x optional, prevents tabs title from breaking into 2 lines */ } .e-n-tabs-content .e-n-tab-title{ display: none; /*Don't diplay 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: #ffffff; } .e-n-tabs-heading: : -webkit-scrollbar { height: 8px; }