NEED HELP!! How to add padding to mobile header Debut theme

New Member
2 0 0

Hi everyone,


I have been trying everything but cannot seem to figure out how to solve this. My desktop view looks great, just my mobile view is not good yet (and as most of my customers will use their mobiles, this is quite problematic). 

I want to add padding in between the header (logo/search button/cart button/menu button) and the announcement bar. Now they are almost attached. My website is So to be clear, my problem is only with the mobile view. 

Can someone help me? Thanks so much in advance!!



Shopify Staff
Shopify Staff
1062 100 242

Hey there, Misha!

Bo here from Shopify Support.

That is a really great question and I can see why you would want to add that bit of padding. To do so you will need to follow these steps:

  • Go to Online Store > Actions > Edit Code.
  • Open Assets Folder > theme.scss.liquid and scroll to the very bottom of the file.
  • Add the following code at the very end:
@include media-query($small) {
.site-header {
    padding-top: 10px;
  • Click Save.
  • If you would like more padding than this you can adjust the number of px in the code accordingly.

NB When editing the CSS of your theme it is always a good idea to duplicate your theme first and making the changes on the duplicate. This will prevent any errors from occurring on your live site. We also recommend adding CSS to the bottom of the file as opposed to altering the preexisting code. The new code will overwrite the previous code.

Let me know how this goes and if there is anything else I can assist you with, I'm happy to help!

All the Best,

Bo | Social Care @ Shopify
 - Was my reply helpful? Click Like to let me know! 
 - Was your question answered? Mark it as an Accepted Solution
 - To learn more visit the Shopify Help Center or the Shopify Blog

New Member
9 0 0

Maybe you can help me!

I have icons (account, search, cart) in header too close to my logo image. I have this issue only on mob version and small size screens. My site:
How to fix this problem?

Hope you will help me!)

Hello @MOSY,

1. Go to Online Store->Theme->Edit code
2. Asset->theme.scss.liquid->paste bellow code in bottom of file

.Header__FlexItem.Header__FlexItem--fill {
	align-content: flex-end;
	display: flex;


Want to modify or incorporate custom changes on store, Hire us
If helpful then please Like and Accept Solution .
Skype : oscprofessionals-87
Whats app
Free Website Review and advice for sale from Shopify Conversion Experts | Shopify Private App | Custom Theme Development | Custom Modifications In To Shopify Theme | Shopify SEO ; Digital Marketing & amp | Site Speed Optimization | Performance Site Audit