Jump to content

Adding Text Underneath a Logo in the Header that appears on both mobile and desktop

Go to solution Solved by tuanphan,

Recommended Posts

Hello! I would like to add the tagline "illuminating the intersection of beneficial arts and science" underneath the logo on the site https://www.medicinal-media.org/ - this is a 7.1 template. I would like the line to be centered on desktop and left justified on mobile as the logos are. If anyone can help I would appreciate it! Previous threads on the topic did show me how to add text but it appeared on the left side of the header as opposed to center under the logo. This is a site with a business plan subscription. Thank you!!

Link to comment
On 4/8/2023 at 8:17 AM, tuanphan said:

Add to Design > Custom CSS

div.header-title a:after {
    content: "illuminating the intersection of beneficial arts and science";
    display: block;
    font-size: 30px;
}

 

Is there an adjustment I can make to affect just the size of the text on mobile only?

Link to comment
On 4/13/2023 at 6:02 AM, JMJATX said:

Is there an adjustment I can make to affect just the size of the text on mobile only?

Add this under

@media screen and (max-width:767px) {
div.header-title a:after {
    font-size: 20px;
}
}

 

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment
  • 4 months later...

For some reason, this change and the CSS change I made to remove underlines from links, now no longer works despite me not changing anything.  The only error I am getting is "missing closing }" but it doesn't show where it is missing and if I add it at the end, nothing changes. There is a possibility that someone else with access messed with the CSS although they said they didn't. I don't recall the button hover state information being in there before at the end. Any help you could give me would be so appreciated! Thank you!

Here is the code as it exists on the site now:

/* Add line of text under header logo */ 
div.header-title a:after {
    content: "illuminating the art and science of beneficial media";
    display: block;
    font-size: 14px;
  font-weight: bold;
  letter-spacing: -.5px;
}
@media screen and (max-width:767px) {
div.header-title a:after {
    font-size: 10px;
  padding: 1px;
  padding-left: 2em;
}

/* Remove non-background image underline for heading and paragraph links */
h1 a, h2 a, h3 a, h4 a, p a {text-decoration: none!important}

}


/* Stack blog post titles  */ 
    @media only screen and(max-width: 640px){

    .item-pagination--prev-next {

    flex-direction: column!important

    }

    .item-pagination-link{

    max-width:100%;

    margin-bottom: 40px

    }
    }
/* Mobile margin  */ 
@media screen and (max-width:640px) {
div.Site {
    padding-left: 4em;
    padding-right:4em;
 .sqs-block-button-}{element:hover{background-color: #00CC99 ! important}
   }

 

Link to comment
13 hours ago, JMJATX said:

For some reason, this change and the CSS change I made to remove underlines from links, now no longer works despite me not changing anything.  The only error I am getting is "missing closing }" but it doesn't show where it is missing and if I add it at the end, nothing changes. There is a possibility that someone else with access messed with the CSS although they said they didn't. I don't recall the button hover state information being in there before at the end. Any help you could give me would be so appreciated! Thank you!

Here is the code as it exists on the site now:

/* Add line of text under header logo */ 
div.header-title a:after {
    content: "illuminating the art and science of beneficial media";
    display: block;
    font-size: 14px;
  font-weight: bold;
  letter-spacing: -.5px;
}
@media screen and (max-width:767px) {
div.header-title a:after {
    font-size: 10px;
  padding: 1px;
  padding-left: 2em;
}

/* Remove non-background image underline for heading and paragraph links */
h1 a, h2 a, h3 a, h4 a, p a {text-decoration: none!important}

}


/* Stack blog post titles  */ 
    @media only screen and(max-width: 640px){

    .item-pagination--prev-next {

    flex-direction: column!important

    }

    .item-pagination-link{

    max-width:100%;

    margin-bottom: 40px

    }
    }
/* Mobile margin  */ 
@media screen and (max-width:640px) {
div.Site {
    padding-left: 4em;
    padding-right:4em;
 .sqs-block-button-}{element:hover{background-color: #00CC99 ! important}
   }

 

This code is invalid

image.thumb.png.c4699d075d6355902b0209d7de72069d.png

#1. First, element:hover is not correct class name

#2. Next, { symbol here is incorrect

image.thumb.png.e1967ea3defdf6431dd2a2a755c6bdcf.png

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment

Thank you! I removed that portion entirely as I think that must have been added by another team member. It still says I'm missing a closing } Here's the code now:

/* Add line of text under header logo */ 
div.header-title a:after {
    content: "illuminating the art and science of beneficial media";
    display: block;
    font-size: 14px;
  font-weight: bold;
  letter-spacing: -.5px;
}
@media screen and (max-width:767px) {
div.header-title a:after {
    font-size: 10px;
  padding: 1px;
  padding-left: 2em;
}

/* Remove non-background image underline for heading and paragraph links */
h1 a, h2 a, h3 a, h4 a, p a {text-decoration: none!important}
/* Stack blog post titles  */ 
    @media only screen and(max-width: 640px){

    .item-pagination--prev-next {

    flex-direction: column!important

    }

    .item-pagination-link{

    max-width:100%;

    margin-bottom: 40px

    }
    }
/* Mobile margin  */ 
@media screen and (max-width:640px) {
div.Site {
    padding-left: 1em;
    padding-right: 1em;
}
}

Link to comment
  • 4 months later...

Thank you so much. This has worked really well. We just made the line a few words longer though and I'm wondering if I can add a line break and center the line? I'd like the break to come after "science." Thank you!

*/
/* Add line of text under header logo */ 
div.header-title a:after {
    content: "a nonprofit illuminating the art and science of beneficial media";
    display: block;
    font-size: 12px;
  font-weight: bold;
  letter-spacing: -.5px;
  text-align: center;
}
@media screen and (max-width:787px) {
div.header-title a:after {
    font-size: 11px;
  padding: 1px;
  padding-left: 1px;
}
 

Link to comment

Change this code

div.header-title a:after {
    content: "a nonprofit illuminating the art and science of beneficial media";
    display: block;
    font-size: 12px;
  font-weight: bold;
  letter-spacing: -.5px;
  text-align: center;
}

to

div.header-title a:after {
    content: "a nonprofit illuminating the art and science of beneficial media \A new line new line new line";
	white-space: pre-wrap;
    display: block;
    font-size: 12px;
  font-weight: bold;
  letter-spacing: -.5px;
  text-align: center;
}

 

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment
  • 2 months later...
9 hours ago, MReferesh said:

This is great, however I am wondering if there is a way to do this as a phone number, and display it to the RIGHT of the header logo? Ideally, the phone number would also be a link?

To add Phone (clickable), you will need to use script code. If you share link to your site, we can give you code to achieve this.

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment

Create an account or sign in to comment

You need to be a member in order to leave a comment

×
×
  • Create New...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.