Jump to content
Search In
  • More options...
Find results that contain...
Find results in...
Advanced Search
  • 1

Add Page Title to Header


scottscottsee

Question

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

Thanks!

Link to comment

15 answers to this question

Recommended Posts

  • 0

Hey @scottscottsee

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

https://gist.github.com/ryandejaegher/d7e96e60816a4cf76d1d69b9c162ed09

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

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//
HTML
<div class="centered-content">
   <h3 class="highlight">Project Name</h3>
</div>
 
///CENTERED PROJECT TITLE///
.centered-content {
text-align : center;
}
Link to comment
  • 0

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

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

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>
</div>
 
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
  • 0
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

<script>
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 => {
    console.log(data.collection.title);
    projectTitle = data.collection.title;
if(projectTitle !== "HOME" && checkGallery !== null) {

projectTitleText.textContent = projectTitle;
}
});
</script>

 

Email me if you have need any help (free, of course.). Answer within 24 hours.

How to: Setup password & share url - Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

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