How To Remove Padding From Announcement Bar & Header??

Mitesh3
Excursionist
38 0 7

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

Replies 4 (4)

techlyser_web
Shopify Partner
1115 212 230

Hello @Mitesh3 

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 </body> on theme.liquid


<style>

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

</style>

techlyser_web_1-1703785761367.png

 

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

techlyser_web_0-1703785588236.png

 

Techlyser || Shopify Partner || Helping eCommerce Stores
- Was my reply helpful? Click Like to let me know!
- Was your question answered? Mark it as an Accepted Solution.
- For further discussion contact: Email ID- info@techlyser.com
Mitesh3
Excursionist
38 0 7

Not Working And I Don't Understand Property 😞

techlyser_web
Shopify Partner
1115 212 230

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 </body> on theme.liquid


<style>

    @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;
}
}

</style>

 

techlyser_web_0-1703790396504.png

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

Techlyser || Shopify Partner || Helping eCommerce Stores
- Was my reply helpful? Click Like to let me know!
- Was your question answered? Mark it as an Accepted Solution.
- For further discussion contact: Email ID- info@techlyser.com

PageFly-Henry
Astronaut
808 222 194

Hi @Mitesh3 

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

Please let me know if it works by giving it a Like or marking it as a solution!


PageFly - #1 Page Builder for Shopify merchants.


All features are available from Free plan. Live Chat Support is available 24/7.