Make popup link form fillable on hero banner

• Related Articles

• Poplink Link form issue on hero section

  In css, add the followings: .popup-link__content--drawer { z-index: 9999 !important; pointer-events: auto; }

• Make parent link clickable

  Snippets > header-mega-menu.liquid (l.19-25) Parentlink {%- assign parentlink = link.links[0] -%} <a href="{{ parentlink.url }}" title="{{ parentlink.title }}"> <span {%- if link.child_active %} class="header__active-menu-item" {% endif %} > {{- ...

• Add padding and button style to popup link

  Add CSS: .popup-link__button { background-color: #013a34; color: white; border-radius: 15px; } .popup-link__button:hover { background: black; color: white; } .popup-link__content--drawer { background-color: #e5e5e5; }

• Different height for mobile and desktop hero image banner

  1. In the section, custom CSS 2. Insert the following code: @media screen and (max-width: 749px) { .banner__media { padding-top: 10%; padding-bottom: 10% !important; } }

• Make a image banner section overlay with another at the top

  In the image banner section, paste the following in custom css: @media screen and (min-width: 750px){ .banner { position: relative; z-index: -20; margin-top: -180px; padding-bottom: 50px; }}