How to remove search and account icons from mobile

Store Design
, ,
1

I’m trying to remove the search and account icons from the mobile version of my website so my logo can be larger. The logo is already at its max width and I’ve tried some variations of CSS code but none of them seem to work. The show login and search labels button is toggled off. Here is my website: https://camillehayjewelry.com/ and I’m using the Atlantic theme. Any idea on how to fix this?

2

Hey! @camcam ,

Go to Online Store, then Theme, and select Edit Code.
Search for base.css/theme.css/style.css/main.css/custom.css file Add the provided code at the end of the file.

@media (max-width: 768px){
.account-options,
.live-search {
    display: none !important;
}
}
3

Thanks so much! That worked but the logo isn’t any larger. Do you know how to make the logo larger in mobile?

4

Hey! @camcam ,

Go to Online Store, then Theme, and select Edit Code.
Search for base.css/theme.css/style.css/main.css/custom.css file Add the provided code at the end of the file.

@media (max-width: 719px) {
    .main-header--centered .header-minimal .store-title {
        width: calc(116% - 200px) !important;
    }
}
5

Hey there @camcam for removing the search icon, you can try this code

.header__icon–search { display: none; }

6

Hey there!

I can help you remove those search and account icons on mobile so your logo can be larger. Here’s how to do it with the Atlantic theme:

Solution: Hide mobile header icons

  1. Go to Shopify Admin → Online Store → Themes → Actions → Edit Code
  2. Find assets/theme.css or assets/base.css
  3. Add this CSS:
/* Hide search and account icons on mobile only */
@media screen and (max-width: 749px) {
  .header__icons .header__icon--search,
  .header__icons .header__icon--account {
    display: none !important;
  }
  
  /* Alternative selectors if above doesn't work */
  .site-header__search,
  .site-header__account {
    display: none !important;
  }
  
  /* Give logo more space */
  .header__logo {
    max-width: 200px !important;
  }
}

If that doesn’t target the right elements, try:

@media screen and (max-width: 749px) {
  .header__actions .header__icon {
    display: none !important;
  }
  
  .header__logo-wrapper {
    flex-grow: 1;
    text-align: center;
  }
}

This should hide those icons on mobile and give your logo room to grow larger.

Alternative: I built Easy Edits that lets you click on those icons and hide them instantly, plus resize your logo visually without any CSS trial and error!

Try the CSS above and let me know if your logo gets the space it needs!