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

  Back to Top

How do I center align a horizontal menu?

Filed in Advanced Customisation

Note that advanced customisation support articles are provided as a courtesy to Aarcade and Big Cartel users. Aarcade does not provide support for advanced customisation. Please read the following related articles:

Example 3 in the support article How do I create custom override styles? explains in detail how to develop the required CSS to center a horizontal menu or navigation area (i.e. the Footer copyright text).

/* Center align footer copyright text */
#footer_a {
	float: none;
	text-align: center;
	max-width: 100%;
}

The same method (refer to Example 3) can be applied to center the links in page and category horizontal menus. The resulting code for the page menu links area should be:

/* Center align page menu */
#page_nav_menu.nav_menu {
	float: none;
	text-align: center;
	width: 100%;
	max-width: 100%;
}

The resulting code for the category menu links area should be:

/* Center align category menu */
#category_nav_menu.nav_menu {
	float: none;
	text-align: center;
	width: 100%;
	max-width: 100%;
}

As with Example 3, to apply these override styles we take the relevant code block, paste it into our custom style code area and click the Save link at the top of the customisation area once we have finished editing custom styles.

Cart Link

For some themes, changing your horizontal menu to a full width center-aligned block will vertically offset your cart link. In this case, there are a number of CSS approaches you can take to adjust the position of your cart link. For example:

1. Use the CSS margin property to move the cart link up..

/* Adjust cart menu vertical position */
#cart_nav {
	margin-top: -21px;
}

2. Use absolute positioning to move the cart link..

/* Absolute position cart menu */
#cart_nav {
	position: absolute;
	top: 120px;
	right: 20px;
}

3. Use the method detailed at the start of this article to center align the cart link..

/* Center align cart menu */
#cart_nav {
	float: none;
	text-align: center;
	width: 100%;
	max-width: 100%;
	margin-top: 20px;
}

With all of the above examples we have used the method detailed in the article How do I create custom override styles? to identify the cart link container as..

#cart_nav

Refer to How do I create custom override styles? for more information on creating custom CSS for your cart link.

Responsive layout

If your new cart link styling does not look correct at smaller window widths (i.e. for iPad, iPhone, etc.), you can add media queries so that the styling is not applied when window width is below a specified value.

For example:

/* Only apply style for window width greater than 750px 
- adjust value as necessary */
@media only screen and (min-width: 750px) {

	/* Absolute position cart menu */
	#cart_nav {
		position: absolute;
		top: 120px;
		right: 20px;
	}

}

Related articles...