Jump to content

Adding text and/or images to header 71.

Recommended Posts

I am working on the new Squarespace 7.1 version of the website editor. I need to add text and a small image in the upper right-hand corner of the web page. I cannot seem to find a way to perform this action. Ideas have been suggested to use custom code or a CSS trick to accomplish this task. However, no clear path has been defined.

I have attached an example of a WordPress "header" I am attempting to migrate from and what I have on the new site on being reconstructed on Squarespace.

Note: I blurred out this request's business phone number and name.

Any suggestions are welcome!



Link to comment
  • Replies 2
  • Created
  • Last Reply

Top Posters In This Topic

Popular Days

Top Posters In This Topic

Posted Images

Tricky to do in just css with that layout. Maybe some JS to swap out default styles would be the way to go. Here's a basic css method to 'inject' content into the header using the button element to attach extra text and an icon:

.header-actions-action .btn{display:inline;} //just so the text below lines up vertically with the button middle

.header-actions-action::before {
  content: "\f05b"; white-space: pre;color:inherit; font-family: 'Material Symbols Outlined'; font-weight:900; margin-left: 10px;text-align:left; float:left; display:inline-block;} // if want the icon, you'll need to add the @media call for the font-family in the css (above) for the Material icon font, as well as the link to the Google Material Icon font in Custom Code... see Google Icons for details.

.header-actions-action::after {
  content: "Verteran owned & operated \a" attr(title); white-space: pre; color:inherit; font-weight:900;margin-left: 5px;margin-right: 15px;float:left; display:inline-block;}


before and after css.png

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.