Header Button with 2 lines of text in Squarespace 7.1

Site URL: https://mdforvitality.squarespace.com/

Hello all,

I'm looking to force my header button to break into two lines of text. My client needs a long button title, but it takes up too much room in the header with only one line of text. Thanks so very much in advance! Site password is: vitality

?? {
max-width: 200px;
white-space: normal;
text-align: center;
}

I'm still fuzzy on how to target specific elements in squarespace code (wish they'd let me uniquely id and class elements myself), so the ??s should be replaced with whatever you need to target that button. The words will break naturally if you give them a smaller container, hence setting a max-width. 

Some suggestions for trying in the ?? space:

.theme-btn--primary-inverse
.header-actions-action--cta a
.header-actions--right a

Hope that works

Thanks you for the quick response, isensmith. Those ID's did not work, sadly.

Actually they were classes, not ids, sorry i forgot to include the "." (i've edited my post and added them now. See of one of them works now?

Do you still need help?

@tuanphan Hi 🙂 I am needing the same answer for site: www.auconsulting.co.nz - Is there anyway to split the english and māori for each navigation link into two lines? and if possible fill the Māori text in a different colour?

On 1/11/2022 at 12:20 AM, Greenroom said:

@tuanphan Hi 🙂 I am needing the same answer for site: www.auconsulting.co.nz - Is there anyway to split the english and māori for each navigation link into two lines? and if possible fill the Māori text in a different colour?

Add to Design > Custom CSS

header#header a[href="/about-us"]:after {
    content: "Ko wai mātou";
    display: block;
    color: red;
}
header#header a[href="/what-we-do"]:after {
    content: "Ā mātou mahi";
    display: block;
    color: red;
}
header#header a[href="/nga-matapono"]:after {
    content: "Ngā Mātāpono";
    display: block;
    color: red;
}
header#header a[href="https://educate.auconsulting.co.nz"]:after {
    content: "Akoranga ā-rorohiko";
    display: block;
    color: red;
}
header#header a[href="/connect"]:after {
    content: "Hono mai";
    display: block;
    color: red;
}

@tuanphan Thank you so much!! works perfectly 🙂

@tuanphan tried to use the :after psuedo-element  and display block to achieve a second line on my buttons, but it only worked on the header button. All other buttons displayed the secondary text inline. Do I need to modify the code in a different way to have two lines in a button

On 1/13/2023 at 3:21 AM, nathan.j.p said:

@tuanphan tried to use the :after psuedo-element  and display block to achieve a second line on my buttons, but it only worked on the header button. All other buttons displayed the secondary text inline. Do I need to modify the code in a different way to have two lines in a button

Hi,

What is your site url? We can check easier