Add padding to announcement bar

[Nattlig]

Can someone help me add some padding to the grey announcement bar? I want more padding on the top and bottom. 

Here is the store url: https://nattlig.no/

Thanks!

[dws_pvt_ltd]

@Nattlig, Hello! Please follow these steps to add this CSS code:
1. Go to your Online Store
2. Click on "Themes"
3. Select "Edit code"
4. Open your CSS file. If you have a custom CSS file, open that instead.
5. If you can't find your custom CSS file, open base.css" OR "theme.css".
6. Add the following code at the end of the file.

Search this ".annoucement-bar-top" class and add padding to that or add new CSS.

.annoucement-bar-top {
    padding: 10px 0px;
    display: flex;
    flex-wrap: nowrap;
    justify-content: space-around;
}
/* OR */
slideshow-component.announcement-bar {
    padding: 10px 0px;
}

Feel free to reach out if you have any questions or need assistance.
Best Regards,
DWS.

[DaveedValencia]

Add the following CSS to your theme. You can change the top and bottom to any px font you'd like, I put 10px but change them to 5px or 20px based on your preference.

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

[BSSCommerce-B2B]

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

Step 2: Search file theme.liquid

Step 3: Insert this code above </head> tag:

<style>
.annoucement-bar-top {
  padding: 10px!important
}
</style>

result: 

[Tech_Coding]

Hello @Nattlig 

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__announcement {
     padding: 10px;
  }
</style>

my reply helpful? Click Like to let me know!
your question answered? Mark it as an Accepted Solution.

[BSS-TekLabs]

- Here is the solution for you @Nattlig 
- Please follow these steps:

- Then find the theme.liquid file.
- Then add the following code at the before tag </head> and press 'Save' to save it.

 

<style>
.annoucement-bar-top {
    padding: 8px 0 !important;
}
</style>

- Here is the result you will achieve:

- Please press 'Like' and mark it as 'Solution' if you find it helpful. Thank you.

[PageFly-Richard]

Hi @Nattlig 

This is Richard from PageFly - Shopify Page Builder App

Please add this code to your theme.liquid above the </head> to get this solved

Step 1: Online Stores > Themes > More Actions > Edit code

Step 2: click on theme.liquid and paste the code above the </head>

<style>
.annoucement-bar-top{
padding:10px!important;
}
</style>

Hope this can help you solve the issue 

Best regards,

Richard | PageFly