Jump to content

Add Page Title to Header

Recommended Posts

Site URL: https://seal-burgundy-yx98.squarespace.com/

I'm hoping to add the page title (or navigation title) to the center of the header on my project pages when viewed on the desktop. I wouldn't want it to show up on my landing or 'about' pages, so I think a header code injection seems like the likely way to achieve this, but I haven't found anything on the forums that quite does it. The text formatting could be Paragraph 2. 

Page: https://seal-burgundy-yx98.squarespace.com/

Password: RobHutch


Link to comment
  • Replies 15
  • Views 3.1k
  • Created
  • Last Reply

So far, I've been able to get generic text to show up the way I'd like using the code below. But I'm struggling with figuring out how to have either the 'Page Title' or 'Navigation Title' show up automatically. I don't know how to reference those. 

I could manually inject the header html on each project page, but then that makes future updates and formatting problematic. Any ideas? 

//HTML to Header Injection//
<div class="centered-content">
   <h3 class="highlight">Project Name</h3>
.centered-content {
text-align : center;
Link to comment

Thanks for taking a look @ryandejaegher! Generally yes, but I think there needs to be different set ups for Mobile and Desktop. 

For Desktop, I want the text that currently says 'Project Title' to show the page title (in this case 'Belltown Collective'). The reason that I'm trying to put that text into the header is that I'm hoping to keep the slideshow images as large as possible. 

For Mobile, there isn't enough room for the title to always fit in the header, so dropping it below the header like you've shown could make sense. Then I think the padding above the slideshow could be reduced so it isn't located so far below that title. In honesty I was going to decide what to do for Mobile based on what worked for Desktop. 

I hope this makes sense!



Link to comment

So you can do this in a more dynamic way, you can basically see if the page is a gallery item and if it is you can grab the navigation title and display it on the page. If it's not then that title won't be displayed. On desktop and mobile it would probably be best to add that project title in it's own banner above the gallery item. As it is currently (title in the middle of the menu) there's a chance it could clash with menu elements


Philadelphia, PA

👉 Squarespace Tutorials 

Chat/Message on FB Messenger for quickest responsehttps://m.me/dejaegherryan


Link to comment

This page is set up in 7.1, and the page uses Gallery Blocks (since Gallery Pages don't exist in 7.1). And at least on the desktop, the project title never clashes with any other menu items. Mobile is less of a concern, because I can set it up to hide this element in mobile and recreate it with a more conventional code or text block.

I think my more fundamental question at this point is if there's a way in html to point to the 'Page Title' or 'Navigation Title'.  So that instead of plain text with the 'Project Name' (shown in the html below), I'm actually referencing that Page Title. 

<div class="centered-content">
   <h3 class="highlight">Project Name</h3>
Maybe another way of asking, is in the screenshot that you posted above, did you manually type "Belltown Collective" or did you reference the page title through html in order to get that to show up?
Link to comment

Hey @scottscottsee

You can copy and paste the code from this link and add it to Setting -> Advanced -> Code Injection -> Footer


Tested and works on your site but may still require some tweaking. Let me know how it works. 

Philadelphia, PA

👉 Squarespace Tutorials 

Chat/Message on FB Messenger for quickest responsehttps://m.me/dejaegherryan


Link to comment
  • 10 months later...
On 4/20/2021 at 2:18 PM, lokiese33 said:

Did you get the solution? I want to add the same feature in my new website. Can you please help me regarding it as I don't know how to do that.

Add above code to Settings > Advanced > Code Injection > Footer. 

Here is above code

var projectTitle;
var projectTitleText = document.querySelector('.centered-content > h4');
var checkGallery = document.querySelector('.gallery-section')
var link = window.location.href + '?format=json-pretty';
fetch(link).then(response => {
    console.log('success', response);
    return response.json();
}).then(data => {
    projectTitle = data.collection.title;
if(projectTitle !== "HOME" && checkGallery !== null) {

projectTitleText.textContent = projectTitle;


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


This topic is now archived and is closed to further replies.

  • 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.