Shopify themes, liquid, logos, and UX
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
Solved! Go to the solution
This is an accepted solution.
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!
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!
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:
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
Please share screenshot what do you want!
Thanks!
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
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!
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
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;}
}
DMW - that is awesome - fantastic, thank you.
I will have to save you as the Shopify Guru - really really appreciate it - thank you.
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;
}
}
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?
This is an accepted solution.
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!
Portrait of Stephen positioned next to an image of planet Earth, with the Stephen's World ...
By JasonH Mar 18, 2024Digital marketers and app developers have tracked activity in apps and websites for yea...
By Ollie Mar 13, 2024February was an exciting month with Shopify Editions, informative webinars, and more! F...
By JasonH Mar 7, 2024