Add Page Title to Header

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!

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? 

@scottscottsee Is this what you had in mind?

 

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!

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

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. 

This is using JavaScript and grabbing the navigation title to populate it. 

That way you don't need to actually type it out everytime

Looks like the code didn't post?

Yeah I just edited locally so it's not saved. I'll share a code snippet later

Awesome, thanks!

Would you be able to post that code? 

This is amazing! Thank you so much!

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.

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>