BigCommerce Guides

BigCommerce Navigation Mastery: Declutter Your Header, Retain Footer Links

As an e-commerce migration expert at Big Migration (big-migration.com), we understand that a well-structured navigation system is the backbone of any successful online store. It guides customers, enhances user experience (UX), and ultimately drives conversions. However, striking the right balance between comprehensive information and a clutter-free primary navigation can be a challenge for many BigCommerce merchants.

A common scenario involves displaying essential, often legal or informational, web pages like "About Us," "Terms of Service," or "Billing Terms and Conditions" in the footer for easy access without crowding the main header navigation, which should ideally focus on product categories and core customer journeys.

BigCommerce admin panel showing 'Navigation Menu Options' for a web page
BigCommerce admin panel showing 'Navigation Menu Options' for a web page

The Challenge: Selective Page Display in BigCommerce

This exact challenge was recently highlighted in a BigCommerce forum thread by Joel Kremer, who was using the Vault Theme by Lonestar Templates. Joel wanted to remove specific web pages from his header navigation but ensure they remained accessible via the footer. His initial checks within the theme styles didn't reveal a direct option, prompting him to seek expert advice from the BigCommerce community.

This is a familiar predicament for many store owners. While themes offer extensive customization, the granular control over navigation elements sometimes requires a deeper dive. Fortunately, BigCommerce provides several powerful methods to achieve this, ranging from native administrative controls to more advanced theme file modifications.

Solution 1: Native BigCommerce Admin Control (Recommended for Most)

The most straightforward, robust, and highly recommended solution, championed by Sajid Jameel from Codinative.com in the forum thread, leverages BigCommerce's built-in administrative features. This method requires absolutely no coding and is ideal for the vast majority of merchants using Stencil themes.

This approach directly controls the visibility of individual web pages within your store's navigation menus, ensuring a clean separation between header and footer content without needing to touch a single line of code. It's future-proof against theme updates and ensures consistent behavior.

Here’s how to implement it:

  • Step 1: Log in to your BigCommerce control panel.
  • Step 2: Navigate to Storefront > Web Pages. This section lists all the informational pages on your site.
  • Step 3: Locate and click on the specific page you wish to hide from the header (e.g., "About Us," "Terms of Service," "Billing Terms and Conditions"). This will open the page editing interface.
  • Step 4: Scroll down the page until you find the "Navigation Menu Options" section.
  • Step 5: Uncheck the box labeled "Yes, show this web page on the navigation menu." This setting specifically controls its appearance in the primary header navigation.
  • Step 6: Click the Save button at the bottom right of the page.

Repeat these steps for each page you want to remove from your header navigation. This action hides the page from the main menu while keeping it fully accessible if linked from the footer, other pages, or directly accessed via its URL.

Solution 2: Custom CSS (A Quick Fix for Specific Cases)

While the native control is superior, there might be rare instances where a quick CSS fix could be considered, especially if you're dealing with a very specific element or a highly customized theme that behaves unexpectedly. Rawi Rai provided a CSS snippet in the forum thread as an alternative approach.

It's crucial to understand that CSS only hides the element from display; it doesn't remove it from the page's HTML structure. This means the link is still technically present in the page source, though invisible to the user. This method is less robust than native controls and can be susceptible to changes in your theme's underlying HTML structure during updates.

How to implement custom CSS:

First, identify the unique CSS selectors for the links you want to hide. The provided example uses `href` attributes, which is a reliable way to target specific links.

To add this CSS to your BigCommerce store:

  1. Go to Storefront > Theme Customization.
  2. Click on "Advanced" > "Edit Theme Files".
  3. Navigate to `templates/layout/base.html` or a relevant stylesheet (e.g., `assets/scss/theme.scss`).
  4. Paste the CSS code within a `