Debut theme center my logo and remove search

Store Design

Topic summary

Goal: In the Debut theme, center the logo on mobile with menu on the left and cart on the right, and remove the search icon on both mobile and desktop.

Recent updates:

  • A screenshot of the header was shared. Participants requested the preview link and the header.liquid file to assess and adjust the HTML structure.
  • Multiple replies note this may require HTML changes and possibly making the header layout dynamic; offers for developer assistance were made.

Proposed solution:

  • A CSS-only approach was suggested: center the logo (.site-header__logo { margin: 0 auto; }), float the menu left (.site-header__menu { float: left; }), float the cart right (.site-header__cart { float: right; }), and hide the search icon (.site-header__search { display: none; }). This code snippet is central to the discussion.

Open questions / status:

  • The original poster asked where to place the CSS code (implementation location not yet clarified). No final resolution or confirmed implementation; discussion remains ongoing.
Summarized with AI on December 16. AI used: gpt-5.
1

Hello.

I would like that my logo on mobile version is centered, the menu on the left and cart on the right.

Would also like to remove search icon for both mobile and desktop.

I use debut theme.

1 Like
2

Hi Edgars,

For sure, I can help. First, let me read your mind and see what the preview link of your site is :joy: .
JK please share your preview link first

3

i thought i uploaded screenshot but posted and nothing haha.. now should be ok

Screenshot_20241025_210414_Chrome.jpg
Screenshot_20241025_210414_Chrome.jpg1080×2035 169 KB

4

Hello @Edgars_Rudzitis ,

It’s possible but needs customization.
We need to make html adjustments.

If you need help with code part you can drop me an email.

You can find the email in the signature below.

Thanks

5

ohh this is not an easy fix, can you share your header.liquid file and I might be able to change the structure of the HTML to get what you need

6

something like this is possible by just checking some HTML and CSS, let me know:

kevinkarma55_0-1729881188943.png
kevinkarma55_0-1729881188943.png386×450 32.6 KB

7

Should i copy the code here?

8

Here is fine, please use this tool for a better format:

kevinkarma55_0-1729883124232.png
kevinkarma55_0-1729883124232.png683×118 6.09 KB

9

Hi @Edgars_Rudzitis

This is doable, but you’ll need a developer to make it dynamic. Let me know if you’re interested. Thanks!

10

To center your logo on the mobile version while keeping the menu on the left and the cart on the right in the Debut theme, you can add custom CSS like this:

css

Copy code

.site-header__logo { margin: 0 auto; } .site-header__menu { float: left; } .site-header__cart { float: right; }

 

To remove the search icon for both mobile and desktop, add the following CSS as well:

css

Copy code

.site-header__search { display: none; }

 

This will help you achieve the desired layout!

11

Sorry for a dumb question.. where to put these codes? :slightly_smiling_face: