How to change the border color below the navigation and logo area

The border color below the main header area is picked up from the Top Bar background color:

Changing that color will change both the top bar announcement text area and the border:

The account and search icons will pick up the color from the top bar text setting. This gets changed after you Save the settings:

Code Modifications

1

Use a different color than the top bar color

If you need separate colors for the top bar and the border, you can add this code to set the border color:

/* -- code to to change header border color -- */
.site-header {
  border-bottom: 1px solid #111111;
}
/* - end - */

The hex value #111111; can be modified to your preference:
http://www.colorhexa.com/web-safe-colors

2

Remove the border

To completely remove the border, use this code:

/* -- code to to change header border color -- */
.site-header {
  border-bottom: none;
}
/* - end - */
3

Navigation dropdown border colors

When changing the border color, your dropdown menu border colors will also change.

Here is the override code you can use to customize the dropdown border colors:

/* -- code to modify main menu dropdown border colors -- */
.nav--desktop .main-menu>.parent>.main-menu-dropdown {
border-right: 1px solid #111111;
border-left: 1px solid #111111;
border-bottom:  1px solid #111111;
}
/* -- 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 - If you're working with a draft theme, open this file:

You'll be opening this file:

assets/theme.scss.liquid

Quick link if the theme is live/published:
assets/theme.scss.liquid

Earlier versions of Pipeline - If your theme is older than Pipeline 4 open this file for draft themes:

You'll be opening this file for earlier versions of Pipeline:

assets/style.scss.liquid

Quick link if the theme is live/published and an earlier version of Pipeline:
assets/style.scss.liquid

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

Example:

Save the file after adding your code.

Still need help? Contact Us Contact Us