Need help with a CSS in the Publisher theme

Store Design
, , , ,
1

Hi lads! I wanted to add to the Publisher theme a white stripe below the announcement bar and the header, like this sites has:

Web Store

If you can help me with that, it will be much appreciated! It is driving me nuts! Haha

Thanks!

2

Hi @Beelze6 ,

Please provide link to your store. I will review it and provide you with a custom CSS to get this done.

Thank you

3

Hey! Thanks for the help! Sure!

Web Store

4

Hey @Beelze6 ,

To add a white stripe below the announcement bar and header in the Publisher theme, you can add a bit of custom CSS. Here’s how you can do it:

Follow these steps:

  1. Online Store

  2. Themes

  3. Customize

  4. In the theme editor, find theme setting or Edit Code (usually under Actions > Edit code).

  5. Open your theme’s theme.scss.liquid or theme.css.liquid file (depending on your setup):

Add the following CSS at the end of the file:

/* Add white stripe below announcement bar and header */
.announcement-bar, .site-header {
    position: relative;
    border-bottom: 5px solid #ffffff; /* Adjust thickness as needed */
}

Save your changes and refresh your site to see the white stripe.

This code adds a white border at the bottom of the announcement bar and header, giving the effect of a white stripe. You can adjust the thickness by changing the 5px value. Let me know if you need further customization!

If I was able to help you, please don’t forget to Like and mark it as the Solution!
If you’re looking for expert help with customization or coding, I’d be delighted to support you. Please don’t hesitate to reach out via the email in my signature below—I’m here to help bring your vision to life!

Best Regard,
Rajat Sharma

5

Hey! Thanks for the help!

I have only a “theme.liquid” file under “Edit code” section, but pasted the code at the bottom but didn’t worked.

Tried putting the code under the CSS section on “Personalized CSS” in Theme Settings but didn’t worked either.

6

If the code didn’t apply through the custom CSS, let’s try directly targeting the relevant elements in the Publisher theme.

  1. In the theme.liquid file: Ensure the CSS targets are correctly applied. Try this updated CSS, which may be more specific to the Publisher theme’s structure:
/* Add white stripe below announcement bar and header */
.announcement-bar {
    border-bottom: 5px solid #ffffff; /* Adjust thickness if needed */
}
.header-wrapper {
    border-bottom: 5px solid #ffffff; /* Adjust thickness if needed */
}
  1. Inject CSS Directly: If the CSS still doesn’t apply, we can try adding CSS directly within the tags in the theme.liquidfile for testing. You can do this by adding the following at the bottom of the section:
  1. Inspect Element to Confirm Class Names: If it still doesn’t work, we may need to confirm the exact class names by right-clicking on the announcement bar and header, selecting Inspect or Inspect Element in your browser, and checking their specific class names. This can vary based on customizations in the Publisher theme.

Once these are added, refresh the page and check if the stripe appears. Let me know if it still doesn’t apply or if any adjustments are needed. Please feel free to email me, and we can discuss this further in detail.

thanks

7

Well, it worked only for the header! But not for the announcement bar, worked, but not the full lenght.

Beelze6_0-1731132276757.png
Beelze6_0-1731132276757.png530×218 23.4 KB

8

Could you please send me an email so we can discuss this further? I’d be happy to go over the details with you.

9

Sure!

10

Hi @Beelze6

To complete your requests, please follow these steps:

  1. Go to Shopify Admin > Online Store > Theme > Customize > Theme Settings > Custom CSS https://prnt.sc/i8ljAMlHJUKl
  2. Paste the code provided into the Custom CSS section.
.utility-bar {
    border-bottom: 2px solid !important;
}
sticky-header.header-wrapper {
    border-bottom: 2px solid !important;
}

Here is the result: https://prnt.sc/BS4gRYcFg0rk

Best,

Daisy

11

Oh, that did it! Thank you! How can I change the color of the stripes?

12

Never mind, I did it! Thank you!