Hey folks! I’m using the ENVY theme. The home page has a “Video with Text Overlay” looping in the header. I want to add a Logo overlay instead of text. I found some code in the Design Discussions here which was really helpful, but I can’t seem to get the logo centered. I have tried centering the “text”, but it’s still wonky.
This is the live site: https://www.chocolatachocolate.com/
Here is the code I used (in red) under the “video–video-with-text-overlay.liquid” section of code:
{% capture textalignment %}
{% case section.settings.textAlignment %}
{% when 'top-left' %}
text-align-top-left
{% when 'top-center' %}
text-align-top-center
{% when 'top-right' %}
text-align-top-right
{% when 'center-left' %}
text-align-center-left
{% when 'center' %}
text-align-center
{% when 'center-right' %}
text-align-center-right
{% when 'bottom-left' %}
text-align-bottom-left
{% when 'bottom-center' %}
text-align-bottom-center
{% when 'bottom-right' %}
text-align-bottom-right
{% endcase %}
{% endcapture %}
{% capture desktopheight %}
{% case section.settings.desktopHeight %}
{% when '450' %}
desktop-height-450
{% when '550' %}
desktop-height-550
{% when '650' %}
desktop-height-650
{% when '750' %}
desktop-height-750
{% when 'fullscreen' %}
desktop-height-fullscreen
{% endcase %}
{% endcapture %}
{% capture mobileheight %}
{% case section.settings.mobileHeight %}
{% when '250' %}
mobile-height-250
{% when '350' %}
mobile-height-350
{% when '450' %}
mobile-height-450
{% when '550' %}
mobile-height-550
{% when 'fullscreen' %}
mobile-height-fullscreen
{% when 'fit' %}
mobile-height-fit
{% endcase %}
{% endcapture %}
{% capture isplaceholder %}
{% if section.settings.url contains "watch?v=_9VUPq3SxOc" %}
is-placeholder
{% endif %}
{% endcapture %}
<section
class="homepage-sections-wrapper homepage-content--{{ section.id }} hero-video {{ desktopheight | strip }} {{ mobileheight | strip }} {{ isplaceholder | strip }}"
data-wetheme-section-type="video--video-with-text-overlay"
data-wetheme-section-id="{{ section.id }}"
tabindex="0"
>
<div class="hero-video--wrapper">
{% assign type = 'mp4' %}
{% if section.settings.url contains "youtube.com" %}
{% assign type = 'youtube' %}
{% elsif section.settings.url contains "youtu.be" %}
{% assign type = 'youtube' %}
{% elsif section.settings.url contains "vimeo.com" %}
{% assign type = 'vimeo' %}
{% endif %}
<div class="hero-video--media hero-video--{{ type }}">
<wetheme-video
hero="true"
video-type="{{ type }}"
url="{{ section.settings.url }}"
autoplay="true"
loop="true"
mute="true"
hide-controls="true"
>
</wetheme-video>
</div>
<div class="hero-video--text">
<div class="hero-video--text-content {{ textalignment | strip }}">
<!-------between this-->
<div class="slide_logo">
<img src="{{ 'CHOCOLATA_LOGO.svg' | asset_url }}" width="200">
</div>
<div class="slideshow__text-content" data-animate>
<!---------- and this-------->
<div class="text-content--inner{% if section.settings.textShadow %} text-shadow{% endif %} wow fadeInUp">
{% if section.settings.subheading != blank %}
<h3 class="type-subheading{% if section.settings.title != blank %} typography--padding-bottom {% endif %}"> {{ section.settings.subheading | escape }}</h3>
{% endif %}
{% if section.settings.title != blank %}
<div class="hero-video--text-title">
<h1 class="text-size-{{ section.settings.heading--text-size }}px wow fadeInUp">{{ section.settings.title }}</h1>
</div>
{% endif %}
{% if section.settings.text != blank %}
<div class="hero__text textarea rte">{{ section.settings.text }}</div>
{% endif %}
{% if section.settings.button_label != blank %}
<div class="hero-video--button">
<a class="btn" href="{{ section.settings.button_link }}" tabindex="0">{{ section.settings.button_label }}</a>
</div>
{% endif %}
</div>
</div>
</div>
</div>
</section>
