Two elements appear in almost every professionally built e-commerce navigation: a logo on the left side of the menu bar, and a cart icon on the right. They’re standard expectations for store visitors — the absence of either creates a subtle but real sense that something is missing.
Both are available in Ruby Mega Menu Pro, and both are configured from the main admin panel.
Adding a logo
In the Ruby Mega Menu admin panel, navigate to the Logo settings. Click the image selector and choose your logo from the WordPress media library. You can upload a new image directly from this interface if needed.
Set the logo height in pixels. Ruby will scale the width proportionally. For Retina displays, upload a logo at twice your intended display size — if you want the logo to display at 120px wide, upload it at 240px wide and set the height accordingly.
The logo links to your homepage by default. This is the standard behavior and matches visitor expectations.
Logo placement
By default, the logo appears at the left edge of the menu bar, before the navigation items. This is the standard layout for most sites. If your navigation items are centered or if you’re using a right-aligned layout, you may want to adjust the logo position via CSS to ensure the visual balance is correct.
Adding the WooCommerce cart icon
In the Ruby Mega Menu admin panel, find the WooCommerce settings. Enable the cart icon. This adds a shopping cart icon to the right side of the menu bar with a dynamic item count that updates when items are added to the cart.
The cart icon links to the WooCommerce cart page. Ensure your cart page is properly configured in WooCommerce → Settings → Advanced before enabling this.
Styling considerations
The cart icon inherits the menu bar’s color scheme. If your menu bar is dark, the icon will be light-colored; if it’s light, the icon will be dark. You can override this with CSS if you need a specific color that differs from the menu bar’s default.
The icon count badge — the small number that appears over the cart icon when items are in the cart — is styled by Ruby and can be customized via the admin panel’s color settings.
Testing
After configuring, test the cart flow end to end: add an item to the cart and verify that the count badge updates correctly. Test on mobile to confirm the cart icon is visible and tappable at smaller screen sizes.
These two elements — logo and cart icon — transform a navigation bar from a utility into something that feels like a complete, professional interface. They’re small changes with a noticeable effect on how the site is perceived.