Navigation border options
The top bar background color setting adjusts the top announcement bar's background color and also the border around the meganav, drop-down menu and meganav column headings:
Example, changing the color to a red value, you'll easily see all three elements:
Example with a drop-down menu:
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 overrides
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
-
Change header bottom border color
To keep the top bar announcement a certain color and change the bottom border of the header:
Use this code modification:
/* -- code to to change header border color -- */
.site-header {
border-bottom: 1px solid #111111;
}
/* - end - */
In that example, the top bar announcement bar remains red and the bottom header border becomes black.
The hex value #111111; can be modified to your preference:
http://www.colorhexa.com/web-safe-colors
To completely remove the header bottom border:
Use this code:
/* -- code to to remove header bottom border -- */
.site-header {
border-bottom: none;
}
/* - end - */
- 2
-
Change meganav border colors
The megnav border is different than the header. Here's how to change the border:
Use this code:
/* -- code to modify meganav bottom border -- */
.nav--desktop .grandparent>.main-menu-dropdown {
border-bottom: 1px solid #111111;
}
/* - end - */
To change the meganav column heading border:
Use this code:
/* -- code to modify meganav column heading border -- */
.nav--desktop .grandparent>.main-menu-dropdown>ul>.parent>a {
border-bottom: 1px solid #111111;
}
/* - end - */
To change both the column heading border and meganav bottom border color:
/* -- code to modify meganav bottom border -- */
.nav--desktop .grandparent>.main-menu-dropdown {
border-bottom: 1px solid #111111;
}
/* -- code to modify meganav column heading border -- */
.nav--desktop .grandparent>.main-menu-dropdown>ul>.parent>a {
border-bottom: 1px solid #111111;
}
/* - end - */
Another option is to remove the column heading border:
/* -- code to remove meganav column heading border -- */
.nav--desktop .grandparent>.main-menu-dropdown>ul>.parent>a {
border-bottom: none;
}
/* - end - */
- 3
-
Drop-down menu borders
Drop-down menus are different than a meganav. These are single drop-downs:
To change the drop-down menu borders:
Use this code:
/* -- code to change main menu dropdown borders -- */
.nav--desktop .main-menu>.parent>.main-menu-dropdown {
border-right: 1px solid #111111;
border-left: 1px solid #111111;
border-bottom: 1px solid #111111;
}
/* -- end --*/
To completely remove the borders:
/* -- code to remove main menu dropdown borders -- */
.nav--desktop .main-menu>.parent>.main-menu-dropdown {
border-right: none;
border-left: none;
border-bottom: none;
}
/* -- end --*/
Where do I add the code?
Use this link to learn where exactly to add this code snippet: