Jump to content

Adding text to mobile header

Go to solution Solved by tuanphan,

Recommended Posts

Hi,

I added the name of my company in the header above the navigation and it worked well for the desktop version using 

.header-nav:before {content: "South Mountain Advanced Therapies Consultants, LLC"; display: block; position: relative; top: -20px;font-family:cormorant infant; font-size:18px; white-space:pre}

Since the navigation is different in the mobile version, I am not able to insert the name of the company between the logo and the burger (navigation). How can I accomplish this?

Thank you!

Link to comment

Use this CSS code

div.header-display-mobile .header-title:after {
    content: "South Mountain Advanced Therapies Consultants, LLC";
    display: block;
    font-family:cormorant infant;
    font-size: 11px;
    white-space:pre;
    text-align: center;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
}

 

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

@tuanphan it worked, thank you so much!

My company's name is a bit long (or it will be too small if I make the fonts smaller) and I would like to make it in 2 lines ("South Mountain Advanced" in one line, "Therapies Consultants, LLC" in the next line), how would I accomplish this? 

Thank you!

Link to comment
  • Solution
On 3/2/2024 at 12:01 AM, kilroy123 said:

@tuanphan it worked, thank you so much!

My company's name is a bit long (or it will be too small if I make the fonts smaller) and I would like to make it in 2 lines ("South Mountain Advanced" in one line, "Therapies Consultants, LLC" in the next line), how would I accomplish this? 

Thank you!

Use this new code

div.header-display-mobile .header-title:after {
    content: "South Mountain Advanced \A Therapies Consultants, LLC";
    display: block;
    font-family:cormorant infant;
    font-size: 11px;
    white-space:pre;
    text-align: center;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
}

 

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.