How can I get a transparent header only on the front page with Colorblock theme?

[domo2]

Hello, 

I'm using the colorblock theme and want to hava a transparent header but only on the frontpage, not on any other pages like the productpage, etc

www.publicservice.store 

Thank you in advance!

[PageFly-Lucas · Accepted solution]

Hi @domo2 

This is Lucas from PageFly - Landing Page Builder App

You can try this code by following these steps: 

Step 1: Go to Online Store->Theme->Edit code.

Step 2: Search file theme.liquid

Step 3: paste bellow code in tag </body> -> save.

{% if template.name == 'index' %} 

<style>

header.header.header--middle-center.header--mobile-center.page-width.header--has-menu {

    background: transparent !important;

    position: absolute;

    width: 100%;

} 

</style> 

{% endif %}

Hope that my solution works for you.

Best regards,

Lucas| PageFly

[PageFly-Lucas · Accepted solution]

Please try again!!!

{% if template.name == 'index' %} 

<style>

header.header.header--middle-center.header--mobile-center.page-width.header--has-menu {

    background: transparent !important;

    position: absolute !important;

    width: 100% !important;

}

.list-menu__item, .header__icon .icon {

    color: white !important;

}

</style> 

{% endif %}

[ZestardTech]

Hello There,

1. In your Shopify Admin go to online store > themes > actions > edit code
2. Find layout >theme.liquid and paste this at the bottom of the file:

{% if template.name == 'index' %}
<style>
.header-wrapper.color-background-2.gradient {
background-color: transparent;
}
</style>
{% endif %}

[PageFly-Lucas · Accepted solution]

Hi @domo2 

This is Lucas from PageFly - Landing Page Builder App

You can try this code by following these steps: 

Step 1: Go to Online Store->Theme->Edit code.

Step 2: Search file theme.liquid

Step 3: paste bellow code in tag </body> -> save.

{% if template.name == 'index' %} 

<style>

header.header.header--middle-center.header--mobile-center.page-width.header--has-menu {

    background: transparent !important;

    position: absolute;

    width: 100%;

} 

</style> 

{% endif %}

Hope that my solution works for you.

Best regards,

Lucas| PageFly

[domo2]

Thank you very much, it worked!! 

Can you also help me to make the font only on this site on the transparent header in white?

[PageFly-Lucas]

You can try again with this code:

{% if template.name == 'index' %} 

<style>

header.header.header--middle-center.header--mobile-center.page-width.header--has-menu {

    background: transparent !important;

    position: absolute;

    width: 100%;

}

.list-menu__item {

    color: white !important;

}

.header__icon .icon {

    color: white !important;

}

</style> 

{% endif %}

[domo2]

it worked, but now the whole menu is shifted to the left..

[PageFly-Lucas · Accepted solution]

Please try again!!!

{% if template.name == 'index' %} 

<style>

header.header.header--middle-center.header--mobile-center.page-width.header--has-menu {

    background: transparent !important;

    position: absolute !important;

    width: 100% !important;

}

.list-menu__item, .header__icon .icon {

    color: white !important;

}

</style> 

{% endif %}

[domo2]

it worked!! I appreciate you!! 

Last question: How do I remove icons from the header? I dont want the searchbar in my header.

Also instead pf the cart symbol i want the word CART.

[PageFly-Lucas]

This code to delete icon search:
summary.header__icon.header__icon--search.header__icon--summary.link.focus-inset.modal__toggle {
display: none !important;
}

Regarding the issue of changing the cart icon to the text "cart" we can't intervene at the moment. You can contact the Theme so they can assist you in this matter.

[domo2]

Where do I insert that code?

[PageFly-Lucas]

You can try this code by following these steps:
Step 1: Go to Online Store->Theme->Edit code.
Step 2: Search file base.css
Step 3: Paste the below code at bottom of the file -> Save

summary.header__icon.header__icon--search.header__icon--summary.link.focus-inset.modal__toggle {
display: none !important;
}

[domo2]

Doesn't work unfortunately 

[oscprofessional]

Hello @domo2 

You can try this code: it will be helpful to you

Go to the Online Store->Theme->Edit code->Assets->base.css>Add this code at the bottom.

.modal__toggle-open {
    display: none;
}

[domo2]

Unfortunately that doesnt work either

[PageFly-Lucas · Accepted solution]

Try again with these steps: 

Step 1: Go to Online Store->Theme->Edit code.

Step 2: Search file theme.liquid

Step 3: paste bellow code in tag </body> -> save.

<style>

svg.modal__toggle-open.icon.icon-search {

    display: none !important;

}

</style>

[domo2]

Man Lucas you goated fr fr thank you!!

[PageFly-Lucas]

You are welcome @domo2 😊

[domo2]

Hey, do you know how I change the font of the shop guidelines at the bottom of my footer? Thanks

[domo2]

So when i view the page on my laptop or the window on my monitor is not full screen it's full width. 

But on full screen on my monitor it is shifted to the left again.. 

[oscprofessional]

Hello @domo2 

You can try this code: it will be helpful to you

Go to the Online Store->Theme->Edit code->Assets->base.css>Add this code at the bottom.

.header__menu-item {
    color: #fff !important;
}
.header__icon {
    color: #fff !important;;
}

[domo2]

worked aswell, but also the whole menu is shifted to the left..

[oscprofessional]

Hello @domo2 

Do you want to center? 

[domo2]

not centered, full width

[oscprofessional]

Hello @domo2 

You can try this code: it will be helpful to you

Go to the Online Store->Theme->Edit code->Assets->base.css>Add this code at the bottom.

.gradient {
    background: transparent !important;
}