Big Cartel Theme Support

How do I hide, or display, the category menu on non-product or other specific pages?

How do I hide, or display, the category menu on non-product or other specific pages?

To hide menu areas, navigate to your custom style coding area - see Where do I add custom style code? - paste in the relevant custom CSS from the examples below and then edit it to your preference.

Hiding on non-product pages

Using the method detailed in article Using the body tag to create page specific custom styles to hide the category menu area on non-product pages, we get the following custom style coding:

/* Hide the category area on non-product pages */
body.custom .category-group,
body#contact-page .category-group {
	visibility: hidden;
}

Note that we have also singled out the contact page with body#contact-page .category-group, because Big Cartel class this page under theme instead of custom.

Hiding on the home page

As detailed in article Using the body tag to create page specific custom styles, we could target any specific page when hiding the category menu area. For example, on the home page:

/* Hide the category area on the home page */
body#home-page .category-group {
	visibility: hidden;
}

Or, combining the previous example to hide on all non-product pages, including the home page:

/* Hide the category area on home and non-product pages */
body#home-page .category-group,
body.custom .category-group,
body#contact-page .category-group {
	visibility: hidden;
}

Hide the menu without taking up space

visibility: hidden; makes the category menu container invisible but still allows it to take up space so that our layout positioning is not affected. If we wanted to hide the menu and also prevent it from taking up space, we would use display: none; as follows:

/* Hide the category area on non-product pages */
body.custom .category-group,
body#contact-page .category-group {
	display: none;
}

The use of the menu group class .category-group will ensure that other items that may be included in the category menu area are also hidden. For some themes, this may not provide the desired result. In this case you can hide only the menu, and not the entire group, by using the class .category-nav as follows:

/* Hide the category menu on non-product pages */
body.custom .category-nav,
body#contact-page .category-nav {
	visibility: hidden;
}

Note that the home page and display: none; options we learnt above can be applied here as well. These same methods can also be used to hide any of the menu areas - .page-nav, .category-nav, .cart-nav or .footer-nav - on any specific page(s).

Displaying (unhiding) the category menu

If your category menu is already hidden and you wish to display it, first check the following:

  1. If you hid the category menu using the methods in the previous section of this article, find the relevant CSS you added and delete it from your custom style coding area.
  2. If the text is hidden by default for your theme, check for theme-specific CSS — see The theme-specific custom styles — that hides the category menu and, if found, delete it from your custom style coding area.

If neither of the above items apply, your category menu is most likely hidden via core theme CSS. You can override this by applying the opposite of what we’ve detailed above.

For example, to undo hiding of the category group on non-proudct pages, you would add the following CSS to your custom style coding area:

/* Unhide the category menu on non-product pages */
body.custom .category-group,
body#contact-page .category-group {
	display: block;
	visibility: visible;
}

Note that we have undone both hiding methods with this code — i.e. display and visibility — so that our unhiding works regardless of which method has been applied in the core theme CSS.

Again, targeting the home page works in the same way as described earlier in this article, i.e.

/* Unhide the category area on the home page */
body#home-page .category-group  {
	display: block;
	visibility: visible;
}

Or all together:

/* Unhide the category area on home and non-product pages */
body#home-page .category-group,
body.custom .category-group,
body#contact-page .category-group {
	display: block;
	visibility: visible;
}

Check your mobile layout, if enabled.

In some cases, applying the above styles may cause the category menu to display when the mobile layout is enabled. This is not typically desirable. To ensure that the category menu is hidden on the mobile layout, add the following on a new line after the above styles:

/* Hide the category area on mobile layout */
@media only screen
and (max-width: 680px) {
	body#home-page.mobile-ui-enabled .category-group,
	body.custom.mobile-ui-enabled .category-group,
	body#contact-page.mobile-ui-enabled .category-group {
		display: none;
	}
}

AarcadeHow do I hide, or display, the category menu on non-product or other specific pages?