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

Forte: Vertically align logo in cover page


Posted (edited)

Site URL: https://nizarphotography.com

Hey everyone,


I'm using Forte template and just created a cover page. I find my logo awkward on top of the page:

What I want to do is to vertically (and horizontally) center the logo. 
So I'm removing the header (which is vertically centered) and replacing it with the logo instead.
I'd keep 3 navigation links just below it.

In the custom CSS code, I managed to move the logo down by using padding, but then the links followed as well and went all the way down.

I would really appreciate your help about this.


And it would be a mega bonus if you tell me how I can make the logo as a clickable link to my home page. That would be truly awesome.




Edited by Elvazur

Share this post

Link to post

5 answers to this question

Recommended Posts

  • 0
Posted (edited)

HI dear Elvazur

Is that what you need,

Please try this css

.yui3-landingfullcenter01-content > .sqs-slide-layer:last-child .sqs-slice-image img {
  position: fixed !important;
  top: 50% !important;
  left: 50% !important;
  transform: translate(-50%, -50%);
  z-index: 0
.sqs-slice-buttons {
  position: fixed !important;
  top: 50% !important;
  left: 50% !important;
  transform: translate(-50%, -50%);
  z-index: 9999;
  opacity: 0;
  padding: 50px;



Edited by bangank36

I am frontend dev that provide solutions to enhance feature of squarespace.com can't provide, please check my profile for more details

--- To Space And Beyond! ---


Share this post

Link to post
  • 0

@Elvazur You can find the code below to center the logo and make the logo clickable. You can update the "url" below to the url of your choice

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

[data-compound-type="logo"] {
	top: 50%;
    transform: translate(-50%);


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

	window.addEventListener('load', function() {
    // Enter your url here
	var url = 'https://apple.com';
    var logo = document.querySelector('[data-compound-type="logo"] img')  
	var linkWrapper = document.createElement('a');



Philadelphia, PA

Available for hire

Beyond Copy/Paste: Learn CSS for Squarespace Workshop

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


Share this post

Link to post
  • 0

Thank you very much @bangank36 and @RyanDejaegher !


The position is still incorrect using both your codes though.

Funny thing, the preview mode and the live website don't show the same thing.


I took screenshots of how it looks in the preview AND on the live site, for each one of your codes (see attached):



when in the preview: it centers the logo correctly, however the social media icons are much higher. I can actually live with that but ...

in the live website: the position is still hanging up there.



when in the preview: the logo is all the way to the left, and the social media icons are brought to the center

in the live website: the position is still hanging up there.


Would one of you know how to adapt the codes?


PS: @RyanDejaegher the clickable link works perfectly, thanks a lot!

Bangank36 LIVE.jpg

Bangank36 PREVIEW.jpg

RyanDejaegher LIVE.jpg

RyanDejaegher PREVIEW.jpg

Share this post

Link to post

Create an account or sign in to comment

You need to be a member in order to leave a comment

  • Create New...