Intro
Here’s a step-by-step Guide to “Fix Nested Tabs Position in Mobile – Elementor Tutorial with CSS” that walks readers through applying the CSS solution in Elementor.
Fix Nested Tabs Position in Mobile – Elementor Tutorial with CSS
If you’re using nested tabs in Elementor and they appear misaligned or pushed down on mobile devices, you’re not alone. This is a common issue when dealing with complex tab layouts inside responsive Elementor pages.
In this quick guide, we’ll walk you through how to fix the position of nested tabs so they stay visible at the top on mobile using custom CSS — no extra plugins required.
✅ What You’ll Learn
- How to locate the nested tabs in Elementor
- How to apply a custom CSS snippet
- How to make sure tabs stay visible and aligned on mobile
🧰 What You Need
- Elementor (Free or Pro)
- Access to the page with nested tabs
- Basic understanding of Elementor interface
🪜 Step-by-Step Guide
Step 1: Open the Page with the Tabs
- Go to your WordPress dashboard.
- Navigate to Pages > Select the page where you’ve used nested tabs.
- Click “Edit with Elementor.”
Step 2: Locate the Outer Tabs Widget
- Click on the outer tabs section (the main tabs container).
- Note the CSS class or assign a custom one for targeting.
- You can go to the Advanced tab > CSS Classes, and add something like:
e-n-tabs-mobile
- You can go to the Advanced tab > CSS Classes, and add something like:
Step 3: Add Custom CSS to Fix Tab Alignment
Use the following CSS to ensure your nested tabs stay at the top and align properly on mobile:
@media (max-width: 767px) {
/* Fix nested tabs position on mobile */
.e-n-tabs-mobile > .elementor-widget-container > .e-n-tabs > .e-n-tabs-heading {
display: grid;
grid-template-columns: repeat(2, 1fr); /* 2 tabs per row */
gap: 10px;
}
.e-n-tab-title {
height: 80px;
width: 100%;
box-sizing: border-box;
display: flex;
align-items: center;
justify-content: center;
text-align: center;
background-color: #f4f4f4;
border: 1px solid #ccc;
padding: 10px;
font-size: 16px;
}
/* Ensure active tab doesn't break layout */
.e-n-tab-title.active,
.e-n-tab-title.e-active,
.e-n-tab-title.elementor-active {
background-color: #ddd;
border-color: #888;
height: 80px;
width: 100%;
box-sizing: border-box;
padding: 10px;
}
}
Step 4: Apply the CSS in Elementor
Option 1: Page-Level CSS
- In Elementor, click the hamburger menu (☰) at the top-left.
- Go to Site Settings > Custom CSS (Pro only).
- Paste the CSS code above.
Option 2: Widget-Level CSS (Free or Pro)
- Click on the tabs widget.
- Go to the Advanced tab.
- Scroll to Custom CSS (Pro users) and paste the code.
Or, if you’re using the free version:
- Install a plugin like Simple Custom CSS or use Appearance > Customize > Additional CSS in WordPress.
- Paste the CSS code there.
✅ Step 5: Save and Test
- Click Update on your page.
- View the page on a mobile device or use Chrome DevTools to emulate a mobile view.
- Your nested tabs should now display in 2 rows with equal width and height, staying aligned at the top.
✅ Final Result
Your nested tabs should now:
- Stay at the top on mobile
- Be displayed in 2 columns (2 per row)
- Have uniform height and width
- Work seamlessly in both desktop and mobile views
🧩 Bonus Tip:
If you have more than 4 tabs, just change the CSS to show 3 columns or stack them by using:
grid-template-columns: repeat(3, 1fr); /* for 3 tabs per row */
🚀 Wrapping Up
Fixing mobile display issues in Elementor, especially with nested widgets, often comes down to tweaking layout and alignment with some custom CSS. With just a few lines of code, you can make your design much more user-friendly on small screens.
Let me know in the comments if you want any consultation related to your project.
