Learn how to align title and icon in Elementor Tabs using CSS. Web Squadron provides a simple solution to a common problem, helping you create neat and consistent tabs.
Identifying the Problem with Aligning Title and Icon
What’s the Issue?
When working with Elementor’s Tabs, you might notice that the icons don’t align properly if the titles have different lengths. Here’s what happens:
- Short Title
The icon stays in place. - Long Title
The icon shifts to the right.
This inconsistency can disrupt your design. Let’s explore how to align title and icon.
Creating Vertical Tabs with Icons
- Create a tab with the Elementor widget.
- Change the Direction to the left for a vertical layout.
- Add icons to each tab, as desired.
Now, you’ll notice the problem: the icons don’t align properly with different title lengths. It’s time to align the title and icon.
Align Title and Icon Properly in Elementor with CSS
We’ll use a simple CSS code snippet to align the title and icon, ensuring a consistent look.
- Go to the Advanced Tab
Select your Elementor tab and go to the advanced section. - Use the CSS Code
Navigate to the custom CSS settings and add the following code:.e-n-tab-title.e-normal { display: flex; justify-content: space-between; }
- See the Result
The titles align to the left, and the icons align to the right, creating a uniform appearance.
Conclusion
We hope this tutorial helps you align the title and icon in your Elementor Tabs. Feel free to experiment and make it your own.