Reduce header padding-top MOBILE only - Dawn Theme

Store Design
, , , ,
1

Hello, having some trouble with reducing the Mobile view padding/space. I cant do it in theme editor as its already at 0px for padding-top, and cant find the section in backend code. Can someone please let me know where I can find the code to reduce it please.

padding reduction.png
padding reduction.png503×111 1.43 KB

2

Hello @xnyjyh
can you share store URL?

3

Hello @xnyjyh

You can add code by following these steps to change ATC background color

  1. Go to Online Store → Theme → Edit code.

  2. Open your theme.liquid file

  3. Paste the below code before on theme.liquid

@media screen and (max-width:767px){ .header__heading-logo { height: auto; max-width: 100%; padding-top: 16px; } }
4

Sorry, the red line was misunderstood, oops. Ignore the logo. The layout of logo and icons are how i want them. Just think of it as top of icons reduce padding to top of page. Hope thats makes sense?

5

Hello @xnyjyh

You want to remove this padding?

techlyser_web_0-1703271542717.png
techlyser_web_0-1703271542717.png365×187 2.21 KB

6

removing this part in the outlined area. too much space from top of icons to top of page.

remove this.png
remove this.png511×174 3.42 KB

dosnt seem to be padding

7

Hi @xnyjyh

You can add code by following these steps to change ATC background color

  1. Go to Online Store → Theme → Edit code.

  2. Open your theme.liquid file

  3. Paste the below code before on theme.liquid

@media screen and (max-width:767px){ .header__heading-logo { height: auto; max-width: 100%; padding-top: 0px !important; } }
8

Does not do what I need it to do. I need to keep the layout as it is already. ONLY reduce space from icons/logo from top. All your code does is rearrange my logo to where I do not want it. Just think of it as cutting that are out where i showed you my last image and Not move any layout.

9

Hi there,

It looks like you might have a announcement bar live on your website with the text the same color as the background. Simply click on the “eye” icon to hide it. Or just delete via the “trash can” icon.

Screenshot 2023-12-22 at 20.45.07.png

Otherwise, if this is not it. Please share your store URL either live or preview so we can check. Also if you do decide to change the CSS. Please always try to make it work in the “Custom CSS” part of your theme or section before editing your theme code and writing some CSS on a place it does not belong. On top of that, you will have to then also make an edit to your theme each time you update, which is not super ideal.

Hope this helps!

10

The announcement bar was already turned off and not live. Ill PM you the url so maybe you can see whats up?! Thanks

11

I did just find this oddly, this is most likely the culprit! “skip-to-content-link button visually-hidden”. now to try and find what and where it is to turn it off/delete it! its prolly has something to do with the announcement bar.

hidden button.png
hidden button.png880×196 7.37 KB

12

I’ts not! I’ve just send you the proper awnser. I can see you have edited the CSS of your theme manually. Please be aware of doing this in the future as you don’t seem to fully understand what you’re doing. So making changes might end up with unexpected results.

Trial and error is the best way of learning, but maybe when making code changes, do it in a theme that is not live :wink: