[alandashi]

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




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 ? 😭

[deepvyas]

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

[Ðr1ps]

Do you have a link for it?

[Ganja]

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;
}

[alandashi]

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