Hi.
I’m building a rather complex navigation as a custom module. Everything is working as intended, however in the HubSpot Edit Page editor I’m having quite some issues with the orange overlay taking up so much vertical space that I can’t get to click the edit controls for the module following the header.
Main html:
{% block header %}
{% global_partial path="../partials/header.html" %}
{% endblock header %}
Header.html:
<header class="header">
{# Custom header module #}
{% module "site_header" path="/my-website-theme/modules/site-header.module" %}
</header>
Editor look:
Global editor level 1:
Global editor level 2:
Why is the orange (and blue) overlay taking up so much height when the header is only 74px height as seen in the final global editor step?
The overlay with the following classes…
hs-ls-module-hover-overlay updated-editor-styles hs-non-ls-module-hover-overlay__global-group
…has the following inline styles:
top: 0px;
left: 0px;
width: 1957px;
height: 334px;
opacity: 1;
cursor: pointer;
pointer-events: auto;
I can’t figure out the height is coming from. The navigation has nested 2nd level <ul>'s but even if I test setting overflow hidden on the header the orange overlay is still 334px high in the editor.
What are my options here as the overlay has very generic styles and thus i can’t target only that one?
