[Debut] How to remove header ONLY FROM homepage in mobile-version

Solved
Bruce1122
Tourist
5 0 1

Hello,

I use currently Debut theme and want to remove the header from my mobile-version-homepage.

It means that I need a header though for all other pages except for the homepage in the mobile version.

For example, the homepage in PC, product and cart pages in PC & mobile-version should have the header.

 

The reason why I want to remove only from the mobile-version-homepage is that I want to design separately for the banner.

I could remove the header generally (from all pages in mobile-version), but then the header is gone from all pages. The removal has to be for the homepage in the mobile version only.

 

Has anyone idea?

Thank you!

Accepted Solution (1)

Accepted Solutions
Natztech
Shopify Partner
2237 565 1373

This is an accepted solution.

 

@media only screen and (max-width: 749px) {
      .site-header {
  display: none  !important;
}
  }

 

View solution in original post

Replies 8 (8)
Natztech
Shopify Partner
2237 565 1373

hello @Bruce1122 

Please provide website url and if your store is password protected then also provide password So I will check and provide a solution here.

Bruce1122
Tourist
5 0 1

Hello,

Thank you for your response. Here is the URL for my shop: www.ourmemory.de

I design the shop with pagefly.

 

Thank you!! 

Bruce1122
Tourist
5 0 1

I puted in theme.css the following code to remove the header in mobile version:

@media only screen and (max-width: 749px) {
    .site-header {
  display: none;
}
  }
 
I think if I select the page for mobile homepage, and put this code, the header is gonna hidden for mobile homepage only.
 
 
Natztech
Shopify Partner
2237 565 1373

This is an accepted solution.

 

@media only screen and (max-width: 749px) {
      .site-header {
  display: none  !important;
}
  }

 

View solution in original post

MS-WEB-DESIGNER
Shopify Partner
2877 180 494

Dear @Bruce1122 

  • From your Shopify admin, go to Online Store > themes.
  • Locate your current theme and then click Actions > Edit code.
  • After that in the Assets folder, click to open your theme.scss.liquid file.
  • Go to the very bottom of this file and paste the following code:

 

/* Start */
@media only screen and (max-width: 749px) { 
.template-index .site-header {display: none !important}
}
/* End*/

 

  • Save and check your theme by refreshing it.
Click Here to Hire Shopify Store Customization Experts
Boost Conversions & Average Order Value with this
Best App for Sticky Add To Cart
DeadEndStreet
Explorer
103 0 35

Hi, can you help with my issue - i want this but in reverse - i dont want to lose my search and menu buttons in mobile view but when i hide on pc thats what happens.

Would like to hide section but keep the menu and search icons - also i need to move my logo from header section to the main menu bar as that has disappeared as wll lol.

Kind regards

Natztech
Shopify Partner
2237 565 1373

hello @DeadEndStreet 

Please provide website url and if your store is password protected then also provide password So I will check and provide a solution here.

DeadEndStreet
Explorer
103 0 35

Hi Naz, my url is deadendstreet.co.uk

No password.

Thank you