i want the Shopify header to only display on mobile

[shop22dash]

Im using gempages and use their desktop header but for mobile i want to keep the original shopify header because it looks cleaner. also i wanted to remove the 2 button

s on the right, search and check cart button. 

[BiDeal-Discount]

Hi @shop22dash 

can you share your store url & password (if applicable) to let me check then give you the solution

[shop22dash]

from the shopify editor or the actual URL

[BiDeal-Discount]

The storefront url pls

[shop22dash]

https://docs.google.com/document/d/1yyBgeKvwGvdUSbMq4yo7Kg6ux81F-3BNHYHaW2r92Y8/edit?usp=sharing here

[shop22dash]

ill accept you to see it

[BiDeal-Discount]

requested done

[shop22dash]

yea done

[BiDeal-Discount]

To remove 2 button search & cart on header. Let try to go to:

Admin -> Sale Channels -> Online Stores -> Themes -> click to 3 dots & edit code your theme.

Find file base.css then add this code to bottom of that file:

.header__search, .header__icon--cart {
  display: none !important;
}

To hide gempage header on mobile, let try to add this Custom CSS to your file base.css:

@media screen and (max-width: 1024px) {
  #shopify-section-template--18428914827435__gp_section_568520524360057911 {
    display: none !important;
  }
}

[shop22dash]

 did not do anything i still see the search icon and check cart icon on the right, also still viewable on desktop

[shop22dash]

for the theme im using shrine pro 

[BiDeal-Discount]

You're missing a "}" character at the base.css file:

[shop22dash]

okay it worked, what about to make it show only on mobile

[BiDeal-Discount]

oh, you only need to replace those code by this:

@media screen and (min-width: 749px) {
    .header__search, .header__icon--cart {
        display: none !important;
    }
}

Be careful we have 2 characters "} }" before new code:

[shop22dash]

how did you get to that code page? i clicked edit code on the headline but it only goes up to 1077

[BiDeal-Discount]

haha because the code you edit directly was minify so it neat on 1 line. Just need follow my way 😉

[shop22dash]

ok how do i see the full version so i can do that step, like you said its just on 1 line. how can i see it expanded like on your screen

[BiDeal-Discount]

The Shopify code editor isn't supported to unminify. You can use some online tool as : https://www.unminify2.com/

btw, if you need me edit direct for you, let add me as collaborator so then I can help.

Thanks

[shop22dash]

 like that? i feel like im missing a  {

[shop22dash]

dident work

[shop22dash]

hello

[BiDeal-Discount]

I said that :

Be careful we have 2 characters "} }" before new code

if you need me edit direct for you, let add me as collaborator so then I can help it faster

[goldi07]

Hello @shop22dash 

To show only the search, user (account), and cart icons on mobile in your Shopify header — and hide the rest (like links, logo, etc.) — you'll need to add some custom CSS and possibly adjust the theme's header Liquid layout depending on your theme.

Here’s how you can achieve this:

Step 1: Identify the Mobile Breakpoint
Most Shopify themes treat screens under 750px width as mobile (@media screen and (max-width: 749px)).

Step 2: Add Custom CSS to Your Theme
1. Go to Online Store > Themes > Edit code

2. Open base.css, theme.css, or styles.css (depends on your theme, usually in the assets folder).

3. Add the following code at the bottom:

/* Hide everything in the header except icons on mobile */
@media screen and (max-width: 749px) {
  .header__logo,
  .site-header__logo,
  .header__menu,
  .site-nav, /* for older themes */
  .header__menu-item,
  .header__heading,
  .header__inline-menu,
  .header__top-links,
  .header__bottom,
  .header__menu-toggle, /* hides menu if you want */
  nav, /* general fallback */
  .header__main-nav,
  .header__call-to-action {
    display: none !important;
  }

  /* Make sure icon buttons are visible */
  .header__icon,
  .header__icon--account,
  .header__icon--cart,
  .header__icon--search {
    display: inline-flex !important;
  }

  .header__icons {
    justify-content: flex-end;
    width: 100%;
  }
}

Step 3: Optional Adjustments
If your theme renders icons conditionally (e.g. only shows them in desktop or mobile menus), you might need to:

. Move the icon code blocks out of a conditional like {% if section.settings.show_icons %}.

. Or duplicate the icon blocks into the mobile header layout.

plz let me know if uts work or not work 

Thank you  😊

[shop22dash]

like that? i feel like im missing a  {