CSS of module causes overlapping of menu

[harri11]

Hello!

I am using the ApLite template for many pages and it works nicely, but after downloading a module called "HubBlox Hero Bannes" from the template marketplace the Aplite Templates top navigation menu-items are now left behind the HubBlox module. I presume this is a .css issue, but I have not been able to resolve it. I wonder if someone migh help.

This is a page where the navigatin works nicely:  https://info.seclion.fi/ota-yhteytt%C3%A4

This is a page where the menu does not work, the menu items open under the module (I have added horizontal spaces between the header and the module so that the menu items stay visible, they would fall behind the module otherwise). https://info.seclion.fi/spotilla

The  .css of the ApLite header template has this:

.sidr{display:none;position:absolute;position:fixed;top:0;height:100%;z-index:999999;

I am not pasting the whole .css because it's very long. 

The .css of the module is here:

.blox_hero-phone-tablet .blox_logo {
margin: 0 0 40px;
}
.blox_hero-phone-tablet .blox_image-text {
display: table;
width: 100%;
}
.blox_hero-phone-tablet .blox_image-text > div {
display: table-cell;
vertical-align: middle;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
.blox_hero-phone-tablet .blox_image-text .blox_text,
.blox_hero-phone-tablet .blox_image-text[dir='rtl'] .blox_image {
padding: 0 0 0 25px;
}
.blox_hero-phone-tablet .blox_image-text .blox_image,
.blox_hero-phone-tablet .blox_image-text[dir='rtl'] .blox_text {
padding: 0 25px 0 0;
}
.blox_hero-phone-tablet .blox_items {
text-align: left;
padding: 0 40px 0 0;
margin: 44px 0 0 -15px;
}
.blox_hero-phone-tablet .blox_items .blox_item-alt[style*='100']:nth-child(n+2),
.blox_hero-phone-tablet .blox_items .blox_item-alt[style*='50']:nth-child(n+3),
.blox_hero-phone-tablet .blox_items .blox_item-alt[style*='33']:nth-child(n+4),
.blox_hero-phone-tablet .blox_items .blox_item-alt[style*='25']:nth-child(n+5) {
margin-top: 30px;
}
.blox_hero-phone-tablet .blox_icon {
display: table-cell;
vertical-align: top;
padding-right: 20px;
}
.blox_hero-phone-tablet .blox_label {
display: table-cell;
vertical-align: middle;
font-weight: 700;
position: relative;
top: -4px;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
.blox_hero-phone-tablet .blox_icon svg {
width: 1.5em;
height: 1.5em;
}
.blox_hero-phone-tablet .blox_ctas {
margin: 45px 0 0;
}

/* RESPONSIVE */

/* ELEMENTS */
/* 800 */
.blox_hero-phone-tablet .blox_text.blox_800 .blox_item-alt[style*='33'] {
width: 50% !important;
}
.blox_hero-phone-tablet .blox_text.blox_800 .blox_item-alt[style*='33']:nth-child(n+3) {
margin-top: 30px;
}

/* 480 */
.blox_hero-phone-tablet .blox_text.blox_480 .blox_items {
padding: 0;
}
.blox_hero-phone-tablet .blox_text.blox_480 .blox_item-alt[style*='50'],
.blox_hero-phone-tablet .blox_text.blox_480 .blox_item-alt[style*='33'] {
display: block;
width: auto !important;
}
.blox_hero-phone-tablet .blox_text.blox_480 .blox_item-alt[style*='50']:nth-child(n+2),
.blox_hero-phone-tablet .blox_text.blox_480 .blox_item-alt[style*='33']:nth-child(n+2) {
margin-top: 30px;
}

/* window */
@media screen and (min-width: 1930px) and (max-width: 2560px) {
.blox_hero-phone-tablet .blox_items {
margin: 60px 0 0 -15px;
}
.blox_hero-phone-tablet .blox_items .blox_item-alt[style*='100']:nth-child(n+2),
.blox_hero-phone-tablet .blox_items .blox_item-alt[style*='50']:nth-child(n+3),
.blox_hero-phone-tablet .blox_items .blox_item-alt[style*='33']:nth-child(n+4),
.blox_hero-phone-tablet .blox_items .blox_item-alt[style*='25']:nth-child(n+5) {
margin-top: 40px;
}
.blox_hero-phone-tablet .blox_icon {
padding-right: 25px;
}
.blox_hero-phone-tablet .blox_ctas {
margin: 60px 0 0;
}
}

@media (max-width: 1024px) {
.blox_hero-phone-tablet .blox_image-text .blox_text,
.blox_hero-phone-tablet .blox_image-text[dir='rtl'] .blox_image {
padding: 0 0 0 20px;
}
.blox_hero-phone-tablet .blox_image-text .blox_image,
.blox_hero-phone-tablet .blox_image-text[dir='rtl'] .blox_text {
padding: 0 20px 0 0;
}
.blox_hero-phone-tablet .blox_items {
padding: 0;
}
}

@media (max-width: 834px) {
.blox_hero-phone-tablet .blox_cell-wrapper {
padding: 100px 0 !important;
}
.blox_hero-phone-tablet .blox_image-text {
display: block;
}
.blox_hero-phone-tablet .blox_image {
margin: 0 0 50px;
}
.blox_hero-phone-tablet .blox_image img {
max-width: 50%;
}
.blox_hero-phone-tablet .blox_logo img {
display: block;
margin: 0 auto;
}
.blox_hero-phone-tablet .blox_snippet, .blox_hero-phone-tablet .blox_ctas {
text-align: center;
}
.blox_hero-phone-tablet .blox_image-text > div {
display: block;
width: auto !important;
padding: 0 !important;
}
.blox_hero-phone-tablet .blox_ctas .cta-container {
margin: 0 10px 20px;
}
}

@media (max-width: 600px) {
.blox_hero-phone-tablet .blox_cell-wrapper {
padding: 70px 0 !important;
}
.blox_hero-phone-tablet .blox_image {
margin: 0 0 40px;
}
.blox_hero-phone-tablet .blox_logo {
margin: 0 0 30px;
}
.blox_hero-phone-tablet .blox_text .blox_items {
padding: 0;
margin: 35px 0 0;
}
.blox_hero-phone-tablet .blox_item-alt,
.blox_hero-phone-tablet .blox_item-alt {
padding: 0;
}
body .blox_custom-module.blox_hero-phone-tablet .blox_text .blox_item-alt[style*='50'],
body .blox_custom-module.blox_hero-phone-tablet .blox_text .blox_item-alt[style*='33'] {
display: block;
width: auto !important;
}
body .blox_custom-module.blox_hero-phone-tablet .blox_text .blox_item-alt[style*='50']:nth-child(n+2),
body .blox_custom-module.blox_hero-phone-tablet .blox_text .blox_item-alt[style*='33']:nth-child(n+2) {
margin-top: 20px;
}
}

and the html of the module is here:

{% if name == 'module_1' %}
{% require_css %}
<style>
@import url('https://fonts.googleapis.com/css?family=Roboto:300,300i,400,400i,700');
</style>
{% end_require_css %}
{% endif %}

{# VARIABLES #}
{% set itemWidth = 100 / module.features.items_per_row %}
{% set imgWidth = 100 - module.text.width %}

<div class="blox_custom-module blox_hero-phone-tablet {{ name }}" id="{{ name }}" data-observe-resizes style="{% if module.styling.background_image.src && module.styling.background_type == 'image' %}background-image: url({{ module.styling.background_image.src }});{% endif %} {% if module.styling.video_placeholder.src && module.styling.background_type == 'video' %}background-image: url({{ module.styling.video_placeholder.src }});{% endif %} background-repeat: no-repeat; background-position: {{ module.styling.background_position }}; background-size: cover; {% if module.styling.parallax_background %}background-attachment: parallax;{% endif %}">
<div class="blox_overlay">
{% if module.styling.background_type == "video" && module.styling.video_url is string_containing "youtu" %}
<div class="yt-bg player" data-property="{videoURL:'{{ module.styling.video_url }}',containment:'#{{ name }}',autoPlay:true,mute:{{ module.styling.mute_video }},loop:{{ module.styling.loop_video }},showControls:true,stopMovieOnBlur:false,mobileFallbackImage:'{{ module.styling.background_image.src }},showYTLogo:false',vol:100,useOnMobile:false}"></div>
{% endif %}
{% if module.styling.background_type == "color" %}<span class="blox_overcol" style="background-color: {{ module.styling.background_color.color }}; opacity: {{ module.styling.background_color.opacity / 100 }};"></span>{% endif %}
{% if module.styling.background_type != "color" %}<span class="blox_overcol" style="background-color: {{ module.styling.background_color_alt.color }}; opacity: {{ module.styling.background_color_alt.opacity / 100 }};"></span>{% endif %}
{% if module.styling.background_type == "video" %}
<i class="fas fa-circle-notch fa-spin center"></i>
<span class="blox_video-loading">Video Loading <i class="fas fa-circle-notch fa-spin"></i></span>
{% endif %}
</div>
<div class="blox_cell-wrapper" {% if module.styling.background_type == "color" %}data-bg="{{ module.styling.background_color.color }}"{% endif %} style="padding-top: {{ module.styling.top_padding }}px; padding-bottom: {{ module.styling.bottom_padding }}px; color: {{ module.styling.text_color }};">
<div class="blox_image-text" {% if module.image.inverse_columns %}dir="rtl"{% endif %}>
<div class="blox_image {% if module.styling.animate_content %}fw-animated-element{% endif %}" data-animation-type="{% if module.image.inverse_columns %}fadeInRight{% else %}fadeInLeft{% endif %}" dir="ltr" style="width: {{ imgWidth }}%; text-align: {{ module.image.alignment_horizontal }}; vertical-align: {{ module.image.alignment_vertical }};">
{% if module.image.image.src %}
<img src="{{ module.image.image.src }}" alt="{{ module.image.image.alt }}" width="{{ module.image.image.width }}" height="{{ module.image.image.height }}">
{% endif %}
</div>
<div class="blox_text {% if module.styling.animate_content %}fw-animated-element{% endif %}" data-animation-type="{% if module.image.inverse_columns %}fadeInLeft{% else %}fadeInRight{% endif %}" dir="ltr" data-observe-resizes data-breakpoints='{"blox_800":800,"blox_480":480}' style="width: {{ module.text.width }}%; text-align: {{ module.text.alignment_horizontal }}; vertical-align: {{ module.text.alignment_vertical }};">
{% if module.logo.use_default_logo || module.logo.image.src %}
<div class="blox_logo">
{% if module.logo.use_default_logo %}
<a {% if module.logo.link %}href="{% if module.logo.link is string_startingwith 'www.' %}http://{{ module.logo.link }}{% else %}{{ module.logo.link }}{% endif %}"{% endif %}><img src="{{ site_settings.logo_src }}" alt="{{ site_settings.logo_alt }}" style="width: {{ module.logo.width }}px"></a>
{% else %}
<a {% if module.logo.link %}href="{% if module.logo.link is string_startingwith 'www.' %}http://{{ module.logo.link }}{% else %}{{ module.logo.link }}{% endif %}"{% endif %}><img src="{{ module.logo.image.src }}" alt="{{ module.logo.image.alt }}" style="width: {{ module.logo.width }}px"></a>
{% endif %}
</div>
{% endif %}
<div class="blox_snippet blox_reduced-margin">
{% inline_rich_text field="text.text" value="{{ module.text.text }}" %}
</div>
<div class="blox_items">{#
#}{% for item in module.features.items %}{#
#}<div class="blox_item-alt" style="width: {{ itemWidth }}%;">
<div class="blox_icon">
{% icon name="{{ item.icon.name }}" style="{{ item.icon.type }}" unicode="{{ item.icon.unicode }}", no_wrapper=true %}
</div>
<div class="blox_label">{{ item.text }}</div>{#
#}</div>{#
#}{% endfor %}
</div>
<div class="blox_ctas {% if module.styling.animate_content %}anim{% endif %}" style="">{#
#}{% for item in module.call_to_action.items %}
<span class="cta-container {{ item.size }} {{ item.style }} {% if item.full_width %}block{% endif %} {% if module.styling.animate_content %}fw-animated-element{% endif %}" {% if module.styling.animate_content %}data-animation-type="fadeInUp"{% endif %} style="-webkit-animation-delay: {{ loop.index / 5 }}s; animation-delay: {{ loop.index / 5 }}s;">
{% if item.icon %}{% icon name="{{ item.icon.name }}" style="{{ item.icon.type }}" unicode="{{ item.icon.unicode }}", no_wrapper=true %}{% endif %}
{% cta guid="{{ item.cta }}", extra_classes='full-width panel' %}
</span>
{% endfor %}{#
#}</div>
</div>
</div>
</div>
</div>

{% require_css position="header" %}
<style class="{{ name }}-styles">
.{{ name }} .blox_icon svg {
width: {{ module.features.icon_size }}em;
height: {{ module.features.icon_size }}em;
}
{% for item in module.call_to_action.items %}
{% if item.style == 'solid' %}
.{{ name }} .cta-container:nth-child({{ loop.index }}) .cta_button[title] {
background: {{ item.background_color.color }};
color: {{ item.color.color }};
}
.{{ name }} .cta-container:nth-child({{ loop.index }}) .cta_button[title] svg {
fill: {{ item.color.color }};
}
.{{ name }} .cta-container:nth-child({{ loop.index }}) .cta_button[title]:hover {
{% if item.background_color.color is string_containing '000' %}
background: {{ color_variant(item.background_color.color, 40) }};
{% elif item.background_color.color is string_containing 'FFF' or item.background_color.color is string_containing 'fff' %}
background: {{ color_variant(item.background_color.color, -40) }};
{% else %}
background: {{ color_variant(item.background_color.color, 20) }};
{% endif %}
}
{% else %}
.{{ name }} .cta-container:nth-child({{ loop.index }}) .cta_button[title] {
background: none;
border-color: {{ item.color.color }};
color: {{ item.color.color }};
}
.{{ name }} .cta-container:nth-child({{ loop.index }}) .cta_button[title] svg {
fill: {{ item.color.color }};
}
.{{ name }} .cta-container:nth-child({{ loop.index }}) .cta_button[title]:hover {
background: {{ item.color.color }};
{% if item.color.color is string_containing 'fff' %}
color: #222 !important;
{% elif item.color.color is string_containing 'FFF' %}
color: #222 !important;
{% endif %}
}
.{{ name }} .cta-container:nth-child({{ loop.index }}) .cta_button[title]:hover svg {
{% if item.color.color is string_containing 'fff' %}
fill: #222 !important;
{% elif item.color.color is string_containing 'FFF' %}
fill: #222 !important;
{% else %}
fill: {{ item.color.color }};
{% endif %}
}
{% endif %}
{% endfor %}

/* RESPONSIVE */
@media screen and (min-width: 1930px) and (max-width: 2560px) {
.{{ name }} .blox_cell-wrapper {
padding-top: {{ module.styling.top_padding + 30 }}px !important;
padding-bottom: {{ module.styling.bottom_padding + 30 }}px !important;
}
}
</style>
{% end_require_css %}

I think I somehow need to add stronger .css definitions on the ApLite header .css but I don't know what exactly is missing, because the z-index is set at 99999. On other pages, where I am using only aplite modules this problem does not occur. 

Thank you so much for any help!

[MitchL · Accepted solution]

Adding "z-index: 1000" to the class of the list children items should do it:

.header-container-wrapper .hs-menu-depth-1 .hs-menu-children-wrapper {

z-index: 1000;

}

[harri11]

Hello @MitchL

Thank you so much for your answer, it solved my issue 100%.

Hopefully this will help someone else in the future as well.

Once again thanks!