Back to Top

How do I change the margin and alignment of my header text, image or logo?

Filed in Header

Adjusting Header Alignment

To adjust your header alignment, in your Big Cartel shop admin area, navigate to your Extra Styles area as detailed in the support article What are the Extra Styles for my Aarcade Big Cartel theme?

In the Extra Styles area, locate the header alignment setting:

/* - - - - Header Text, Image or Logo Alignment
Refer to instructions at http://goo.gl/P5Bse */
{% assign header_image_or_text_alignment = 'left' %}

Valid values are “left”, “center” or “right”, for example:

/* - - - - Header Text, Image or Logo Alignment
Refer to instructions at http://goo.gl/P5Bse */
{% assign header_image_or_text_alignment = 'center' %}

Click the Save link when you have finished editing your Extra Styles.

Click To View Method For Older Themes

Header alignment can be edited via your Primary Custom Options. Primary Custom Options are located in your Design > Pages – Layout page code (refer to How do I use the Custom Options for my Big Cartel theme?).

The header alignment settings is located in the {{ HEADER OPTIONS }} option section.

{% assign header_image_or_text_alignment = 'left' %}

Valid values are “left”, “center” or “right”, for example:

{% assign header_image_or_text_alignment = 'center' %}

Click the Save button when you have finished editing your Layout page options.

Adjusting Header Margins

The header margins define the spacing around the header image / text. To adjust this spacing, in your Big Cartel shop admin area, navigate to your Extra Styles area as detailed in the support article What are the Extra Styles for my Aarcade Big Cartel theme?

In the Extra Styles area, locate the header margin values:

/* - - - - Header Margin
Edit the margin around the header title/image */
{% assign header_margin_top = '0' %}
{% assign header_margin_bottom = '16' %}
{% assign header_margin_left = '30' %}
{% assign header_margin_right = '30' %}

Adjust the values as required. For example, when using a full-width header image, you may wish to set all margin values to zero:

/* - - - - Header Margin
Edit the margin around the header title/image */
{% assign header_margin_top = '0' %}
{% assign header_margin_bottom = '0' %}
{% assign header_margin_left = '0' %}
{% assign header_margin_right = '0' %}

You can also use negative values. For example, if there is a menu under our header image and we want to reduce the space or create an overlap between the two elements:

/* - - - - Header Margin
Edit the margin around the header title/image */
{% assign header_margin_top = '0' %}
{% assign header_margin_bottom = '-2' %}
{% assign header_margin_left = '0' %}
{% assign header_margin_right = '0' %}
Click To View Method For Older Themes

The header margins define the spacing around the header image / text. To adjust this spacing, in your Big Cartel shop admin area, navigate to your Extra Styles area as detailed in the support article What are the Extra Styles for my Aarcade Big Cartel theme?

In the Extra Styles area, locate the header margin values:

/* - - - - Header Margin
Edit the margin around the header title/image */
#logo_block {
	margin-top: 0px;
	margin-bottom: 16px;
	margin-left: 30px;
	margin-right: 30px;
	}

Adjust the values as required. For example, when using a full-width header image, you may wish to set all margin values to zero:

/* - - - - Header Margin
Edit the margin around the header title/image */
#logo_block {
	margin-top: 0px;
	margin-bottom: 0px;
	margin-left: 0px;
	margin-right: 0px;
	}

You can also use negative values. For example, if there is a menu under our header image and we want to reduce the space or create an overlap between the two elements:

/* - - - - Header Margin
Edit the margin around the header title/image */
#logo_block {
	margin-top: 0px;
	margin-bottom: -2px;
	margin-left: 0px;
	margin-right: 0px;
	}

Click the Save link when you have finished editing your Extra Styles.

Related articles...

  • Contact Us

    Can't find the answer to your query? Send a note to Aarcade Support and we'll be happy to help you.