Hack Forums
Change header color on shopify? - Printable Version

+- Hack Forums (https://hackforums.net)
+-- Forum: Tech (https://hackforums.net/forumdisplay.php?fid=444)
+--- Forum: Webmasters (https://hackforums.net/forumdisplay.php?fid=141)
+---- Forum: Website Construction (https://hackforums.net/forumdisplay.php?fid=50)
+---- Thread: Change header color on shopify? (/showthread.php?tid=5978830)

Change header color on shopify? - alandashi - Jun 11, 2019

Hey guys,
I'm trying to change my header color for my shopify store.
I'd like to change it to look like this

[Image: LGOl92h.jpg]


I tried adding the following code in my theme.sccs.liquid file
Code
header.site-header {
  background-color: #f1ead9;
}
  
.site-header__mobile-nav {
  background-color: #f1ead9 !important;
}

But it did not help.

Anyone got a clue what I'm doing wrong ?

A little update.

I changed the color, now I'm trying to add | between each section so Home| Shop | Contact us|.

To change the color i added this:

Code
.container-fluid.single-menu {
  background-color: #color;
}

To add the | i used

Code
.tt-desctop-parent-menu.tt-parent-box{
   height: 40px;
   width: 1px;
   margin: 0 5px;
   overflow: hidden;
   background-color: #DDD;
   border-right: 2px solid #FFF;

But i only get one | and my whole menus are gone.

Help ? 😭

RE: Change header color on shopify? - deepvyas - Jun 12, 2019

Put this is for loop where menu is created
<span> | </span>

RE: Change header color on shopify? - Ðr1ps - Jun 12, 2019

Do you have a link for it?

RE: Change header color on shopify? - Ganja - Jun 12, 2019

A link would help so we can see what your HTML looks like. But if you want to add those |'s with css only, it'd look something like this (the selector might be wrong because I dont know your HTML):

.container-fluid.single-menu a:not(:last-of-type) {
position: relative;
padding-right: 30px;
}
.container-fluid.single-menu a:not(:last-of-type)::after {
position: absolute;
right: 15px;
content: '|";
color: #fff;
}

or, if you want it as a border:
.container-fluid.single-menu a:not(:last-of-type) {
margin-right: 15px;
padding-right: 15px;
border-right: 2px solid #fff;
}

RE: Change header color on shopify? - alandashi - Jun 16, 2019

Thanks guys, however, i figured it out couple days ago. :)
Praise chrome 'inspect" :D