Add additional text below logo in Header

Support
#1

Hello

How can I add additional text (an address line) below the image logo on my header? Also, how can I specify the text size and letter spacing for this additional text?

You can see the page here http://motherculture.love/exhibitions/

Thanks so much!

#2

Hi there,

Please try this code:

.masthead-stacked .x-brand:after {
    content: "I am a text";
    display: block;
    font-size: 2em;
    letter-spacing: 5px;
}

Hope this helps.

#3

Great thank you for this

Should I paste this into the global custom css?

#4

Hi there,

Yes you can place it there.

#5

Thank you for this

How can I adjust the font weighting to match to menu bar text? See how the text looks bold compared to the nav menu?

Also- how do I adjust the space between the logo and the text below it? Is there a way to adjust the size of a gap between the two?

Also on mobile the address text below the logo gets chopped up into separate lines in an awkward way- how can I make this text responsive to device width or at least make it chop at the same points as the address listed in the footer at the very bottom when viewed on mobile?

You can see what I am talking about on the top of this page with the logo and address

#6

What is the best way to adjust line height for the address text in the header? I have added the following code to the global custom css but it doesn’t seem to have any effect

.x-colophon.top .x-colophon-content {
line-height: 2.5em !important;
}

Thanks!

#7

Hi,

You can change the css code provided by my colleague to this.

.masthead-stacked .x-brand:after {
    content: "1819 3RD AVENUE LOS ANGELES CA 90019";
    display: block;
    font-size: 0.5em;
    font-weight: 400;
    letter-spacing: 11px;
    font-family: 'Eb Garamond', cursive;
    margin-top: 10px;
    line-height: normal;
}

/* for mobile */

@media(max-width:767px){
     .masthead-stacked .x-brand:after {
           font-size: 0.5em;
           font-weight: 400;
           letter-spacing: 5px;
     }
}

You may change the margin-top, font weight and line height as you wish.

Hope that helps

#8

This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.