How to add a tagline under logo on Bedford cover page?

Site URL: https://www.jimmyness.com/

Hi there,

I'm trying to add a tagline under my name on my cover page in Bedford but you can't do this without using CSS. I'd like this to display in both mobile and on computer. Any help would be amazing. I saw @tuanphan answer a topic on this previously in 2020, but the code for me just displays broken at the top of my page so I couldn't quite get it working. 

Thank you!

On 10/15/2021 at 10:51 AM, Jimmyness said:

Site URL: https://www.jimmyness.com/

Hi there,

I'm trying to add a tagline under my name on my cover page in Bedford but you can't do this without using CSS. I'd like this to display in both mobile and on computer. Any help would be amazing. I saw @tuanphan answer a topic on this previously in 2020, but the code for me just displays broken at the top of my page so I couldn't quite get it working. 

Thank you!

Do you mean something like this

16 hours ago, bangank36 said:

Do you mean something like this

Hey @bangank36,  that's exactly what I'm after! 

39 minutes ago, Jimmyness said:

Hey @bangank36,  that's exactly what I'm after! 

You can try in Home > Design > Custom Css

#collection-57eaaf7603596ed76b1f103e #logoWrapper:after {
  content: "YOUR TAGLINE";
  color: #fff;
  position: absolute;
  bottom: -1.5em;
  display: block;
  width: 100%;
  text-align: center;
  font-size: 1em;
}

#collection-57eaaf7603596ed76b1f103e #logoWrapper {
  position: relative;
}

Support me by pressing 👍 if this useful for you

You can change the content to set your required tagline

On 10/17/2021 at 7:40 PM, bangank36 said:

#collection-57eaaf7603596ed76b1f103e #logoWrapper:after {
  content: "YOUR TAGLINE";
  color: #fff;
  position: absolute;
  bottom: -1.5em;
  display: block;
  width: 100%;
  text-align: center;
  font-size: 1em;
}

#collection-57eaaf7603596ed76b1f103e #logoWrapper {
  position: relative;
}

Thank you @bangank36!

That worked a charm. I'd like my tagline to be two words, but when I write this, it displays over two lines rather than one.

What do I need to edit in the code to have my two word tagline display as one line under my logo? Thank you again. 

@Jimmyness Try this new code

#collection-57eaaf7603596ed76b1f103e #logoWrapper:after {
  content: "YOUR TAGLINE";
  color: #fff;
  position: absolute;
  bottom: -1.5em;
  display: block;
  width: 100%;
  text-align: center;
  font-size: 1em;
	white-space: nowrap;
}

#collection-57eaaf7603596ed76b1f103e #logoWrapper {
  position: relative;
}

On 10/20/2021 at 11:33 PM, tuanphan said:

@Jimmyness Try this new code

#collection-57eaaf7603596ed76b1f103e #logoWrapper:after {
  content: "YOUR TAGLINE";
  color: #fff;
  position: absolute;
  bottom: -1.5em;
  display: block;
  width: 100%;
  text-align: center;
  font-size: 1em;
	white-space: nowrap;
}

#collection-57eaaf7603596ed76b1f103e #logoWrapper {
  position: relative;
}

 

@tuanphan Thanks so much. I've played around with it and got it almost perfect so I do appreciate your help :). Finally, I'm trying to adjust the weight of the font to match the other page titles exactly. Below is my current code and the exact weight of the site font for reference. 

<style>

#collection-57eaaf7603596ed76b1f103e #logoWrapper:after {
  content: "RESEARCHER";
  color: #fff;
  position: absolute;
  bottom: -0.85em;
  display: bold;
  width: 100%;
  font-family: Proxima-Nova;
  text-align: center;
  font-size: 0.7em;
    white-space: nowrap;
}

#collection-57eaaf7603596ed76b1f103e #logoWrapper {
  position: relative;
}

On 10/22/2021 at 7:55 AM, Jimmyness said:

@tuanphan Thanks so much. I've played around with it and got it almost perfect so I do appreciate your help :). Finally, I'm trying to adjust the weight of the font to match the other page titles exactly. Below is my current code and the exact weight of the site font for reference. 

<style>

#collection-57eaaf7603596ed76b1f103e #logoWrapper:after {
  content: "RESEARCHER";
  color: #fff;
  position: absolute;
  bottom: -0.85em;
  display: bold;
  width: 100%;
  font-family: Proxima-Nova;
  text-align: center;
  font-size: 0.7em;
    white-space: nowrap;
}

#collection-57eaaf7603596ed76b1f103e #logoWrapper {
  position: relative;
}

 

Use this

<style>
#collection-57eaaf7603596ed76b1f103e #logoWrapper:after {
  content: "RESEARCHER";
  color: #fff;
  position: absolute;
  bottom: -0.85em;
  display: bold;
  width: 100%;
  font-family: Proxima-Nova;
  text-align: center;
  font-size: 0.7em;
    white-space: nowrap;
  font-weight: 700 !important;
}
#collection-57eaaf7603596ed76b1f103e #logoWrapper {
  position: relative;
}
</style>

@tuanphan @bangank36 Perfecto! Thank you both again for your help. Very clear and painless. Nice one.