Header/Main Menu Bar on Collection and Product Pages

[DeadEndStreet]

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 you

[dmwwebartisan]

@DeadEndStreet 

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

[DeadEndStreet]

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

[dmwwebartisan]

@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!

[DeadEndStreet]

Thank you.

I now have this:

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]

@DeadEndStreet 

Please remove previous provided css code .

[DeadEndStreet]

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

[dmwwebartisan]

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

[DeadEndStreet]

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]

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