Back to Top

How do I control the spacing between my menu items?

Filed in Header, Footer & Menus

Depending upon your theme, you may have Menu Padding styles available in your CSS code that will allow you to make quick changes to the spacing between the links in your shop menus. This can be useful for condensing your menu to fit more links or for expanding your menus to take up more room.

To see if you have Menu Padding styles available for your theme, locate your CSS edit controls and look for the MENU PADDING section – as detailed in the support article How do I locate and use my theme's CSS?

Menu Padding options work in the same way as your other theme custom options – see How do I use the Custom Options for my Big Cartel theme? – and can be easily edited by setting the option values.

For example, our Menu Padding may include the category menu option:

/* - - - - Category Menu Item Divider
Change space between menu items */
{% assign category_menu_padding = '12' %}

If we wanted to condense the category menu item spacing, we could set the option to a lower value as follows:

/* - - - - Category Menu Item Divider
Change space between menu items */
{% assign category_menu_padding = '6' %}

Edit Menu Padding

Menu Padding can be edited using basic CSS.

For example, our Menu Padding may include category menu styles:

/* - - - - Category Menu Item Divider
Change space between menu items */
#category_nav span.bul {
	padding-left: 12px;
	padding-right: 12px;
	}

If we wanted to condense the category menu item spacing, we would edit this code as follows:

/* - - - - Category Menu Item Divider
Change space between menu items */
#category_nav span.bul {
	padding-left: 6px;
	padding-right: 6px;
	}

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

For more information on CSS editing, refer to How do I customise my Big Cartel theme?

Related articles...