Elusive Header Color - Ella Theme

Killian_PP
New Member
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

 

 

0 Likes
Anthony_David_
Trailblazer
222 29 87

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

Shopify Expert - Theme customization | Design | Marketing | Product Sales
Hire Me: anthonyuidesigner@gmail.com
Whatsapp ( Click on number )- +33 6 28 93 62 05
0 Likes
Killian_PP
New Member
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!

0 Likes