How to Keep Mobile Nested Tabs Aligned at the Top in Elementor - WordPress Tutorial
Jan. 10, 2025, 12:28 a.m.
When designing websites with Elementor, nested tabs can sometimes cause alignment issues, especially on mobile devices. By default, the tab headings may not display properly, causing the tabs to stack vertically or become misaligned. This can affect user experience, especially on smaller screens.
This method is simple and doesn’t require you to access your theme files directly.
- In your WordPress dashboard, go to Appearance > Customize.
- Click on Additional CSS.
- Paste the custom CSS code in the text box.
- Click Publish to save the changes.
/* Tab button on Faqs page . keep the buttons on top on small devices */
@media (max-width: 767px) {
.e-n-tabs-mobile > .elementor-widget-container > .e-n-tabs > .e-n-tabs-heading {
display: flex;
flex-wrap: wrap !important;
justify-content: flex-start; /* Aligns items to the left */
}
#tabs-services {
display: flex;
flex-wrap: nowrap;
overflow-x: auto;
width: auto;
justify-content: flex-start; /* Ensures left alignment of tabs */
}
#tabs-services .tab-title {
width: auto;
flex: 0 0 auto;
text-align: left; /* Left-aligns text inside tabs */
}
.e-n-tab-title {
flex-shrink: 0;
flex-basis: auto;
text-align: left; /* Left-aligns the tab titles */
}
}
With this fix, your nested tabs will stay aligned at the top, ensuring a smooth and professional mobile navigation experience. This simple CSS tweak can save time and frustration when dealing with responsive design in Elementor!