Mastering BigCommerce Navigation: How to Hide Specific Pages from Your Header (While Keeping Them in the Footer)

Mastering BigCommerce Navigation: How to Hide Specific Pages from Your Header (While Keeping Them in the Footer)

Effectively managing your BigCommerce store's navigation is crucial for user experience and conversion. A common requirement for merchants is to display certain web pages, like "About Us" or "Terms of Service," in the footer for legal or informational purposes, but keep them out of the primary header navigation to reduce clutter and focus on product discovery. This scenario often prompts questions within the BigCommerce community.

The Challenge: Selective Page Display

A recent BigCommerce forum thread perfectly illustrated this challenge. Joel Kremer, using the Vault Theme by Lonestar Templates, sought to remove specific web pages from his header navigation while ensuring they remained accessible via the footer. His initial checks within theme styles didn't reveal a direct option, leading him to seek expert advice.

Solution 1: Native BigCommerce Admin Control (Recommended)

The most straightforward and recommended solution, highlighted by Sajid Jameel from Codinative.com, leverages BigCommerce's built-in administrative features. This method requires no coding and is ideal for most merchants.

Here’s how to implement it:

• Step 1: Access your BigCommerce control panel.
• Step 2: Navigate to Storefront > Web Pages.
• Step 3: Open the specific page you wish to hide from the header (e.g., "About Us").
• Step 4: Scroll down to the "Navigation Menu Options" section.
• Step 5: Uncheck the box labeled "Yes, show this web page on the navigation menu."
• Step 6: Click Save.

Repeat these steps for each page you want to remove from your header navigation. This action hides the page from the primary menu while keeping it published and accessible for linking from your footer or other site areas.

Solution 2: CSS Customization for Theme-Specific Hiding

While the native admin control is typically the first and best approach, a CSS-based solution, as provided by Rawi Rai, offers an alternative for specific scenarios or highly customized themes. This method involves adding custom CSS to your theme, usually via Storefront > Theme > Customize > Theme Styles > Web Pages & Footer > Optimized One-Page Checkout (or a similar custom CSS injection point).

Remember to replace the example URLs with the actual URLs of the pages on your store. This CSS snippet targets specific links by their href attribute, effectively hiding them from view. It's a useful fallback if native settings are overlooked or insufficient for a particular theme element.

Solution 3: Theme Template Customization (Advanced)

Solomon Lite's contribution highlighted that for certain themes, like the Vault Theme, direct modification of theme template files might be necessary if native settings or simple CSS don't fully address the issue. This advanced approach involves editing navigation partials within the Stencil theme files and is typically undertaken by a developer due to the need for direct code modification.

Key Takeaways for BigCommerce Merchants

• Prioritize BigCommerce's native admin settings (Storefront > Web Pages > Navigation Menu Options) for managing page visibility.
• Utilize targeted CSS for specific cases where native options aren't applicable or for fine-grained control.
• For complex theme-specific issues, consider advanced theme template customization, ideally with developer assistance.
• Strategic navigation control enhances user experience, guiding customers effectively and improving store aesthetics.

Conclusion

The BigCommerce community thread provides valuable insights into a common e-commerce challenge. By understanding and applying these solutions—from simple admin toggles to more advanced CSS and theme file modifications—merchants can maintain a clean, intuitive header navigation while ensuring all essential pages remain accessible. For businesses leveraging BigCommerce, mastering such fundamental controls is key to a streamlined and successful online presence.