remove search field + change mobile view

Shopify Discussion
1

Hi!

I am using the free theme Colorblock and i am happy with it: but I would love to be able to remove the search bar in the navigation. But I cannot find any option for that? Is there any css for that?

Also, what is the person icon for? I would like to remove that as well.

And: the template sort of force you to have an image on the front site: i did not want that and uploaded a blank white image: that works but in mobile view this “image” comes first and you need to scroll past it to see the rest of the content. This means that the page basically looks empty in mobile view. Is there any way to get the image under the text - or be able to not upload an image at all?

my site is: www.inevik.no

2

Hi @inusan ,
Person icon is for customers to log in to their profile. But, we can hide both of them using CSS.

Please follow the steps here:

  1. Go to ‘Edit Code’ from your theme.

  2. Go to ‘base.css’

  3. Add those Css to your file.

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

I’m not sure about the last part of your question. Can you add any screenshots?

3

Hi,

By adding provided CSS, you can successfully hide search bar and person icon from the navigation.

For the mobile view layout, you may need to use CSS to reorder image or create a custom section (if the theme requires an image to be uploaded)

4

Thank you so much!

I tried however and it seems like it does not work? The edit code page says that i also can change css in the theme editor and i tried there too but not luck unfortunately :slightly_smiling_face: adding a screenshot of the change :slightly_smiling_face:

So, regarding the mobile view: The template only lets me add a block called image + text even if i really only want text. The image is on one side of the text. So i uploaded a blank image. Looks good on desktop but on mobile view the image is above the text )because the narrow view) so the page looks blank.

Skjermbilde 2024-10-03 kl. 14.17.16.png
Skjermbilde 2024-10-03 kl. 14.17.16.png1140×564 64.2 KB

5

Can you trying adding this code instead of the previous one? Same position on the base.css please.
The code is working but there is a precedence issue there. If you can go to the mobile, you can see that.

header .header__icons .header__search, 
header .header__icons .header__icon--account{
  display: none !important;
}

For the second issue, trying finding this file - component-image-with-text.css and paste this css in there.

.image-with-text>.image-with-text__grid>.image-with-text__media-item{
  display: none !important;
}
6

It all worked beautifully, thank you!!