As of 28th May 2016, only the most current version of Aarcade themes will receive personal support and updates – read more…

  Back to Top

Why does my sub-menu format change when it exceeds a number of links?

Filed in Header, Footer & Menus

Sub-menus are created using the methods described in sections Sub-page Menus, Sub-category Menu and Artist Category Menu of the support article How do I add links to my shop menus? (An overview of all Aarcade menu areas).

If your Aarcade theme has drop-down or pop-out style sub-menus, the menu links will typically be displayed in a vertical list (depending upon your theme).

Big Cartel Drop Down Menu

However, if you continue to add links to your sub-menu you may see a change in the format of the menu after a certain number of links has been exceeded.

Big Cartel Condensed Drop Down Menu

This change in formatting is intentional. With a large number of links in a vertical list a sub-menu can become too tall and hinder usability. In some cases – depending upon the viewer’s screen size – tall menus may bleed off the page and cause some links to be inaccessible.

To prevent this, Aarcade themes automatically change the format of tall sub-menus to a comma-separated list. All menu links are still included, your sub-menu font and colours styles are maintained and, for optimum readability, the formatting also ensures that links are not separated over two lines.

Advanced customisation

You can adjust the width of the “big” dropdown format by adding the following to your custom style coding area – see Where do I add custom style coding in my Big Cartel theme controls? – and adjusting the width value to your preference.

/* Adjust width of big drop down */
.nav_menu li.drpdwn.drpbig ul,
.nav_menu li.drpno.drpbig ul {
	width: 220px;
	}

To remove the “big” dropdown format altogether, you can add the following to your custom style coding area and edit to suit your preference.

/* Remove big drop down format */
.nav_menu li.drpdwn.drpbig ul, .nav_menu li.drpno.drpbig ul {
	width: auto;
	padding: 0
	}
.nav_menu li.drpdwn.drpbig li, .nav_menu li.drpno.drpbig li {
	display: block;
	border-bottom: 1px solid;
	padding: 0;
	line-height: 1;
	font-size: 0 !important;
	}
.nav_menu li.drpdwn.drpbig li a, .nav_menu li.drpdwn.drpbig li a:hover {
	font-size: 11px;
	display: block;
	padding: 8px;
	white-space: nowrap;
	text-decoration: none !important;
	background-color: {{sub_menu_background}} !important;
	}
.nav_menu li.drpdwn.drpbig li a:hover {
	background-color: {{sub_menu_background_hover}} !important;
	}

Related articles...