Jump to content

Forte: Vertically align logo in cover page

Recommended Posts

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.




Link to comment
  • 4 weeks later...
  • Replies 5
  • Views 1.3k
  • Created
  • Last Reply

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;



BeyondSpace - Squarespace Website Developer

🖼️ Lightbox Studio (Enable Pinch/Zoom on lightbox)
🗓️ Delivery Date Picker (Squarespace Date picker form field)
💫 Gallery block 7.1 workaround
🥳 Sparkplugin Customisations Browsers (Browse +100 Spark plugin customisations)
🥳 Elfsight Template Browsers (Browse +1000 Elfsight widget Templates)

If you find my answer useful, let's leave a like or upvote so others with the same issue can find their solution. Thank you!


Link to comment

@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

👉 Squarespace Tutorials 

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


Link to comment

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

Link to comment


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.