How to remove header section from product pages

Store Design
1

Hi, I would like to remove (maybe make transparent) the header section on product pages only.

I wish to keep it on home page (I have made transparent here) but it looks a bit rubbish on product pages (too much white at top from header section and menu bar) - any ideas?

Thanks

deadendstreet.co.uk

Screenshot 2021-11-02 132231.png
Screenshot 2021-11-02 132231.png1881×345 225 KB

1 Like
2

@DeadEndStreet

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

@media only screen and (min-width: 750px){
.site-header__upper { padding-bottom: 5px !important;}
}

Thanks!

1 Like
3

Hi DMW - thank you for your reply.

That works great for moving my main menu bar up and down (I needed that option), however do you know what code I need to do the following:

  1. Make the logo bar/section above disappear thereby moving the main menu bar to the top (pushing page up)and/or;
  2. make the logo bar/section transparent?

I have one other thing I am also struggling with:

My mobile view is not right in that the first section below the main menu bar is too far away (big gap in between) - I wish to reduce this gap without affecting the desktop view - the gap exists because I have been moving the 1st section down on desk top using the code below but that also moves the mobile 1st section down (which I dont want to do) - how do i treat mobile and desktop separately?

.main-content {
margin-top: 200px;
}

Thanks

4

@DeadEndStreet

Please share screenshot what do you want!

Thanks!

1 Like
5

Hi, I want as follows:

You can see below on the collection page that the collection heading and product image is much too far down the page - I wish to move this further up the page.

Alternatively it may also work to remove the header section or at least make a lot narrower on the same page (collection page)

Thanks

Screenshot 2021-11-03 094917.png
Screenshot 2021-11-03 094917.png439×735 203 KB

6

@DeadEndStreet

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

@media only screen and (max-width: 749px){
.main-content { margin-top: 20px !important;}
}

Thanks!

1 Like
7

Hi DMW,

That works and sorts out the product/collection pages but unfortunately it also moves up my main home landing page (so it takes my sections up underneath the logo etc.

How can I apply that code purely to the product/collection pages?

Thank you

8

@DeadEndStreet

Remove previous css code

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

@media only screen and (max-width: 749px){
.template-collection .main-content {margin-top: 20px!important;}
.template-product .main-content {margin-top: 20px!important;}
}
1 Like
9

DMW - that is awesome - fantastic, thank you.

I will have to save you as the Shopify Guru - really really appreciate it - thank you.

10

Hi DMW,

I just noticed something strange - so the above works and my desktop and mobile view looks fine on the product and collection pages.

However on my laptop (so when I am purely on my laptop and not docked to monitors etc) the collection and product pages are still too far down and seem to be to the left - see below:

Is there a separate code for laptops and all lol?

Screenshot 2021-11-03 125508.png
Screenshot 2021-11-03 125508.png1338×623 542 KB

11

@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;
}
}
1 Like
12

@DeadEndStreet

also add this again and check site on desktop

@media only screen and (min-width: 750px){
.template-index #shopify-section-header .nav-bar:after {background: transparent !important;}
.template-collection #shopify-section-header .nav-bar:after {background: transparent !important;}
.template-product #shopify-section-header .nav-bar:after{background: transparent !important;}
.nav-bar .page-width {background: #fff !important;}
}

Thanks!

1 Like