How to Style Magento 2 Menu Without Editing CSS file | LandofCoder Tutorial

Colorful & Eye-catchy Menu are the main keys to keep customers’ view at the first sight. It brings a wonderful shopping experience on your store with their own store.

But the question is “How can you style color for your menu” ? When you don’t have enough technical knowledge and how can you do it without code ?

Come with us. With our Magento 2 Mega Menu Extension & Magento 2 Mega Menu PRO Extension will help you “Style Magento 2 Menu without editting CSS File”.

Watch Video Tutorial first:

Login Admin -> Venustheme -> Menu Management -> Choose Menu Top to Edit -> Go to Menu Editor

  1. Style Magento 2 Menu Color & Background

Click to Menu you want to Style -> Edit -> Design Option:

+ Text Color: Enter color pallet for text menu
+ Hover Text Color: Color of text menu when you hover on
+ Background Color: Color of background of text when you don’t hover on
+ Background Hover Color: When you hover on, color of background of menu will be appear
+ Inline CSS: If you want to set border, padding or color of them, you can add them here and remember to separate by Semi-colon.

2. Style Magento 2 Menu Dropdown

Go to Submenu and Click Edit -> At Dropdown and Edit Style for Menu Dropdown

+ Set Width: The width of your dropdown when you click on the menu with submenus
+ Alignment: Set position of your menu display
+ Background Color: Set color from current pallet color range.
+ Background Image: Set image background for menu
+ Background Repeat:
+ Background Position X:
+ Background Position Y:
+ Inline CSS: As soon as you want to style for border, color, padding for dropdown, you can add them here and separated by semi-colon.

Click to Update -> Save & Continue Edit

3. Clear Cache

Then Clear Cache: System -> Cache Management -> Select All -> Submit

Congratulation! You’ve Style Magento 2 Menu without Editing CSS File. This tutorial help you style color for text, background, dropdown size, border, padding, image & color background, etc. We hope that you can style your menu easily

Magento 2 Mega Menu Tutorials

Some other extensions you maybe interested in

Related Posts

Nhu Quynh

Recent Posts

How to Organize Effective Email-to-SMS Magento Alerts for Better Customer Communication

The modern consumer is anything but patient. Today, timely communication with customers is not an…

1 hour ago

Top 6 Powerful LearnDash Themes to Skyrocket Your Online Courses

Presentation is as important as content in online learning. From your LearnDash theme, the professional…

4 hours ago

Streamoz Review 2025: What Twitch Growth Services Reveal About the Future of eCommerce Visibility

Daily, millions watch live streams on Twitch in the form of games, music, IRL content,…

2 days ago

How Powerful Social Media Boosting Tools Like Jaynike Music Marketing Are Transforming eCommerce Marketing in 2025

In the contemporary setting of competitive musicality, even the most talented are having unspeakable trouble…

2 days ago

TikTokstorm Review 2025: Powerful Social Media Boosting Tool Shaping the Future of eCommerce

In the dynamic world of eCommerce, visibility is everything. Whether you’re running a small Shopify…

2 days ago

Top Magento 2 SEO Extensions to Supercharge Enterprise SEO in 2025

Magento 2 SEO Extensions are essential for enterprises in 2025 to boost visibility, optimize performance,…

1 week ago