Big Cartel Theme Support

How do I hide, or display, drop-down menus?

How do I hide, or display, drop-down menus?

Drop-down menus display links to all of the subpages / subcategories (children) of a main menu link (parent). Drop-down menus are only revealed when the user hovers their cursor over a main menu link that has child links.

Hide drop-down menus

To disable all drop-down menus, add the following CSS to your custom style coding area — see Where do I add custom style code?:

/* Disable all drop-down menus */
.nav-menu li:hover > ul {
	display: none;
}
/* Enable social drop-down menus */
.social-menu li:hover > ul,
.share-menu li:hover > ul {
	display: block;
}

Note the second part of this code ensures that the drop-down menus used for Facebook Like and other dynamic social links are not disabled.

If you wish to disable drop-down menus only in a specific menu area, you can use the menu classes .page-menu, .category-menu, .footer-menu and .tree-menu . For example, to disable drop-down menus in the category menu area, we would add the following CSS instead of the code above:

/* Disable drop-down menus in the category menu area */
.category-menu li:hover > ul {
	display: none;
}

You can also use the methods detailed in the article Using the body tag to create page specific custom styles to hide drop-down menus on specific pages.

Click the Done and Save buttons to apply your changes.

Display drop-down menus

If your drop-down menus are already disabled and you wish to enable them, first check the following:

  1. If you disabled the menus 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 menus are disabled by default for your theme, check for theme-specific CSS — see The theme-specific custom styles — that disables the menus and, if found, delete it from your custom style coding area.

If neither of the above items apply, your drop-down menus are most likely disabled via core theme CSS. You can override this by applying the opposite of what we’ve detailed above, however do note that the drop-down menus may be disabled for reasons specific to your theme and enabling them may result in less than ideal appearance / functionality. Always test your theme thoroughly after making changes.

For example, to undo the disabling of all drop-down menus, you would add the following CSS to your custom style coding area:

/* Enable all drop-down menus */
.nav-menu li:hover > ul {
	display: block;
}

AarcadeHow do I hide, or display, drop-down menus?