August 9, 2023

Align Title and Icon Properly in Elementor Tabs with CSS

Play Video

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

  1. Create a tab with the Elementor widget.
  2. Change the Direction to the left for a vertical layout.
  3. 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.

  1. Go to the Advanced Tab
    Select your Elementor tab and go to the advanced section.
  2. 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;
    }
    
  3. 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.

Required Resources

Elementor Logo
Free Options
Credit to Web Squadron
Web Squadron is a popular YouTube channel dedicated to providing informative tutorials, tips, and insights on web development and design. With a strong focus on WordPress and website builders like Bricks Builder, the channel aims to help users of all skill levels, from beginners to advanced developers, create and optimize their websites. By offering easy-to-understand, step-by-step guidance, Web Squadron provides practical and valuable content.
Visit
Align Title and Icon Properly in Elementor Tabs with CSS
Welcome back!
Enter your Helwp credentials to sign in.

No Account yet? Sign Up

My Account
Menu
Give Feedback
Describe your feedback *
Rate Helwp
Share
Facebook
Twitter
LinkedIn
Reddit
Email
WhatsApp
Telegram
Pocket
Report
Problem *
Describe the problem
Want us to reply?
Your E-Mail
Affiliate Disclosure

At Helwp, we’re committed to transparency and honesty. Therefore, we want to inform you that some of the links on our website are affiliate links. This means that, at no additional cost to you, we may earn a small commission if you click through and make a purchase.

We only promote products or services that we genuinely believe in. These affiliate commissions help us to maintain the website and continue to provide you with free, high-quality WordPress content.

If you are interested in how you can support us even further, check out our support page.