Hide div if clicked outside it but not if the toggle div for show hide is clicked

Question

I have a side menu mobile-navigation. I can toggle it between display block and none with the "button" --> hamburger-menu-div. But this only works, as long as I remove the last Javascript to also hide it when I click outside mobile-navigation. So at the moment, I can open it via the button, but have to close it via clicking out of the menu or button. Toggle doesn´t work.

Can I add an id to the last Javascript so that if I click on the menu AND on the button that nothing is triggered? Because I think the two scripts "block" each other what makes sense to me as the button tries to show the menu and the other script tries to hide it when I click out.

Hope u can understand and thanks for your help!

//Toggle nav menu to show and hide

document.getElementById("hamburger-menu-div").addEventListener("click", function() {
    var x = document.getElementById("mobile-navigation");
    if (x.style.display === "block") {
        x.style.display = "none";
    }
    else
    {
        x.style.display = "block";
    }
});



//Hide it when clicked outside

document.addEventListener('mouseup', function(e) {
  var container = document.getElementById('mobile-navigation');
  if (!container.contains(e.target)) {
    container.style.display = 'none';
  }
});

.hamburger-menu-div {
  background-color: lightblue;
  width: 250px;
  height: 50px;
}

.mobile-navigation {
  background-color: lightgreen;
  width: 250px;
  display: none;
}

<div id="hamburger-menu-div" class="hamburger-menu-div">
BUTTON
</div>

<div id="mobile-navigation" class="mobile-navigation">
<p>- Navigationpoint 1</p>
<p>- Navigationpoint 2</p>
<p>- Navigationpoint 3</p>
<p>- Navigationpoint 4</p>
<p>- Navigationpoint 5</p>
</div>

Adding the whole code:

//Toggle nav menu to show and hide
document.getElementById('hamburger-menu-div').addEventListener('click', e => e.currentTarget.nextElementSibling.classList.toggle('show'));

//Hide it when clicked outside
document.addEventListener('click', e => {
  if (!e.target.classList.contains('hamburger-menu-div'))
    document.getElementById('mobile-navigation').classList.remove('show')
});

.hamburger-menu-div {
  background-color: lightblue;
  width: 250px;
  height: 50px;
}

.mobile-navigation {
  background-color: lightgreen;
  width: 250px;
  display: none;
  position: fixed;
  right: 0;
  top: 0;
}

.mobile-navigation.show {
  display: block
}

<!--THIS IS THE MENU BUTTON/LIST POINT-->

<section class="elementor-section elementor-inner-section elementor-element elementor-element-571b5dd elementor-section-boxed elementor-section-height-default elementor-section-height-default" data-id="571b5dd" data-element_type="section">
  <div class="elementor-container elementor-column-gap-default">
    <div class="elementor-row">
      <div class="aux-parallax-section elementor-column elementor-col-100 elementor-inner-column elementor-element elementor-element-bc658a3" data-id="bc658a3" data-element_type="column">
        <div class="elementor-column-wrap elementor-element-populated">
          <div class="elementor-widget-wrap">
            <div class="elementor-element elementor-element-b81b33e hamburger-menu-div elementor-widget__width-initial elementor-view-default elementor-widget elementor-widget-icon" data-id="b81b33e" data-element_type="widget" id="hamburger-menu-div" data-widget_type="icon.default">
              <div class="elementor-widget-container">
                <div class="elementor-icon-wrapper">
                  <div class="elementor-icon">
                    <i aria-hidden="true" class="auxicon auxicon-menu-1">This div is the button</i> </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</section>


<!--PLEASE CONSIDER THAT OTHER ELEMENTS ARE BETWEEN THE BUTTON AND THE NAV MENU. THE NAV MENU IS INSERTED AS A COMPLETE OWN DIV. IT ISN´T A CHILD OR SIBLING OR WHATEVER OF THE MENU BUTTON/LIST-->


<section class="elementor-section elementor-top-section elementor-element elementor-element-852919c mobile-navigation elementor-section-boxed elementor-section-height-default show-nav" data-id="852919c" data-element_type="section" id="mobile-navigation"
  data-settings="{&quot;background_background&quot;:&quot;classic&quot;}">
  <div class="elementor-container elementor-column-gap-default">
    <div class="elementor-row">
      <div class="aux-parallax-section elementor-column elementor-col-100 elementor-top-column elementor-element elementor-element-10eb682" data-id="10eb682" data-element_type="column">
        <div class="elementor-column-wrap elementor-element-populated">
          <div class="elementor-widget-wrap">
            <div class="elementor-element elementor-element-6910634 title-nav elementor-widget elementor-widget-heading" data-id="6910634" data-element_type="widget" data-widget_type="heading.default">
              <div class="elementor-widget-container">
                <span class="elementor-heading-title elementor-size-default">Startseite</span> </div>
            </div>
            <section class="elementor-section elementor-inner-section elementor-element elementor-element-4a45e9c elementor-section-boxed elementor-section-height-default elementor-section-height-default" data-id="4a45e9c" data-element_type="section">
              <div class="elementor-container elementor-column-gap-default">
                <div class="elementor-row">
                  <div class="aux-parallax-section make-column-clickable-elementor elementor-column elementor-col-100 elementor-inner-column elementor-element elementor-element-4d35815" style="cursor: pointer;" data-column-clickable="" data-column-clickable-blank="_self"
                    data-id="4d35815" data-element_type="column">
                    <div class="elementor-column-wrap elementor-element-populated">
                      <div class="elementor-widget-wrap">
                        <div class="elementor-element elementor-element-ac8c411 elementor-widget elementor-widget-heading" data-id="ac8c411" data-element_type="widget" data-widget_type="heading.default">
                          <div class="elementor-widget-container">
                            <h4 class="elementor-heading-title elementor-size-default"><i aria-hidden="true" class="auxicon-home-house-streamline"></i>&nbsp;&nbsp;Startseite</h4>
                          </div>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </section>
            <div class="elementor-element elementor-element-0e2ed13 title-nav elementor-widget elementor-widget-heading" data-id="0e2ed13" data-element_type="widget" data-widget_type="heading.default">
              <div class="elementor-widget-container">
                <span class="elementor-heading-title elementor-size-default">Leistungen</span> </div>
            </div>
            <section class="elementor-section elementor-inner-section elementor-element elementor-element-ee57cd6 elementor-section-boxed elementor-section-height-default elementor-section-height-default" data-id="ee57cd6" data-element_type="section">
              <div class="elementor-container elementor-column-gap-default">
                <div class="elementor-row">
                  <div class="aux-parallax-section make-column-clickable-elementor elementor-column elementor-col-100 elementor-inner-column elementor-element elementor-element-5f47bf7" style="cursor: pointer;" data-column-clickable="" data-column-clickable-blank="_self"
                    data-id="5f47bf7" data-element_type="column">
                    <div class="elementor-column-wrap elementor-element-populated">
                      <div class="elementor-widget-wrap">
                        <div class="elementor-element elementor-element-258d55c elementor-widget elementor-widget-heading" data-id="258d55c" data-element_type="widget" data-widget_type="heading.default">
                          <div class="elementor-widget-container">
                            <h4 class="elementor-heading-title elementor-size-default"><i aria-hidden="true" class="auxicon auxicon-earth-globe-streamline"></i>&nbsp;&nbsp;Domain</h4>
                          </div>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </section>
            <section class="elementor-section elementor-inner-section elementor-element elementor-element-0982174 elementor-section-boxed elementor-section-height-default elementor-section-height-default" data-id="0982174" data-element_type="section">
              <div class="elementor-container elementor-column-gap-default">
                <div class="elementor-row">
                  <div class="aux-parallax-section make-column-clickable-elementor elementor-column elementor-col-100 elementor-inner-column elementor-element elementor-element-123693d" style="cursor: pointer;" data-column-clickable="" data-column-clickable-blank="_self"
                    data-id="123693d" data-element_type="column">
                    <div class="elementor-column-wrap elementor-element-populated">
                      <div class="elementor-widget-wrap">
                        <div class="elementor-element elementor-element-67c041d elementor-widget elementor-widget-heading" data-id="67c041d" data-element_type="widget" data-widget_type="heading.default">
                          <div class="elementor-widget-container">
                            <h4 class="elementor-heading-title elementor-size-default"><i aria-hidden="true" class="auxicon auxicon-dashboard-1"></i>&nbsp;&nbsp;Hosting</h4>
                          </div>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </section>
            <section class="elementor-section elementor-inner-section elementor-element elementor-element-5c88b0e elementor-section-boxed elementor-section-height-default elementor-section-height-default" data-id="5c88b0e" data-element_type="section">
              <div class="elementor-container elementor-column-gap-default">
                <div class="elementor-row">
                  <div class="aux-parallax-section make-column-clickable-elementor elementor-column elementor-col-100 elementor-inner-column elementor-element elementor-element-0f53969" style="cursor: pointer;" data-column-clickable="" data-column-clickable-blank="_self"
                    data-id="0f53969" data-element_type="column">
                    <div class="elementor-column-wrap elementor-element-populated">
                      <div class="elementor-widget-wrap">
                        <div class="elementor-element elementor-element-39b7fe0 elementor-widget elementor-widget-heading" data-id="39b7fe0" data-element_type="widget" data-widget_type="heading.default">
                          <div class="elementor-widget-container">
                            <h4 class="elementor-heading-title elementor-size-default"><i aria-hidden="true" class="auxicon auxicon-mac"></i>&nbsp;&nbsp;Webseitenerstellung</h4>
                          </div>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </section>
            <section class="elementor-section elementor-inner-section elementor-element elementor-element-7628bed elementor-section-boxed elementor-section-height-default elementor-section-height-default" data-id="7628bed" data-element_type="section">
              <div class="elementor-container elementor-column-gap-default">
                <div class="elementor-row">
                  <div class="aux-parallax-section make-column-clickable-elementor elementor-column elementor-col-100 elementor-inner-column elementor-element elementor-element-39c0f32" style="cursor: pointer;" data-column-clickable="" data-column-clickable-blank="_self"
                    data-id="39c0f32" data-element_type="column">
                    <div class="elementor-column-wrap elementor-element-populated">
                      <div class="elementor-widget-wrap">
                        <div class="elementor-element elementor-element-5de4c14 elementor-widget elementor-widget-heading" data-id="5de4c14" data-element_type="widget" data-widget_type="heading.default">
                          <div class="elementor-widget-container">
                            <h4 class="elementor-heading-title elementor-size-default"><i aria-hidden="true" class="auxicon auxicon-repair"></i>&nbsp;&nbsp;Wartung</h4>
                          </div>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </section>
            <div class="elementor-element elementor-element-cd18a80 title-nav elementor-widget elementor-widget-heading" data-id="cd18a80" data-element_type="widget" data-widget_type="heading.default">
              <div class="elementor-widget-container">
                <span class="elementor-heading-title elementor-size-default">Über mich</span> </div>
            </div>
            <section class="elementor-section elementor-inner-section elementor-element elementor-element-468742a elementor-section-boxed elementor-section-height-default elementor-section-height-default" data-id="468742a" data-element_type="section">
              <div class="elementor-container elementor-column-gap-default">
                <div class="elementor-row">
                  <div class="aux-parallax-section make-column-clickable-elementor elementor-column elementor-col-100 elementor-inner-column elementor-element elementor-element-7a07457" style="cursor: pointer;" data-column-clickable="" data-column-clickable-blank="_self"
                    data-id="7a07457" data-element_type="column">
                    <div class="elementor-column-wrap elementor-element-populated">
                      <div class="elementor-widget-wrap">
                        <div class="elementor-element elementor-element-dc04573 elementor-widget elementor-widget-heading" data-id="dc04573" data-element_type="widget" data-widget_type="heading.default">
                          <div class="elementor-widget-container">
                            <h4 class="elementor-heading-title elementor-size-default"><i aria-hidden="true" class="auxicon-profile-1"></i>&nbsp;&nbsp;Über mich</h4>
                          </div>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </section>
            <div class="elementor-element elementor-element-afffe9d title-nav elementor-widget elementor-widget-heading" data-id="afffe9d" data-element_type="widget" data-widget_type="heading.default">
              <div class="elementor-widget-container">
                <span class="elementor-heading-title elementor-size-default">Kontakt</span> </div>
            </div>
            <section class="elementor-section elementor-inner-section elementor-element elementor-element-5fabf81 elementor-section-boxed elementor-section-height-default elementor-section-height-default" data-id="5fabf81" data-element_type="section">
              <div class="elementor-container elementor-column-gap-default">
                <div class="elementor-row">
                  <div class="aux-parallax-section make-column-clickable-elementor elementor-column elementor-col-100 elementor-inner-column elementor-element elementor-element-bba16fc" style="cursor: pointer;" data-column-clickable="" data-column-clickable-blank="_self"
                    data-id="bba16fc" data-element_type="column">
                    <div class="elementor-column-wrap elementor-element-populated">
                      <div class="elementor-widget-wrap">
                        <div class="elementor-element elementor-element-4e40e5a elementor-widget elementor-widget-heading" data-id="4e40e5a" data-element_type="widget" data-widget_type="heading.default">
                          <div class="elementor-widget-container">
                            <h4 class="elementor-heading-title elementor-size-default"><i aria-hidden="true" class="auxicon-resend"></i>&nbsp;&nbsp;Kontakt</h4>
                          </div>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </section>
          </div>
        </div>
      </div>
    </div>
  </div>
</section>

Answer 1

You can use toggle() with a class in CSS to display it

//Toggle nav menu to show and hide
document.getElementById('hamburger-menu-div').addEventListener('click', e => e.currentTarget.closest('section').nextElementSibling.classList.toggle('show'));

//Hide it when clicked outside
document.addEventListener('click', e => {
  e.stopPropagation()
  if (!e.target.classList.contains('hamburger-menu-div') && !e.target.classList.contains('elementor-element') && !e.target.classList.contains('elementor-widget-wrap')) {
    console.log(e.target)
    document.getElementById('mobile-navigation').classList.remove('show')
  }
});

.hamburger-menu-div {
  background-color: lightblue;
  width: 250px;
  height: 50px;
}

.mobile-navigation {
  background-color: lightgreen;
  width: 250px;
  display: none;
}

.mobile-navigation.show {
  display: block
}

.elementor-widget-container {
  pointer-events: none;
  height: 100%;
}

<!--THIS IS THE MENU BUTTON/LIST POINT-->

<section class="elementor-section elementor-inner-section elementor-element elementor-element-571b5dd elementor-section-boxed elementor-section-height-default elementor-section-height-default" data-id="571b5dd" data-element_type="section">
  <div class="elementor-container elementor-column-gap-default">
    <div class="elementor-row">
      <div class="aux-parallax-section elementor-column elementor-col-100 elementor-inner-column elementor-element elementor-element-bc658a3" data-id="bc658a3" data-element_type="column">
        <div class="elementor-column-wrap elementor-element-populated">
          <div class="elementor-widget-wrap">
            <div class="elementor-element elementor-element-b81b33e hamburger-menu-div elementor-widget__width-initial elementor-view-default elementor-widget elementor-widget-icon" data-id="b81b33e" data-element_type="widget" id="hamburger-menu-div" data-widget_type="icon.default">
              <div class="elementor-widget-container">
                <div class="elementor-icon-wrapper">
                  <div class="elementor-icon">
                    <i aria-hidden="true" class="auxicon auxicon-menu-1">This div is the button</i> </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</section>


<!--PLEASE CONSIDER THAT OTHER ELEMENTS ARE BETWEEN THE BUTTON AND THE NAV MENU. THE NAV MENU IS INSERTED AS A COMPLETE OWN DIV. IT ISN´T A CHILD OR SIBLING OR WHATEVER OF THE MENU BUTTON/LIST-->


<section class="elementor-section elementor-top-section elementor-element elementor-element-852919c mobile-navigation elementor-section-boxed elementor-section-height-default show-nav" data-id="852919c" data-element_type="section" id="mobile-navigation"
  data-settings="{&quot;background_background&quot;:&quot;classic&quot;}">
  <div class="elementor-container elementor-column-gap-default">
    <div class="elementor-row">
      <div class="aux-parallax-section elementor-column elementor-col-100 elementor-top-column elementor-element elementor-element-10eb682" data-id="10eb682" data-element_type="column">
        <div class="elementor-column-wrap elementor-element-populated">
          <div class="elementor-widget-wrap">
            <div class="elementor-element elementor-element-6910634 title-nav elementor-widget elementor-widget-heading" data-id="6910634" data-element_type="widget" data-widget_type="heading.default">
              <div class="elementor-widget-container">
                <span class="elementor-heading-title elementor-size-default">Startseite</span> </div>
            </div>
            <section class="elementor-section elementor-inner-section elementor-element elementor-element-4a45e9c elementor-section-boxed elementor-section-height-default elementor-section-height-default" data-id="4a45e9c" data-element_type="section">
              <div class="elementor-container elementor-column-gap-default">
                <div class="elementor-row">
                  <div class="aux-parallax-section make-column-clickable-elementor elementor-column elementor-col-100 elementor-inner-column elementor-element elementor-element-4d35815" style="cursor: pointer;" data-column-clickable="" data-column-clickable-blank="_self"
                    data-id="4d35815" data-element_type="column">
                    <div class="elementor-column-wrap elementor-element-populated">
                      <div class="elementor-widget-wrap">
                        <div class="elementor-element elementor-element-ac8c411 elementor-widget elementor-widget-heading" data-id="ac8c411" data-element_type="widget" data-widget_type="heading.default">
                          <div class="elementor-widget-container">
                            <h4 class="elementor-heading-title elementor-size-default"><i aria-hidden="true" class="auxicon-home-house-streamline"></i>&nbsp;&nbsp;Startseite</h4>
                          </div>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </section>
            <div class="elementor-element elementor-element-0e2ed13 title-nav elementor-widget elementor-widget-heading" data-id="0e2ed13" data-element_type="widget" data-widget_type="heading.default">
              <div class="elementor-widget-container">
                <span class="elementor-heading-title elementor-size-default">Leistungen</span> </div>
            </div>
            <section class="elementor-section elementor-inner-section elementor-element elementor-element-ee57cd6 elementor-section-boxed elementor-section-height-default elementor-section-height-default" data-id="ee57cd6" data-element_type="section">
              <div class="elementor-container elementor-column-gap-default">
                <div class="elementor-row">
                  <div class="aux-parallax-section make-column-clickable-elementor elementor-column elementor-col-100 elementor-inner-column elementor-element elementor-element-5f47bf7" style="cursor: pointer;" data-column-clickable="" data-column-clickable-blank="_self"
                    data-id="5f47bf7" data-element_type="column">
                    <div class="elementor-column-wrap elementor-element-populated">
                      <div class="elementor-widget-wrap">
                        <div class="elementor-element elementor-element-258d55c elementor-widget elementor-widget-heading" data-id="258d55c" data-element_type="widget" data-widget_type="heading.default">
                          <div class="elementor-widget-container">
                            <h4 class="elementor-heading-title elementor-size-default"><i aria-hidden="true" class="auxicon auxicon-earth-globe-streamline"></i>&nbsp;&nbsp;Domain</h4>
                          </div>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </section>
            <section class="elementor-section elementor-inner-section elementor-element elementor-element-0982174 elementor-section-boxed elementor-section-height-default elementor-section-height-default" data-id="0982174" data-element_type="section">
              <div class="elementor-container elementor-column-gap-default">
                <div class="elementor-row">
                  <div class="aux-parallax-section make-column-clickable-elementor elementor-column elementor-col-100 elementor-inner-column elementor-element elementor-element-123693d" style="cursor: pointer;" data-column-clickable="" data-column-clickable-blank="_self"
                    data-id="123693d" data-element_type="column">
                    <div class="elementor-column-wrap elementor-element-populated">
                      <div class="elementor-widget-wrap">
                        <div class="elementor-element elementor-element-67c041d elementor-widget elementor-widget-heading" data-id="67c041d" data-element_type="widget" data-widget_type="heading.default">
                          <div class="elementor-widget-container">
                            <h4 class="elementor-heading-title elementor-size-default"><i aria-hidden="true" class="auxicon auxicon-dashboard-1"></i>&nbsp;&nbsp;Hosting</h4>
                          </div>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </section>
            <section class="elementor-section elementor-inner-section elementor-element elementor-element-5c88b0e elementor-section-boxed elementor-section-height-default elementor-section-height-default" data-id="5c88b0e" data-element_type="section">
              <div class="elementor-container elementor-column-gap-default">
                <div class="elementor-row">
                  <div class="aux-parallax-section make-column-clickable-elementor elementor-column elementor-col-100 elementor-inner-column elementor-element elementor-element-0f53969" style="cursor: pointer;" data-column-clickable="" data-column-clickable-blank="_self"
                    data-id="0f53969" data-element_type="column">
                    <div class="elementor-column-wrap elementor-element-populated">
                      <div class="elementor-widget-wrap">
                        <div class="elementor-element elementor-element-39b7fe0 elementor-widget elementor-widget-heading" data-id="39b7fe0" data-element_type="widget" data-widget_type="heading.default">
                          <div class="elementor-widget-container">
                            <h4 class="elementor-heading-title elementor-size-default"><i aria-hidden="true" class="auxicon auxicon-mac"></i>&nbsp;&nbsp;Webseitenerstellung</h4>
                          </div>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </section>
            <section class="elementor-section elementor-inner-section elementor-element elementor-element-7628bed elementor-section-boxed elementor-section-height-default elementor-section-height-default" data-id="7628bed" data-element_type="section">
              <div class="elementor-container elementor-column-gap-default">
                <div class="elementor-row">
                  <div class="aux-parallax-section make-column-clickable-elementor elementor-column elementor-col-100 elementor-inner-column elementor-element elementor-element-39c0f32" style="cursor: pointer;" data-column-clickable="" data-column-clickable-blank="_self"
                    data-id="39c0f32" data-element_type="column">
                    <div class="elementor-column-wrap elementor-element-populated">
                      <div class="elementor-widget-wrap">
                        <div class="elementor-element elementor-element-5de4c14 elementor-widget elementor-widget-heading" data-id="5de4c14" data-element_type="widget" data-widget_type="heading.default">
                          <div class="elementor-widget-container">
                            <h4 class="elementor-heading-title elementor-size-default"><i aria-hidden="true" class="auxicon auxicon-repair"></i>&nbsp;&nbsp;Wartung</h4>
                          </div>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </section>
            <div class="elementor-element elementor-element-cd18a80 title-nav elementor-widget elementor-widget-heading" data-id="cd18a80" data-element_type="widget" data-widget_type="heading.default">
              <div class="elementor-widget-container">
                <span class="elementor-heading-title elementor-size-default">Über mich</span> </div>
            </div>
            <section class="elementor-section elementor-inner-section elementor-element elementor-element-468742a elementor-section-boxed elementor-section-height-default elementor-section-height-default" data-id="468742a" data-element_type="section">
              <div class="elementor-container elementor-column-gap-default">
                <div class="elementor-row">
                  <div class="aux-parallax-section make-column-clickable-elementor elementor-column elementor-col-100 elementor-inner-column elementor-element elementor-element-7a07457" style="cursor: pointer;" data-column-clickable="" data-column-clickable-blank="_self"
                    data-id="7a07457" data-element_type="column">
                    <div class="elementor-column-wrap elementor-element-populated">
                      <div class="elementor-widget-wrap">
                        <div class="elementor-element elementor-element-dc04573 elementor-widget elementor-widget-heading" data-id="dc04573" data-element_type="widget" data-widget_type="heading.default">
                          <div class="elementor-widget-container">
                            <h4 class="elementor-heading-title elementor-size-default"><i aria-hidden="true" class="auxicon-profile-1"></i>&nbsp;&nbsp;Über mich</h4>
                          </div>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </section>
            <div class="elementor-element elementor-element-afffe9d title-nav elementor-widget elementor-widget-heading" data-id="afffe9d" data-element_type="widget" data-widget_type="heading.default">
              <div class="elementor-widget-container">
                <span class="elementor-heading-title elementor-size-default">Kontakt</span> </div>
            </div>
            <section class="elementor-section elementor-inner-section elementor-element elementor-element-5fabf81 elementor-section-boxed elementor-section-height-default elementor-section-height-default" data-id="5fabf81" data-element_type="section">
              <div class="elementor-container elementor-column-gap-default">
                <div class="elementor-row">
                  <div class="aux-parallax-section make-column-clickable-elementor elementor-column elementor-col-100 elementor-inner-column elementor-element elementor-element-bba16fc" style="cursor: pointer;" data-column-clickable="" data-column-clickable-blank="_self"
                    data-id="bba16fc" data-element_type="column">
                    <div class="elementor-column-wrap elementor-element-populated">
                      <div class="elementor-widget-wrap">
                        <div class="elementor-element elementor-element-4e40e5a elementor-widget elementor-widget-heading" data-id="4e40e5a" data-element_type="widget" data-widget_type="heading.default">
                          <div class="elementor-widget-container">
                            <h4 class="elementor-heading-title elementor-size-default"><i aria-hidden="true" class="auxicon-resend"></i>&nbsp;&nbsp;Kontakt</h4>
                          </div>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </section>
          </div>
        </div>
      </div>
    </div>
  </div>
</section>