Elusive Header Color - Ella Theme

Killian_PP
Visitor
2 0 0

Hello all,

I'm trying to track down and eliminate a particular header-bar color, because it no longer matches our branding 
We use Ella theme, that was customized by a prior employee before I arrived at the company.

In Desktop/Fullscreen mode, it's just mismatched, and only appears on the main page. On small-screen/Mobile mode, it takes up half the screen on the main page, and serves as my Menu header on other pages. See screenshots below.

I've scraped every Shopify Theme Customization menu, and I'm mediocre at Liquid, but I've looked through every Template and Asset I could think of that might cause this header.

I would like to just make the bar white (and eliminate the extra bar on the homepage in mobile displays). Can anybody help me find what asset/template/etc this bar appears in so I can fix it?

My site is passionate-playground.myshopify.com

 

Killian_PP_0-1627068834218.png - Desktop Main page

 

As I shrink from Desktop to Mobile view:

Killian_PP_1-1627069218542.png

Mobile view main page

Killian_PP_3-1627069319851.png

 

Mobile view on other pages:

 

Killian_PP_2-1627069280646.png

 

 

Replies 2 (2)

Anthony_David_
Shopify Partner
417 46 105

Hello @Killian_PP ,

One you code remove the section : home-about-us and add a css

@media only screen and (max-width:768px){
.header-bottom {
    background-color: #ffffff !important;}
}


OR

Optional:
For quick fix you can use css. Add the below code at the end of your css file 

@media only screen and (max-width:768px){
#home-about-16111206663f5fc757 {
    display: none;
}
.icon-nav .icon-line:after, .icon-nav .icon-line:before {
    background: #000;
}
.wrapper-header-bt svg, .wrapper-header-bt a span:before {
    fill: #000;
}
}

 Hope this helps

thanks

Theme customization | Design | Shopify App Consultant
Have Any Questions? Whatsapp +1 (341) 241-4263
Based in United States
Killian_PP
Visitor
2 0 0

Thanks @Anthony_David_ !

Following up before I start injecting code place:

For your "quick fix" solution -- which CSS file should I add that to? My gut says "theme-styles.css.liquid" but I'm not sure. I've also got a theme.min.css.liquid and theme-styles-responsive.css.liquid among about a dozen CSS assets.

For your top solution -- do you mean I would eliminate the entirety of home-about-us.liquid and replace it with that chunk? Or just replace a piece of code in home-about-us.liquid with it?

Sorry for my confusion and thanks!