Yuva Theme Header colour and Image sizing

Philip7644 · ‎03-10-2024

Hi All,

Hope you are well! I'm using yuva theme and a few things aren't working, but everytime I'm using help from the pages here, the custom css also doesn't work or change anything. Does anybody know how to move further?

The header colour doesn't change in the published store:

For the header background colour, I'd like to use #055146. In my customiser it shows the correct colour, but on the live website it stays white. How can I ensure that it is the right colour in the actual website?

Image banner doesn't resize correctly:

I'm using a media banner to show an image, and in the designer it looks great and resizes properly. Only on the live website, the resizing doesn't work and the image is cropped. How can I make it work?

Any custom css I've found hasn't changed/affected anything so far..

Thank you for your help.

ThePrimeWeb · ‎03-10-2024

Hey @Philip7644,

Small error on the code, Just replace it with this one

<style>
@media only screen and (min-width: 992px) {    
    .shopify-section-main-header header a,
    .shopify-section-main-header header svg {
        color: white !important;
    }
    
    .shopify-section-main-header header span {
        color: black !important;
    }

}

.shopify-section-main-header header {
    background-color: #055146 !important;
}

.shopify-section-main-header header svg {
        color: white !important;
}

.navbar-toggler-icon,
.navbar-toggler-icon:after, 
.navbar-toggler-icon:before {
    background-color: white !important;
}

.yv-image-banner-wrapper img {
    object-fit: contain !important;
    object-position: initial !important;
    position: relative !important;
    width: 100% !important;
    height: 100% !important;
}

.yv-image-banner-wrapper .image-wrapper {
    padding-bottom: 0 !important;
    position: relative !important;
    display: flex !important;
}

.yv-image-banner-wrapper {
    height: 100% !important;
}
</style>

Was I helpful?

☕Buy me a coffee☕

❤ 🙂

Need help with your store? contact@theprimeweb.com or check out the website
Check out our interview with Shopify!

View solution in original post

ThePrimeWeb · ‎03-10-2024

@Philip7644

I don't know if your theme supports the <br> tag.

You can try typing in the theme customizer, but some themes don't allow HTML tags in the content itself.

Minder schermtijd,<br>meer vrije tijd

Was I helpful?

☕Buy me a coffee☕

❤ 🙂

Need help with your store? contact@theprimeweb.com or check out the website
Check out our interview with Shopify!

View solution in original post

ThePrimeWeb · ‎03-10-2024

Hey @Philip7644,

Can you share the link to your store please? Thanks!

Was I helpful?

☕Buy me a coffee☕

❤ 🙂

Need help with your store? contact@theprimeweb.com or check out the website
Check out our interview with Shopify!

Philip7644 · ‎03-10-2024

Oh apologies, sure @ThePrimeWeb !

It's not live yet, you can use the password "test" on www.schermuit.nl

ThePrimeWeb · ‎03-10-2024

No worries!

Is this the Image banner you mentioned earlier?

Was I helpful?

☕Buy me a coffee☕

❤ 🙂

Need help with your store? contact@theprimeweb.com or check out the website
Check out our interview with Shopify!

Philip7644 · ‎03-10-2024

Yes indeed! you can see it cuts off the top in your screengrab.

ThePrimeWeb · ‎03-10-2024

Hey @Philip7644,

I also changed the header icons and text to white because black wasn't visible with the dark green header.

Go to your theme's "Edit Code" Option, then in the search bar type "theme.liquid"
Below the tag "<head>" tag paste the following. Screenshot attached for reference.

<style>
@media only screen and (min-width: 992px) {    
    .shopify-section-main-header header a,
    .shopify-section-main-header header svg {
        color: white !important;
    }
    
    .shopify-section-main-header header span {
        color: black !important;
    }

}

.shopify-section-main-header header {
    background-color: #055146 !important;
}

.shopify-section-main-header header svg {
        color: white !important;
}

.navbar-toggler-icon,
.navbar-toggler-icon:after, 
.navbar-toggler-icon:before {
    background-color: white !important;
}

.yv-image-banner-wrapper img {
    object-fit: contain !important;
    object-position: initial !important;
    position: relative;
    width: 100% !important;
    height: 100% !important;
}

.yv-image-banner-wrapper .image-wrapper {
    padding-bottom: 0 !important;
    position: relative !important;
    display: flex !important;
}

.yv-image-banner-wrapper {
    height: 100% !important;
}
</style>

Screenshot is for reference only, the correct code to paste is the one shown above.

Was I helpful?

☕Buy me a coffee☕

❤ 🙂

Need help with your store? contact@theprimeweb.com or check out the website
Check out our interview with Shopify!

Philip7644 · ‎03-10-2024

Appreciate it a lot! The header has changed now indeed, it looks very nice!

However, the mediabanner is completely not showing anymore. Even in the editor it's present in the left overview but not showing. Please see screenshots attached for reference.

Halfway there!

Philip7644 · ‎03-10-2024

The media banner is supposed to be between the white and green block 🙂

ThePrimeWeb · ‎03-10-2024

Hey @Philip7644,

Small error on the code, Just replace it with this one

<style>
@media only screen and (min-width: 992px) {    
    .shopify-section-main-header header a,
    .shopify-section-main-header header svg {
        color: white !important;
    }
    
    .shopify-section-main-header header span {
        color: black !important;
    }

}

.shopify-section-main-header header {
    background-color: #055146 !important;
}

.shopify-section-main-header header svg {
        color: white !important;
}

.navbar-toggler-icon,
.navbar-toggler-icon:after, 
.navbar-toggler-icon:before {
    background-color: white !important;
}

.yv-image-banner-wrapper img {
    object-fit: contain !important;
    object-position: initial !important;
    position: relative !important;
    width: 100% !important;
    height: 100% !important;
}

.yv-image-banner-wrapper .image-wrapper {
    padding-bottom: 0 !important;
    position: relative !important;
    display: flex !important;
}

.yv-image-banner-wrapper {
    height: 100% !important;
}
</style>

Was I helpful?

☕Buy me a coffee☕

❤ 🙂

Need help with your store? contact@theprimeweb.com or check out the website
Check out our interview with Shopify!

Philip7644 · ‎03-10-2024

Wow @ThePrimeWeb , you are amazing, thank you so much!

One last check: does it matter where on the page I have that media banner or can I just freely place it in a different area of the page with this code?

Really cool, appreciate it!

ThePrimeWeb · ‎03-10-2024

It shouldn't matter because it's targetting a media banner regardless of position. You should be able to place it anywhere you need.

Was I helpful?

☕Buy me a coffee☕

❤ 🙂

Need help with your store? contact@theprimeweb.com or check out the website
Check out our interview with Shopify!

Philip7644 · ‎03-10-2024

Super, have checked and it works in other places indeed.

Thanks again, hope you enjoy the well earned coffee 😉

ThePrimeWeb · ‎03-10-2024

No worries, and thank you!

Was I helpful?

☕Buy me a coffee☕

❤ 🙂

Need help with your store? contact@theprimeweb.com or check out the website
Check out our interview with Shopify!

Philip7644 · ‎03-10-2024

@ThePrimeWeb could you help me with one more thing please?

In the header image that now says "Minder schermtijd, meer vrije tijd", how can I get "meer vrije tijd" on a new line?

And same for the body text below that heading?

Cheers,
Philip

ThePrimeWeb · ‎03-10-2024

@Philip7644

I don't know if your theme supports the <br> tag.

You can try typing in the theme customizer, but some themes don't allow HTML tags in the content itself.

Minder schermtijd,<br>meer vrije tijd

Was I helpful?

☕Buy me a coffee☕

❤ 🙂

Need help with your store? contact@theprimeweb.com or check out the website
Check out our interview with Shopify!

Philip7644 · ‎03-10-2024

You are a legend.

Thanks again.

exoneon · ‎02-07-2025

hey, I have applied your code on banner to not be cropped but the button over the banner goes on top of the banner.

Yuva Theme Header colour and Image sizing

Yuva Theme Header colour and Image sizing

Community Blog Articles