Forte: Vertically align logo in cover page

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

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

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

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!

@Elvazur are you still wanting to have the welcome button as well or just the center logo and icons?

@RyanDejaegher the welcome button can indeed go away in this case.