Header (Covent Garden)

Learn how to configure the theme header here. In your control panel, go to Storefront > Themes, and click the blue "Customize" button to launch Theme Editor. In the left hand column of the Theme Editor, click the panel labelled 'Header'

Simple Header

Selecting this option will activate a fixed layout simple header that places the logo, main navigation and utility links on one line. This is not recommended for stores with large category structures (unless activating the 'enclosed navigation' option), a vast amount of pages displayed in the header, or lots of utility links.

Use the simple header for sites without a lot of content areas.

If you have activated "Show Phone Number in Header", to save space in the header, the phone number displays in the page footer when "Simple Header" is activated.

The simple header respects other options such as colors and sticky navigation.

We would recommend activating the "Replace Utility Links With Icons" feature if you are going to use the simple header.

Header Features

Cart Icon

You can change the icon used in the utility navigation between a bag, cart and basket icon.

Replace the Utility Menu with Icons

This option replaces the standard text labels in the top utility menu, i.e. "Search", "My Account" etc. with SVG icons.

Show Phone Number in Header

If you have set up a phone number in the Store Profile area of the BigCommerce Control Panel, checking this option will show the phone number in the header. If you enable "Simple Header" the phone number will only display in the footer, to save space

Logo Settings

You can position your logo on the left, in the center, or on the right.

Image based logo

Image logo size

You can adjust the size of the logo here.

Please note before you consider adjusting the recommended sizes, take a look at how three of the biggest brands on the planet size their logos.

Text based logo

Configure the size and color of your text based logo here.

Main Navigation

Sticky Navigation

Enabling this feature allows the main navigation bar to stick to the top of the viewport on large screens and above. This simplifies the layout of the utility navigation, only displaying search, cart and compare when available.

While the sticky navigation is configured to work with unlimited categories, for the best appearance limit your main navigation items to 8 or less.

Hide Logo on Sticky Navigation

Checking this will hide the logo when the sticky navigation activates on scroll. Scrolling back to the top of the page will make the logo reappear.

Hide Web Pages in Main Navigation

Checking this option stops information pages created in the CMS from appearing in the top navigation bar.

Hide "View Parent" Links

By default with the style of dropdown navigation we use, lists appear when the top level item is clicked. In this case, we present a "View Parent" link to allow visitors to access the top level category. This option prevents the "View Parent" link appearing.

Show "Brands" in Navigation

This adds an additional "Brands" link to the navigation. This is just a top level link that redirects to the main Brands page, it does not create a drop down list.

Navigation Design

Covent Garden includes three styles of navigation, that can be displayed in multiple configurations to provide a unique layout to your brand.

Setting Up Menu Depths For dropdown menus to appear, you need to set up a menu display depth of at least 2 levels deep.

To set this, in your store Control Panel, go to Store Setup > Store Settings and click the Display tab. Under the Category Setting heading, look for the Menu Display Depth field.

Simple Dropdown Menu

To create fly out menus, set the menu depth to at least 3.

Expanded Dropdown Menu

This is a useful menu if you have 3 or more levels of categories.

Mega Menu

This looks best if you configure your categories 3 levels deep. If you have not set up your entire category structure to work with the mega menu, choose one of the alternative options above.

Enclosed Navigation

Check this option to hide all top level categories inside a "Shop Online" link. Clicking the link will make a navigation list appear. Combine this with the "Expanded Dropdown Menu" navigation design for best results if you have a large category structure.

You can rename the link that appears in the menu with the text box in this section. Note that the text field has a 64 character limit

Header (Covent Garden)

Simple Header