Modify header to embed code rather than using an annoucement bar?

[rishi108]

Hi

I am trying to put ‘book a free 10 min chat’ from an announcement bar into the header on the left hand side, shown below:

Can anyone help with this please?

Many thanks,

R

[LitCommerce]

Hi @rishi108 ,

Please go to header.liquid file, find ‘header__icons’ and add code here:

Code:

Book a FREE 10 min chat

Hope it helps!

[rishi108]

Thank you so much but it doesn’t work instead the header icons are
completely gone!

Here is the web address: www.doctorshonpal.com Any other ideas?

Thank you again.

[rishi108]

Thank you so much but the link does not work - it just says 'Book a free 10 min chat"! Please see below:

I was wondering if we could make the link available to click on - URL link as well as making it into a square box like shown please:

Here is the web address: www.doctorshonpal.com.Many thanks. Any other ideas?

Thank you again.

[LitCommerce]

Hi @rishi108 ,

Please change code:

                Book a FREE 10 min chat

Hope it helps!

[rishi108]

Thank you so much but could we put a box around such as color scheme I have in place - color scheme - background 2 please? This is to enable it to stand up at all? Similar to this one…

Many thanks,

[LitCommerce]

Hi @rishi108 ,

Please change code:

                Book a FREE 10 min chat

Hope it helps!

You want this:

[LitCommerce]

Hi @rishi108 ,

I saw you liked my answer. If it helped you solve your issue, please mark it as a solution. Thank you and good luck.

[rishi108]

Thank you so much! Could we change the font and size to match my existing font/size on the main page please? You are incredible!

[LitCommerce]

Hi @rishi108 ,

Go to Assets > base.css and paste this at the bottom of the file:

.header__icons .announcement-bar__message {
    font-size: 12px !important;
}

You can change the font size to your liking

[rishi108]

Thank you, one very last question on this thread - do you know how to also create my social media links on the header too (as well as the bottom)? I am using sense 3.0. Many thanks.

[rishi108]

Thank you, is there any other way to get around it looking like this on the mobile? Thank you. Do you know how to also create my social media links on the header too (as well as the bottom)? I am using sense 3.0. Many thanks.

[LitCommerce]

Hi @rishi108 ,

Go to Assets > base.css and paste this at the bottom of the file:

.header__icons .announcement-bar__link {
  min-width: 90px;
}

[rishi108]

You’re amazing, thank you!