WordPress Electro Theme: Topbar, Menu & Icons Setup

How to Edit Topbar in Electro Theme | Create Menu, Add Icons & Customize

If you are using the Electro Theme for your WordPress or WooCommerce store, you must have noticed the Topbar section that appears above the header. Many beginners struggle to customize it properly. In this guide, I will explain how to edit the Topbar in Electro Theme, how to create custom menus, add icons, and make it look professional.

By the end of this tutorial, you will be able to fully customize your Electro theme Topbar without using any extra plugin. This tutorial works for the latest version of Electro Theme and WordPress.

Why Topbar Customization is Important?

The Topbar is the first thing visitors see on your online store. A well-structured Topbar can:

• Display important links like Login, Register, Wishlist, Compare.
• Show contact details or customer support information.
• Add language and currency switchers for international customers.
• Improve user experience and navigation.

Step 1: Locate the Topbar Settings in Electro Theme

After logging into your WordPress dashboard, go to:

1. Appearance > Customize
2. Select Header section
3. Click on Topbar settings

Here you will find options to enable or disable the Topbar, change its background color, text color, and alignment.

Step 2: Creating Menus for the Topbar

To add links in the Topbar, you need to create a custom WordPress menu. Follow these steps:

1. Go to Appearance > Menus.
2. Create a new menu called “Topbar Menu”.
3. Add links like About Us, Contact Us, Track Order, FAQ.
4. Assign this menu to the Topbar Menu Location.

Once you save changes, your custom links will appear in the Topbar.

Step 3: Adding Icons in the Topbar

Electro Theme supports icons for menu items. To add icons:

1. Install and activate the Menu Icons by ThemeIsle plugin (free).
2. Edit your Topbar menu items.
3. Choose icons like Phone, Email, User, Wishlist.
4. Save the menu.

This will display beautiful icons next to your menu items, improving the design.

Step 4: Adding Contact Information

The Electro Theme also allows adding phone numbers or email addresses directly in the Topbar. You can customize it from:

• Customize > Header > Topbar
• Enter your business phone or email
• Change alignment (Left or Right)

Example: 📞 +91 77381 73460 | ✉ info@codepressacademy.in

Step 5: Styling the Topbar

The design of your Topbar plays an important role in branding. You can:

• Change background color (match with your theme colors).
• Set typography (font size, style, and color).
• Add hover effects for links.
• Enable sticky Topbar for better navigation.

Video Tutorial

If you prefer a step-by-step video tutorial, watch the video below:

Step 6: Adding Language and Currency Switcher

If your store targets international customers, you can add:

• WPML or Polylang for multiple languages.
• WooCommerce Currency Switcher plugin for multiple currencies.

These can be placed in the Topbar for quick access.

Step 7: Mobile Responsiveness

Always check how your Topbar looks on mobile devices. Electro Theme provides mobile settings in:

• Customize > Header > Mobile View
• Enable or disable Topbar on mobile
• Adjust padding and alignment

SEO Benefits of a Well-Designed Topbar

A clear and user-friendly Topbar improves user engagement and reduces bounce rate. It also helps search engines understand your site’s navigation structure, boosting your SEO performance.

FAQs about Electro Theme Topbar

1. Can I remove the Topbar in Electro Theme?

Yes, you can disable it from Customize > Header > Topbar.

2. Can I use custom CSS for styling?

Yes, add custom CSS from Appearance > Customize > Additional CSS.

3. Does Electro Theme support Elementor for Topbar customization?

Yes, you can design a custom header with Elementor Pro and disable the default Topbar if you prefer.

4. Is Electro Theme good for WooCommerce?

Yes, Electro Theme is one of the best WooCommerce themes for electronics stores and comes with full customization options.

Conclusion

Customizing the Topbar in Electro Theme is easy and powerful. With menus, icons, contact details, and styling, you can make your store look professional and user-friendly.

Use this step-by-step guide to edit your Topbar today. Don’t forget to watch the full tutorial video above for a better understanding.

Recommended: Explore more tutorials on WordPress customization and WooCommerce setup here on our blog.