BigCommerce Stencil Customization: Master the Art of Hiding Header Navigation Links

In the competitive realm of e-commerce, a streamlined and intuitive user experience (UX) is not just a luxury—it's a necessity. BigCommerce, with its powerful Stencil framework, offers incredible flexibility, but sometimes the simplest customizations can yield the biggest impact. One common challenge BigCommerce store owners face is managing their website's navigation: how to keep certain web pages active and accessible without cluttering the prominent header navigation.

At Big Migration, we understand that every detail of your BigCommerce storefront contributes to conversion and customer satisfaction. This guide, inspired by a real-world BigCommerce forum query, delves into a precise and effective method for selectively hiding specific page links from your storefront's header, ensuring your primary navigation remains clean and focused.

The Challenge: Active Pages, Invisible Links

Imagine you have a 'Privacy Policy' page, a 'Terms of Service' page, or perhaps a dedicated landing page for a specific marketing campaign. These pages need to be active and accessible (e.g., via direct links, footer navigation, or internal calls-to-action), but they don't necessarily belong in your main header navigation, which is typically reserved for core product categories, 'About Us,' or 'Contact Us.' Cluttering the header can overwhelm visitors, dilute your main calls to action, and detract from a seamless browsing experience.

This was precisely the dilemma faced by Matt Phillips, a BigCommerce merchant using the Stencil Supermarket theme. He needed a way to maintain the functionality of certain web pages while ensuring their links did not appear in the highly visible header section of his website. This scenario highlights a crucial need for many businesses: the ability to control visibility without sacrificing content availability.

Why Not Just Deactivate or Delete the Page?

Some might wonder, why not just deactivate or delete the page if you don't want it in the header? The answer lies in functionality and SEO. Deactivating a page would make it inaccessible, breaking any existing links from external sources (like search engines or social media campaigns) or internal links (from your footer or blog posts). Deleting it would have similar, often irreversible, consequences. The goal is to keep the page live and crawlable, just not prominently displayed in the primary navigation.

Navigating the BigCommerce Theme Editor for Custom CSS

BigCommerce Stencil themes are designed for customization. For visual tweaks like hiding elements, the Theme Editor is your go-to tool. This interface allows you to add custom CSS (Cascading Style Sheets) that overrides or extends your theme's default styling, all without directly editing core theme files that might be overwritten during updates.

To access the Theme Editor and add your custom CSS:

1. From your BigCommerce Admin, go to Storefront > Theme.
2. Click Customize on your current theme.
3. In the Theme Editor, navigate to Theme Styles > Global > Advanced (or similar path depending on your theme).
4. Click Edit theme files.
5. In the file tree on the left, locate and open assets > scss > theme.scss. This is where you'll add your custom CSS.

The Elegant CSS Solution Explained

The solution, expertly provided by community member Rawi Rai, leverages the power of CSS to target specific elements based on their attributes. This method is precise, efficient, and avoids broader changes that could impact other parts of your navigation.

.navPages-action[href="https://www.essentialwonders.com/selecting-coffee-grinds/"] { display:none;}

Breaking Down the Code:

• .navPages-action: This is a CSS class commonly used in Stencil themes to style navigation links within the header. It targets the clickable element itself.
• [href="https://www.essentialwonders.com/selecting-coffee-grinds/"]: This is an attribute selector. It specifically targets any element that has an href attribute (which is what links use to point to a URL) whose value exactly matches the provided URL. This is the crucial part you'll need to customize for your own store.
• { display:none;}: This is the CSS declaration that does the magic. display: none; completely removes the element from the document flow, making it invisible and taking up no space.

By combining these, you create a rule that says: "Find any navigation link that points to this exact URL, and completely hide it."

Step-by-Step Implementation Guide:

1. Identify the Exact URL: Go to the webpage you want to hide and copy its full URL from your browser's address bar. For example, https://yourstore.com/your-hidden-page/.
2. Access the BigCommerce Theme Editor: Follow the steps outlined above to navigate to Storefront > Theme > Customize > Edit theme files.
3. Locate theme.scss: Open assets > scss > theme.scss in the file editor.
4. Paste Your Custom CSS: Scroll to the very bottom of the theme.scss file and paste the CSS snippet.
5. Customize the URL: Crucially, replace https://www.essentialwonders.com/selecting-coffee-grinds/ with the exact URL of your page.
6. Save and Apply: Click Save & apply file.
7. Test Your Store: Visit your storefront and verify that the link is no longer visible in the header. You may need to clear your browser cache or view in an incognito window to see the changes immediately.

Best Practices and Advanced Considerations

While this CSS solution is elegant and effective, keep these points in mind:

• Specificity: The attribute selector makes this CSS rule highly specific, ensuring it only affects the intended link and not other navigation elements.
• Multiple Links: If you need to hide multiple links, simply add a new line of CSS for each URL you wish to hide.
• Theme Updates: Custom CSS added to theme.scss is generally safe from being overwritten during minor theme updates. However, for major theme version upgrades, always back up your custom code and re-verify its functionality.
• Accessibility: Using display: none; hides the element visually and from screen readers. If the content needs to be accessible to screen readers but visually hidden, more advanced techniques (like `sr-only` classes) would be required, but for simple navigation hiding, display: none; is standard.
• Future-Proofing: If you change the URL of the hidden page, you'll need to update the CSS rule accordingly.
• Beyond the Header: The same principle can be applied to hide elements in other parts of your store (e.g., footer, sidebar) if you can identify their unique CSS selectors and attributes.

This method provides a powerful yet simple way to fine-tune your BigCommerce store's navigation, enhancing the user experience without complex theme modifications. It's a testament to the flexibility of the Stencil framework and the value of targeted CSS.

Conclusion

Optimizing your BigCommerce storefront often comes down to mastering small, impactful customizations. Hiding specific links from your header navigation is a prime example of how a simple CSS snippet can significantly improve your site's aesthetics and user experience. By keeping your primary navigation clean and focused, you guide your customers more effectively, reduce friction, and ultimately, boost conversions.

At Big Migration, we specialize in helping BigCommerce merchants unlock the full potential of their platforms. Whether it's a quick CSS tweak or a comprehensive platform migration, our expertise ensures your e-commerce store is always performing at its best. Don't let navigation clutter hold your business back; embrace precision and clarity in your storefront design.