Navigation border options

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

Note:
Modifying the theme code will make it difficult to update your theme. Use this code at your own risk. Groupthought does not provide any warranty or further support for this code. The code provided is only a suggestion. Please work with a developer or  Shopify Expert to ensure proper customization. This code may not work with all versions of of Pipeline or with other code customizations and apps you may have installed. We strongly recommend that you make duplicate of your theme before adding or changing any code in your theme.

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?

Use this link to learn where exactly to add this code snippet:

Where to add your CSS style code

Still need help? Contact Us Contact Us