Editor overlay issues on global module

[TTimes]

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?

[TTimes · Accepted solution]

Ok, so...

Moving the header definition out of the header.html partial fixed it. Still I think the behaviour was quite strange?

base.html now:

{% block header %}
      <header class="header">
          {# Custom header module #}
          {% module "site_header" path="/my-website-theme/modules/site-header.module" %}
      </header>
{% endblock header %}

Result in editor:

[Natka]

Hi! I know this has been resolved long time ago, but I experience the same issue. In my case I have several headers for different purposes ( so one header has navigation, the other one has only the logo etc.), and they are all built as partials. So my question is, since I have more than one header partial, how would I move the code directly to base.html? Is this solution valid in this case?