Topbar: Make the top announcement bar larger

Example before:


Make the announcement bar larger:

/* -- code to make info bar larger -- */
.info-bar { padding: 15px 0; min-height: 50px; }
/* - end - */

Make the announcement bar larger and increase the text size:

/* -- code to make info bar and text larger -- */
.info-bar { padding: 15px 0; min-height: 50px; }
.header-message { font-size: 1.2em; }
/* - end - */

Where do I add the code?

Open your Code Editor. 

From your list of themes, find the Actions link for the theme you'd like to edit. Then select Edit code. Example draft theme:

Example if you're working from your main live/published theme:

Quick link if the theme is live/published:
Open Code Editor

Next, in the Code Editor find your theme's CSS file, this will vary depending on which version of Pipeline you're running:
Which version of Pipeline am I using?

Once you know your version, find the right file in the left Assets folder:

Pipeline 4 or higher - Open theme.scss.liquid:


Earlier versions of Pipeline - If your theme is older than Pipeline 4, open style.scss.liquid:

Add the code to the very bottom of the file on a new line after all other code. Make a couple blank lines before pasting the code snippet. 


Save the file after adding your code.

Still need help? Contact Us Contact Us