Streamlining Your BigCommerce Navigation: How to Control Header and Footer Link Visibility

The Challenge: Selective Link Display in BigCommerce Headers

A common scenario for BigCommerce merchants, particularly those utilizing themes like 'Iconic Electronics', is the need to manage navigation links with precision. The user, sasha revankar, faced a specific challenge: how to remove certain links (such as 'Certificate', 'Disclaimer', 'FAQs', 'Payment Policy', 'Privacy Policy') from the main header menu, while ensuring they remained fully accessible and visible within the store's footer.

This seemingly simple request highlights a crucial aspect of e-commerce store management: maintaining a clean, user-friendly header navigation without sacrificing access to important informational pages. Overloading the header can detract from the shopping experience, while hiding essential links entirely can frustrate customers.

Solution 1: The CSS Workaround for Advanced Control

Daniel Olvera from Trepoly.com offered a robust, code-based solution. His approach involves strategically manipulating the link order and then using CSS to hide specific elements in the header without affecting the footer. This method is particularly useful when dealing with complex navigation structures or when the links aren't standard web pages easily controlled via the admin panel.

• Reorder Links: Move the links intended for removal from the header to the very end of your header navigation list.
• Apply Custom CSS: Utilize CSS to target and hide links beyond a certain position (e.g., after the 7th link). This CSS must be specific to the header menu to ensure footer links remain visible.
• CSS Implementation: The custom CSS can be added directly to your theme files (requiring some technical comfort) or via the BigCommerce Page Builder. If using Page Builder, it's crucial to place the CSS within an HTML widget in a GLOBAL region to ensure it loads consistently across all pages.

While effective, this solution requires a basic understanding of CSS and BigCommerce's theme file structure or Page Builder functionality. It provides granular control but might be overkill for simpler cases.

Solution 2: The Direct, No-Code BigCommerce Admin Approach

Sajid Jameel from Codinative.com provided an elegant and straightforward solution that leverages BigCommerce's built-in administrative features, requiring no code or CSS modifications. This method is ideal for links that correspond to standard web pages within your store, which was the case for sasha revankar's specific examples.

Steps to Hide Web Pages from Header Navigation:

1. Go to Storefront > Web Pages in your BigCommerce admin panel.
2. Click on each specific page you wish to remove from the header (e.g., 'Certificate', 'Disclaimer', 'FAQs', etc.).
3. Scroll down to the Navigation Menu Options section.
4. Uncheck the box that states "Yes, show this web page on the navigation menu."
5. Click Save & Exit.
6. Repeat this process for every page you want to hide from the header.

This method effectively removes the selected pages from the header navigation while keeping them fully accessible via their direct URLs and any links placed in the footer. It's a clean, official way to manage page visibility without altering theme code, making it the recommended solution for most merchants.

Community Insight and Best Practice

This thread beautifully illustrates the value of the BigCommerce community in providing both technical workarounds and direct, platform-specific solutions. For managing the visibility of standard web pages in your BigCommerce store, the administrative method (Solution 2) is almost always the preferred and simplest approach. It maintains the integrity of your theme and avoids potential issues that can arise from custom code. The CSS workaround (Solution 1) remains a valuable tool for more complex customization needs, such as hiding specific categories or custom links that aren't controlled by page settings, or when a design choice dictates a specific number of visible links.