FROM CACHE - en_header

How to vertically center logo on homepage

thrette
Tourist
7 0 1

I'm trying to vertically align my logo on only the homepage. I learned it's possible to hide the logo on the homepage by adding the following code before the </body> tag in the theme.liquid file. 

Click to expand...
{% if template contains 'index' %}
<style>
.header-wrapper {
height: 0px;
}
</style>
{% endif %}

However, I'm not sure if there is a way to center the logo vertically on the homepage. I'd also like to adjust the size on the centered logo. I'm familiar with HTML and CSS, but new to liquid. Any suggestions? 

 

Untitled-1.jpg

I've included this image so you can see what I'm going for here. Are there any liquid experts out there that can help?

 

Replies 2 (2)
thrette
Tourist
7 0 1

Thanks for your reply. Where does this code go? 

PageFly-Victor
Shopify Partner
4384 720 2069

Hi @thrette ,

 

This is Victor from PageFly - Landing Page Builder App

 

Following code before the </body> tag in the theme.liquid file. 

 

{% if template.name=='index' %}
.logo-bar-section {
    max-width: {{ section.settings.logo_width }};
    display: inline-block;
    margin: 0 27.5px 35px;
    text-align: center;
  }
</style>
{% endif %}

 

 

Hope my solution works perfectly for you!

Regards,

Victor | PageFly

If it’s helpful to you, please let me know by giving it a like or marking it as a solution.


PageFly #1 Shopify Landing Page Builder - Free to use, 24/7 Live Chat Support.


Hesitate to begin? Check out our top brands with successful stories with PageFly’s Case Studies.