Create Elementor Tabs With Horizontal Scroll For Mobile Users
Facebook apps uses this, Uber Eats, why not you? Give mobile user a great UX by having a lot of content displayed in a discrete manner! No more clutter!
Elementor Wrap Text Around Featured Image Easily
In this tutorial, I will show you how you can wrap text around featured images in Elementor, and have everything still be fully dynamic. Unfortunately, there is no super simple
Elementor Show or Hide Anything Based on URL
In this tutorial, I will show you how you can show or hide any element, container or section based on a URL parameter you would append to your URL. We
Easy Elementor Mega Menu! Free! No Plug-Ins required!
Desktop users testing the mobile version: refresh your browser after resizing the window.
Important : I created a new tutorial, that is a lot more simple, and much better for accessibility. I recommend you use the instructions found there instead.
The tutorial here is still a decent option if you want a responsive mega menu, as my other tutorial is for desktop only. However, for a serious website, you should go the Ubermenu, if what you are looking for is a responsive mega menu. It is accessible, and SEO friendly.
- Ubermenu from CodeCanyon
Unfortunately, you can’t create the sub menu elements using Elementor templates. However, until the addons make their mega menu plugins accessible, it is definitely the optimal option.
Important : I recommend using this technique for websites where SEO is not really important. The way the html ends up being setup is not ideal for SEO or for accessibility.
Recommended for smaller projects, or personal websites.
If you need a proper mega menu for your e-commerce website, or other serious project where SEO and accessibility is important, I suggest either:
- Crocoblock, particularly their JetMenu plugin (although the whole set is worth it) or
- The Plus Addons
Both have great mega menu elements for direct Elementor integration.
Back to the tutorial: Elementor Free Compatible
This Elementor responsive mega menu tutorial uses the default ‘tabs’ element that comes with Elementor Free. Also used are templates from Elementor Pro, but they could be changed to Anywhere Elementor templates.
Anywhere Elementor Free is free.
A few improvements were made after the video was recorded, in regards to the columns settings. Read that part carefully.
To begin with, create the section that will house the menu
Give it these settings
Give it a z-index value of ' 999 ' and the CSS ID ' sectionmen '
Make the section sticky (if you want)
Then, create three columns in that section. Insert logo, hamburger menu (for mobile), and tabs element in each column respectively.
For the animated hamburger icons, download them here.
See this article for the examples to choose your preferred icon. Insert all the HTML from your preferred icon in an HTML element in the middle column.
Animated Icons! Change the Elementor Hamburger Menu Icon
Give some life to that boring icon! Get an awesome animated hamburger menu icon!
Now, adjust the settings for the columns
The column with the tabs element will adjust automatically to the remaining space.
Adjust for tablet view (logo column 89%, icon 11%, tab element 100%)
And for mobile devices also
Display the HTML element that has the hamburger icon code only on mobile
Modify its code a little bit by adding this
$('nav.elementor-tabs').slideToggle();
Finally, build your Elementor mega menu!
You will need to write the title each tab like this
Change the URL and text to your own.
<a href='https://element.how/elementor-add-ons-comparison-and-overview/'>Review</a>
For the content, simply insert the template shortcode, as seen above
You will also need to create an empty first tab item. This is necessary for the code to work properly with this default tab element.
For optimal results, your templates should be fully responsive and display great on all viewports. They also need to have a background color.
Finally, add all of this code in an html Element towards the bottom of the page (or header template)
<script>jQuery(document).ready(function($){
$(".elementor-tabs:first").replaceWith(function() {
return "<nav class='elementor-tabs' role='tablist'>" + this.innerHTML + "</nav>";
});
if($(window).width() >= 1025){
$('.elementor-tabs:first .elementor-tab-title').mouseenter(function(){
$(this).click();
$('nav.elementor-tabs .elementor-tab-content').each(function()
{
$(this).removeClass('clearfixede');
});
});
}
$('nav.elementor-tabs').mouseenter(function(){
$('.dark').addClass('darker');
});
$('nav.elementor-tabs .elementor-tab-title > a').click(function(){
window.location = $(this).attr('href');
});
$('nav.elementor-tabs').mouseleave(function(){
$('.dark').removeClass('darker');
$('nav.elementor-tabs .elementor-tab-title').each(function()
{
$(this).removeClass('elementor-active');
});
$('nav.elementor-tabs .elementor-tab-content').each(function()
{
$(this).addClass('clearfixede');
});
});
$(window).load(function(){
$('.elementor-tab-content').each(function() {
if($(this).html().length <= 100) $(this).addClass('clearfixede');
if($(this).html().length <= 100) $(this).prev().addClass('nodownicon');
});
});
$('nav.elementor-tabs .elementor-tab-mobile-title').click(function() {
$(this).next().slideToggle();
$(this).toggleClass('menuopen');
});
$('body').click(function(evt){
if(evt.target.id == "sectionmen")
return;
if($(evt.target).closest('#sectionmen').length)
return;
if($(window).width() <= 1025){
if($('nav.elementor-tabs').is(":visible")){
$('.hamburger').click();
}
}
});
});
</script>
<style>
nav.elementor-tabs:first-of-type .elementor-tab-title:first-of-type{
display: none!important;
}
nav.elementor-tabs .elementor-tab-content {
padding: 0!important;
position:absolute;
width: 100vw;
right:0;
margin-top: -16px;
}
.darker {
position: fixed;
height: 100%;
width: 100%;
background-color: black;
top: 0;
left: 0;
opacity: 0.4;
z-index: 99;
}
@media (max-width:1025px){
nav.elementor-tabs .elementor-tab-content {
position:relative;
}
#sectionmen{
overflow-y: scroll;
max-height: 84vh;
overflow-x: hidden;
}
nav.elementor-tabs .elementor-tab-title.elementor-tab-mobile-title:after {
font-family: "Font Awesome 5 Free";
font-weight: 400;
content: "\f358";
font-size: 18px;
position: absolute;
color: black;
opacity: .4;
right:21px;
z-index: 0;
overflow: hidden;
margin-top: 8px;
}
.nodownicon:after{
content: "!important;
}
.menuopen:after{
content:'\f359′!important;
}
nav.elementor-tabs {
display: none;
}
}
@media (min-width:1025px){
.clearfixede{
display:none!important;
}
}
@media (min-width:1981px){
.logocolumn{
width: 46%!important;
}
}
@media (max-width: 1024px){
nav.elementor-tabs .elementor-tab-mobile-title {
display: block;
}
nav.elementor-tabs .elementor-tabs-wrapper {
display: none;
}
}
@media (min-width: 1025px){
nav.elementor-tabs .elementor-tab-desktop-title {
display: inline-table!important;
}
nav > div.elementor-tabs-wrapper {
text-align: right;
display:block!important;
}
}
</style>
<div class="dark"></div>
@media (min-width: 1025px){
nav.elementor-tabs .elementor-tab-desktop-title {
display: inline-table!important;
}
nav > div.elementor-tabs-wrapper {
text-align: right;
display:block!important;
}
}
Thank you for the lesson, I have built a very simple menu without the shortcodes and that is all I needed however I do need to say that the text below my tabs is jumping up and down and I cannot change that... any suggestions?
follow my tutorial instead! would be my suggestion
Hi i am struggeling to get the elementor short codes. How do i get them in the new wp? Does it all work with standard elementor or only with anywhere elementor?
yes, it works with standard Elementor... just go to the templates section, and create a new template... if you have the free version, use anywhere elementor instead
This is great and is exactly what I needed today! But there's one thing, the mega-menu doesn't always close when we move the mouse away (not active) do you have an idea what might be causing this issue? Thanks!
Thanks! Also, just to let readers know that Capucine was missing a bit of code from my code above... after she added it it fixed this problem!
How do i make the tab-menu align right?
And there is no content in the mobile (hamburger) menu...???
Test site: http://ralf.sommergrafik.dk
Like · Reply · 1y · Edited
And there is no content in the mobile (hamburger) menu...???
hello Rikkelie! add this CSS to make it align to the right
nav.elementor-tabs .elementor-tab-desktop-title {
display: inline-table!important;
}
.elementor-widget-tabs .elementor-tabs {
text-align: right;
}
It doesn't show on mobile because you turned off mobile view for the tab element
Maxime Desrosiers no i didnt. I see the burger menu, but there is no content.
Maxime Desrosiers thank you. I will try that 🙂
Rikkelie Cecilia Sommer Holm Yea I could see it from the DOM the mobile view was turned off... it had the CSS class elementor-hidden-mobile , which is what elementor adds when we toggle that 'hide on mobile' switch.