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

The border color below the main header area (2) is picked up from the Top Bar background (1) color selection:

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

If you choose a darker color, you can also change the text color (3) in the top bar (4):

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

Add the following code to the very bottom of this file on a new line:
assets/style.scss.liquid

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

Save the file.

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

Result - Black border from code and red top bar from color settings in the theme editor:


To completely remove the border, use this code:

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

Save the file.


Navigation dropdown 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 --*/

Still need help? Contact Us Contact Us