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

Forte: Vertically align logo in cover page

Question

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:
https://nizarphotography.com

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.


Thanks!

 

Nizar

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;
}

image.thumb.png.9c8b6b3574d2e357d36cfb1cc287644d.png

 

Edited by bangank36
change

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

https://www.freelancer.com/u/BaNgan

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



<script>
(function(){
	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');
linkWrapper.setAttribute('href',url)
logo.parentNode.insertBefore(linkWrapper,logo);
linkWrapper.appendChild(logo)
})

})()
</script>

 


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):

 

@bangank36,

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.

 

@RyanDejaegher,

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