Header/Main Menu Bar on Collection and Product Pages

DeadEndStreet
Explorer
103 0 35

Hi there,

Does anyone know or can help with the following:

How can I A) make both the logo section and main menu bar transparent on the collection and product pages (I already have it transparent on main page)

                 B) or have the option to delete the logo section leaving just the main menu bar (again ONLY on Collection and Product Pages)

Thank youScreenshot 2021-11-03 115832.png

Replies 9 (9)
dmwwebartisan
Shopify Partner
9765 2228 3064

@DeadEndStreet 

Not clear to me . please share proper screenshot what do you want

If helpful then please Like and Accept Solution | Email: dmw.webartisan@gmail.com | Instagram: @dmw.webartisan
Check here PageFly App to customize your pages | Bag is a cart drawer that maximizes your sales. View app →
DeadEndStreet
Explorer
103 0 35

 

Below is product page (same applies for collection page).

I don't want all the white at the top - I would like to have all of it transparent (header and main menu bar) like my home page or delete the header logo section (but ONLY on product and collection pages) leaving just the main menu bar.

It would be good to see and/or have both options available

Screenshot 2021-11-03 120951.png

dmwwebartisan
Shopify Partner
9765 2228 3064

@DeadEndStreet 

Add code Your assets/theme.scss.liquid bottom of the file.

@media only screen and (min-width: 750px){
.template-product .site-header__upper {display: none !important;}
.template-collection .site-header__upper {display: none !important;}
}

Thanks!

If helpful then please Like and Accept Solution | Email: dmw.webartisan@gmail.com | Instagram: @dmw.webartisan
Check here PageFly App to customize your pages | Bag is a cart drawer that maximizes your sales. View app →
DeadEndStreet
Explorer
103 0 35

Thank you.

I now have this:

Screenshot 2021-11-03 124434.png

Is there any way of replicating this on the mobile collection and product pages?

Can I make what is left there transparent?

You have been the greatest help - thank you

dmwwebartisan
Shopify Partner
9765 2228 3064

@DeadEndStreet 

Please remove previous provided css code .

If helpful then please Like and Accept Solution | Email: dmw.webartisan@gmail.com | Instagram: @dmw.webartisan
Check here PageFly App to customize your pages | Bag is a cart drawer that maximizes your sales. View app →
DeadEndStreet
Explorer
103 0 35

I have removed - am I supposed to replace it with anything?

dmwwebartisan
Shopify Partner
9765 2228 3064

@DeadEndStreet 

Try this css code

Add code Your assets/theme.scss.liquid bottom of the file.

@media only screen and (min-width: 750px){
.template-collection .site-header {
    width: 100%;
    position: absolute;
    background-color: transparent;
}
.template-product .site-header {
    width: 100%;
    position: absolute;
    background-color: transparent;
}
}

 

If helpful then please Like and Accept Solution | Email: dmw.webartisan@gmail.com | Instagram: @dmw.webartisan
Check here PageFly App to customize your pages | Bag is a cart drawer that maximizes your sales. View app →
DeadEndStreet
Explorer
103 0 35

Brilliant - the top header section is now transparent but I have kept the whit main menu bar - excellent thank you yet again.

All I am missing now is the ability to make the header section transparent on mobile product and collection pages - on mobile I still have the white bar (but dont want to lose the menu and cart).

I made the home page transparent so have menu  - logo - cart (but transparent) - just don't know how to do it for collections and products pages.

dmwwebartisan
Shopify Partner
9765 2228 3064

@DeadEndStreet 

also add following css class

@media only screen and (min-width: 750px){
.template-collection #shopify-section-header {
    position: relative;
    width: 100%;
    z-index: 9;
}
.template-product #shopify-section-header {
    position: relative;
    width: 100%;
    z-index: 9;
}
}

 

If helpful then please Like and Accept Solution | Email: dmw.webartisan@gmail.com | Instagram: @dmw.webartisan
Check here PageFly App to customize your pages | Bag is a cart drawer that maximizes your sales. View app →