Change the font size of one word in the header

[msjogren1]

hi - i am wondering if it's possible to make a part of the store name that appears in the header a different size font than the rest. 

for example 

christmas

sweater (smaller)

party 

i already used the following code to break up the title onto different lines

.page-width {max-width: 600px;}

[PageFly-Victor]

Hi @msjogren1 ,

Yes, it is possible to use different font sizes for different parts of a store name that appears in the header. One way to achieve this is by using HTML and CSS.

To make it easier, Could you please share URL and your store password if it enabled? So that we can help you.
Thank you.

[msjogren1]

https://longtimefrienddiscount.myshopify.com/

pw: sahmoh

i actually can see that the code i thought was working to break the title up onto different lines is making it so the home/catalog/contact links on the left and the cart/search icons on the right are coming into the center of the screen as opposed to staying at the edge of the screen left and right.  so if you have code that creates a line break between the words in the store name and also code that allows me to make a specific word in the store name a smaller size, that is what im looking for. 

thanks for your help!

[BSS-Commerce]

Hi @msjogren1 

We would like to suggest to you how to break the line of the title and adjust the font without changing the width of the header. Please follow these steps:

- First, go to Themes -> Edit code:

- Next, go to the Sections folder -> select the header.liquid file. Here, you can replace the code:

<span class="h2">{{ shop.name }}</span>

into:

<div class="header__heading-title">
   <span class="h2">LONG TIME</span>
   <span class="h2 h3">FRIEND</span>
   <span class="h2">DISCOUNT</span>
</div>

(Here, we code based on the name of your current store, you can change it later if you want)

After you replaced the code, go to the Assets folder -> select the base.css file. Here, you add this code at the end of the file:

.header__heading-title{
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-content: center;
}

.header__heading-link .h3 {
  font-size: calc(var(--font-heading-scale) * 1.4rem);
  line-height: 1;
  color: rgba(var(--color-foreground), 0.75);
}

- (To make the font size of the text smaller, adjust the number 1.4 in the line of code "font-size: calc(var(--font-heading-scale) * 1.4rem);").

- Your store will look like this:

We hope that it will work for you.

[msjogren1]

hi there!  sorry i dropped off, but now i'm back to getting our site up. thanks so much for these instructions they were very easy to follow. i did each step but i'm not getting the same results unfortunately.  are you able to take a look and see why? 

https://73ueyzv25rqiyeb6-72955101459.shopifypreview.com

[GemPages]

Hello @goldschdr 

To provide you with the most precise solution in this case, could you please share your page URL ( with pass if your store password is enabled )?

Thank you and hope to hear from you.
Best regards,
GemPages Support Team

[BSS-Commerce]

Hi @msjogren1 

Can you kindly share your store link (with the password, if any) with us? We will check it and suggest you a solution if possible.