Jump to content

Add Page Title to Fixed Header

Recommended Posts

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!

 

Link to comment
  • Replies 9
  • Views 593
  • Created
  • Last Reply

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

 

Philadelphia, PA

👉 Squarespace Tutorials 

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

 

Link to comment

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. 

 

image.thumb.png.15bed46c189a9ae301a94cd15d1eaaef.png

Link to comment

@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

 

Philadelphia, PA

👉 Squarespace Tutorials 

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

 

Link to comment

@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?

 

image.thumb.png.6a315f0be899a5720e45aefa700d67cb.png

 

 

Link to comment

Archived

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.