Navigation Bar
The Navigation Bar is the topmost section of your storefront and serves as the primary navigation element for customers. It provides quick access to product categories, search functionality, the shopping cart, and other important store areas. A well-designed navigation bar improves usability and helps customers find what they need quickly.
On this page
Site Builder does not include a preview mode. Any changes saved are applied directly to your live website. Review all content carefully before saving.
Overview
The Navigation Bar appears at the top of every page on your storefront. It is one of the most critical sections because it guides customers through your store and provides access to essential functions.
The Navigation Bar typically includes:
- Your store logo and brand name
- Links to product categories
- A search bar for product discovery
- Shopping cart icon with item count
- User account access
- Contact or support links
Design Layouts
The Navigation Bar provides multiple professionally designed layouts. You can choose the layout that best matches your store's branding and navigation needs.
Available layout options include:
- Design 1 — Classic horizontal layout with centered logo
- Design 2 — Split layout with logo on the left and menu on the right
- Design 3 — Full-width layout with dropdown category menus
- Design 4 — Minimal layout with hamburger menu for mobile-first design
Changing the design affects only the appearance and arrangement of the Navigation Bar while preserving its core functionality.
Color & Style Options
The Navigation Bar inherits colours from your global Color & Style configuration. However, you can also customize specific elements of the Navigation Bar to create visual distinction.
Customizable colour elements include:
- Background Colour — The bar background (can be transparent or solid)
- Text Colour — Menu item and link colours
- Active/Hover Colour — Colour when customers hover over or select a menu item
- Cart Icon Colour — Shopping cart and notification badge colours
- Search Bar Style — Background, border, and icon colours
Some layouts support a transparent Navigation Bar that overlays the Hero Section. This creates a modern, immersive look but ensure text remains readable over your hero images.
Logo & Branding
Your store logo is displayed prominently in the Navigation Bar. The logo settings are configured in the Brand section, but you can control how it appears in the Navigation Bar.
Configuration options:
- Logo Position — Left, center, or right alignment
- Logo Size — Adjust the display size of your logo
- Store Name Display — Show or hide the store name next to the logo
- Mobile Logo — Use a simplified logo for mobile devices if needed
Search & Cart
The Navigation Bar includes a search bar and shopping cart icon that are essential for customer navigation and conversion.
Search Bar
Configuration options:
- Search Placeholder — Custom text shown in the search field (e.g., "Search products...")
- Search Icon Style — Magnifying glass or custom icon
- Search Bar Width — Full-width or compact
- Auto-suggestions — Enable or disable product suggestions as customers type
Shopping Cart
Configuration options:
- Cart Icon Style — Different cart icon designs
- Item Count Badge — Show number of items in cart
- Cart Dropdown — Enable mini-cart preview on hover
- Cart Button Text — Custom label (e.g., "Cart", "My Bag", "Basket")
Best Practices
- Keep the Navigation Bar clean and uncluttered — limit to 5-7 main menu items
- Ensure the logo is clearly visible and links back to the homepage
- Use dropdown menus for stores with many categories
- Make the search bar easily accessible and prominent
- Ensure cart icon is always visible with an accurate item count
- Test navigation on mobile devices — most traffic comes from mobile
- Use contrasting colours so the Navigation Bar stands out from content below
- Keep menu labels short and descriptive
- Review and update menu links regularly, especially during promotions