Big Cartel Theme Support

How do I control the spacing and dividers between my menu items?

How do I control the spacing and dividers between my menu items?

To edit the spacing and dividers between the links in your menu areas, navigate to your custom style coding area - see Where do I add custom style code?

Adjusting menu item spacing

Pixel values entered in CSS must be whole numbers immediately followed with px

To adjust the Page Menu item spacing, add the following custom CSS and edit the pixel values as needed:

/* Page menu item spacing */
.nav-block .page-menu > li.divider {
	padding-left: 12px;
	padding-right: 12px;
}

To adjust the Category Menu item spacing, add the following custom CSS and edit the pixel values as needed:

/* Category menu item spacing */
.nav-block .category-menu > li.divider {
	padding-left: 8px;
	padding-right: 8px;
}

To adjust the Footer Menu item spacing, add the following custom CSS and edit the pixel values as needed:

/* Footer menu item spacing */
#footer .footer-menu > li.divider {
	padding-left: 4px;
	padding-right: 4px;
}

To adjust a Tree Menu item spacing, add the following custom CSS and edit the pixel values as needed:

/* Tree menu item spacing */
.nav-block .tree-menu > li.divider {
	padding-left: 20px;
	padding-right: 20px;
}

Always click the Save link at the top of the customisation area when you have finished editing your CSS code.

Note that the same method can be applied to vertical menus in most cases, however the padding values would be added to the top and bottom instead of left and right. For example, if our category menu is located in a sidebar and has a list / vertical format, we might use:

/* Category menu item spacing */
.nav-block .category-menu > li.divider {
	padding-top: 12px;
	padding-bottom: 12px;
}

Edit menu item dividers

To edit the Page Menu item divider, add the following custom CSS and change the divider content as needed or enter none (without quotes) to remove:

/* Page menu item divider */
.nav-block .page-menu > li.divider:before {
	content: "/";
}

To edit the Category Menu item divider, add the following custom CSS and change the divider content as needed or enter none to remove:

/* Category menu item divider */
.nav-block .category-menu > li.divider:before {
	content: "|";
}

To edit the Footer Menu item divider, add the following custom CSS and change the divider content as needed or enter none to remove:

/* Footer menu item divider */
#footer .footer-menu > li.divider:before {
	content: none;
}

To edit a Tree Menu item divider, add the following custom CSS and change the divider content as needed or enter none to remove:

/* Tree menu item divider */
.nav-block .tree-menu > li.divider:before {
	content: "+";
}

Always click the Save link at the top of the customisation area when you have finished editing your CSS code.

AarcadeHow do I control the spacing and dividers between my menu items?