Topbar: How to make changes to announcement bar elements
Here are ten very simple changes you can make to modify the format of your announcement bar. You can combine the code to apply more than one effect. Keep in mind that some commands can override your previous command. Where to add the code changes is covered after the last example.
Example before:
- 1
-
Make the text larger in the announcement bar:
/* -- code to make announcement text larger -- */
.header-message { font-size: 1.2em; }
/* - end - */
The value of 1.2em; can be changed:
Larger, try 1.3em;
Smaller, try 1.1em; or smaller than the regular size, try 0.8em;
- 2
-
Make the font bold in the announcement bar:
/* -- code to make announcement bar bold -- */
.header-message, .info-bar { font-weight: bold; }
/* - end - */
- 3
-
Add an underline to the text:
/* -- code to add underline to the announcement bar text -- */
.header-message { text-decoration:underline; }
/* - end - */
- 4
-
Change the font to capital case (first letter capital):
/* -- code to make announcement bar text capital case -- */
.header-message { text-transform:capitalize; }
/* - end - */
- 5
-
Change the font to lowercase:
/* -- code to make announcement bar text lowercase -- */
.header-message { text-transform:lowercase; }
/* - end - */
Example when combined with larger text:
/* -- code to make announcement bar text lowercase and larger text -- */
.header-message { text-transform:lowercase; }
.header-message { font-size: 1.1em; }
/* - end - */
- 6
-
Change the background color
The simplest way is to change the color settings in your Theme Editor:
Use the TOP BAR settings:
Notes:
Text color value - Will also change the icon colors (after Save in the Theme Editor).
Background color value - Will also change the border color below the navigation:
To remove this border use:
/* -- code to remove border below navigation -- */
.site-header { border-bottom: none; }
/* - end - */
Or, to set a different color:
/* -- code to change border color below navigation -- */
.site-header { border-bottom: 1px solid #000000; }
/* - end - */
The value #000000; is black, you can replace with any valid hex color code:
http://www.colorhexa.com/web-safe-colors
Example of black:
Example of removed border:
- 7
-
Change the font family
To change the font type in the announcement bar, use:
/* -- code to change announcement bar font-family -- */
.header-message {
font-family: "Questrial","Helvetica Neue",Arial,sans-serif;
}
/* - end - */
Be sure to use a font-family installed on your shop. This is an example of using Questrial with a fallback fonts which are included in Pipeline.
- 8
-
Make the announcement bar larger:
/* -- code to make info bar larger -- */
.info-bar { padding: 15px 0; min-height: 50px; }
/* - end - */
- 9
-
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 - */
- 10
-
Left align the announcement bar message:
/* -- code to make info bar and text larger -- */
.header-message { text-align : left; }
/* - end - */
Where do I add the code?
Use this link to learn where exactly to add this code snippet: