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!

[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' %}

{% endif %}

[PageFly-Lucas]

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 → save.

{% if template.name == ‘index’ %}

header.header.header--middle-center.header--mobile-center.page-width.header--has-menu { background: transparent !important; position: absolute; width: 100%; }

{% 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?

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

[PageFly-Lucas]

You can try again with this code:

{% if template.name == ‘index’ %}

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

{% endif %}

[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]

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

[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

[PageFly-Lucas]

Please try again!!!

{% if template.name == ‘index’ %}

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

{% 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]

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 → save.

svg.modal__toggle-open.icon.icon-search { display: none !important; }