Add Page Title to Fixed Header

Site URL: https://leopard-vuvuzela-xlr3.squarespace.com/

@RyanDejaegher

I have a similar question to the one you answered for ScotScottsee. I'm also interested in adding the 'Page Title' To the Space in the Center of the Header, though in my case I would like this to be fixed similar to the transparent 'Site - Header' 

I noticed with injection to the header it has  a tendency to push everything down, as if a new Section was added, which is a bit undeseribale.

I'm not using  Collection Pages just simple Pages. and would also like to be able to opt for that title to be there or not depending on the situation:

https://leopard-vuvuzela-xlr3.squarespace.com/

 Thanks!

Hey @opAL

For this implementation it's usually not best to add HTML to the site header, this code can be adjusted to add it directly after the nav. If you set a site password I can take a look

Thanks Ryan!

@opAL what pages were you hoping to apply this effect to?

Hi @RyanDejaegher, 

Thanks for replying! Effectively, I was hoping to apply this effect to all pages except the home page. 

@opAL This will add the title to your page. You'll need to do some styling with CSS to get it to look exactly how you want.

/* Add this code to Design -> Custom CSS */

.page-title {
 	text-align: center; 
}

Add this code to Settings -> Advanced -> Code Injection -> Footer

<script>
(function(){
	window.addEventListener('load', function() {
	var mainContent = document.querySelector('main');

	var link = window.location.href + '?format=json-pretty';

fetch(link).then(response => {
    console.log('success', response);
    return response.json();
}).then(data => {
    console.log(data);
    title = data.collection.navigationTitle;

if(window.location.pathname !== "/") {

mainContent.insertAdjacentHTML('afterbegin', `<h2 class="page-title">${title}</h2>`)
}
});
})

})();
</script>

Thank you, @RyanDejaegherThis is superb!

Two questions:

1. if you notice in the uploaded image there is substantial space between added as a result of the script. I've highlighted the header to demonstrate. / Our Office, is the first piece of text in the body. Do you know what this might be attributed to? It almost appears like the header conforms to its own ' section' which can't be minimized as the section controls are above the start of the page. Thanks again. 

@opAL your template is using a fixed/sticky header, when this happens other elements (like the title) don't take into account the space it takes up. You can adjust the spacing for the title by adding some margin-top to it

.page-title {
margin-top: 80px;
}

For the / Our Office this appears to be coming from the page content itself. I'd double check the text for that page and see if it's been added there

 

Got it! Also added the CSS to fix it in the center. Thanks again, this was very helpful.

@RyanDejaegher 

I noticed something strange behavior in the calling the Navigation Name. What appears is not the current name, but navigation name previously stored in the memory. I also noticed this behavior was even stranger as it is called differently based on the browser previewing.

See ss of same page display in Firefox in front of Chrome, which are both different to the recorded nav name. Do you have any thoughts on this or how to reset the nav name?