How To Remove Padding From Announcement Bar & Header?

Store Design
1

How To Remove Padding From Announcement Bar & Header..

Note:- I Have Cropped The Logo And Uploaded It But Then Also The Padding Is Big.. Can Anyone solve This?

And I Also Want Moving Announcement Bar From Right To Left Smoothly!!

URL :- houseofsneakers.in

IMG_20231228_191055.jpg
IMG_20231228_191055.jpg1080×2400 182 KB

2

Hello @Emiway

You can add code by following these steps

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

  2. Open your theme.liquid file

  3. Paste the below code before on theme.liquid

.announcement-bar__message { padding-top: 10px !important; padding-bottom: 10px !important; }

techlyser_web_1-1703785761367.png

You have to add tag and between this tag you tag add below code in announcement-bar.liquid file

techlyser_web_0-1703785588236.png

3

Not Working And I Don’t Understand Property :disappointed_face:

4

You can add code by following these steps

  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){ .announcement-bar__message { padding-top: 5px; padding-bottom: 5px; } .announcement-bar__list { padding-left: unset !important; padding-right: unset !important; } .announcement-bar { padding-left:unset !important; padding-right: unset !important; } }

techlyser_web_0-1703790396504.png
techlyser_web_0-1703790396504.png260×280 42.8 KB

You must place the SMG div of the announcement bar between the tags, For Moving Announcement Bar, which you will find in the announcement.liquid file.

5

Hi @Emiway

This is Henry from PageFly - Landing Page Builder App

You can try this code by following these steps:

Step 1: Go to Online Store->Theme->Edit code.

Step 2: Search file theme.css

Step 3: Paste the below code at bottom of the file → Save

@media (max-width: 767px){

.announcement-bar__message.text–xsmall {

padding: 0 !important;

}}

Hope that my solution works for you.

Best regards,

Henry | PageFly