{f:variable(name: 'count', value: 0)}
<f:for each="{mainnavigation}" as="mainnav">
  <f:if condition="{mainnav.active}">
    {f:variable(name: 'count', value: '{count + 1}')}
    <f:if condition="{mainnav.children}">

      <f:then>
        <nav class="navbar navbar-expand-lg navbar-light ministry_navbar" id="theNav">
          </f:then>
        <f:else>
          <nav class="navbar sticky-top navbar-expand-lg navbar-light ministry_navbar" id="theNav">
            </f:else>
          </f:if>
        </f:if>
      </f:for>

    <f:if condition="{0:count} == {0:0}">
      <f:then>
        <nav class="navbar sticky-top navbar-expand-lg navbar-light ministry_navbar" id="theNav">
          </f:then>
        </f:if>

      <div class="container-fluid ministry_container">
        <f:cObject typoscriptObjectPath="lib.dynamicContent" data="{ colPos: '1',pageUid: '330'}" />
        <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="#navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
          <span id="navbar-hamburger" class="navbar-toggler-icon"></span>
          <span id="navbar-close" class="hidden"><i class="material-icons txt_content">close</i></span>
        </button>
        <div class="collapse navbar-collapse" id="navbarSupportedContent">
          <ul class="navbar-nav ml-auto">
            <f:for each="{mainnavigation}" as="mainnavigationItem">
              <f:if condition="{0:mainnavigationItem.title} != {0:'Blog'}">
                <f:then>
                  <li class="nav-item">
                    <a class="nav-link main_option {f:if(condition: mainnavigationItem.active, then:'active')}" href="{mainnavigationItem.link}" target="{mainnavigationItem.target}" title="{mainnavigationItem.title}" id="{f:if(condition: mainnavigationItem.children, then:'has-children')}">
                      {mainnavigationItem.title}
                    </a>
                  </li>
                </f:then>
              </f:if>
            </f:for>
          </ul>

          <ul class="navbar-nav ml-auto">
            <li class="nav-item">
              <f:cObject typoscriptObjectPath="lib.nsearch" />
            <li>
               <f:cObject typoscriptObjectPath="lib.dynamicContent" data="{ colPos:'2',pageUid: '330'}" />
        <li class="nav-item dropdown">
          <f:for each="{languageNavigation}" as="item">
            <f:if condition="{item.active}">
              <a class="nav-link dropdown-toggle" href="{item.link}" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" title="{item.navigationTitle}">
                {item.navigationTitle}
              </a>
            </f:if>
          </f:for>
          <div class="dropdown-menu" aria-labelledby="navbarDropdown">
            <f:for each="{languageNavigation}" as="item">
              <f:if condition="{item.available}">
                <f:then>
                  <a class="dropdown-item {f:if(condition: item.active, else: 'disabled')}" href="{item.link}" hreflang="{item.hreflang}" title="{item.navigationTitle}">
                    {item.navigationTitle}
                  </a>
                </f:then>
              </f:if>
            </f:for>
          </div>
        </li>
        <f:cObject typoscriptObjectPath="lib.dynamicContent" data="{ colPos:'3',pageUid: '330'}" />
          </ul>
        </div>
      </div>
      </nav>

    <f:for each="{mainnavigation}" as="mainnav">

      <f:if condition="{mainnav.children}">
        <f:if condition="{mainnav.active}">

          <nav class="navbar sticky-top navbar-expand-lg navbar-light ministry_subnavbar" id="subnavv">
            <div class="container-fluid ministry_container">
              <p class="txt_subtitle txt_black text-uppercase mabo0">{mainnav.title}</p>

              <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#subNavbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
                <i class="fas fa-sort-down txt_title txt_grey"></i>
              </button>

              <div class="collapse navbar-collapse" id="subNavbarSupportedContent">

                <ul class="navbar-nav ml-auto" id="subNavOptionn">
                  <f:for each="{mainnav.children}" as="item">
                    <f:if condition="{item.children}">
                      <f:then>
                        <li class="nav-item dropdown" onclick="var divs = document.querySelectorAll('#subNavOptionn li');for (var k = 0; k < divs.length; k++) {divs[k].classList.remove('active')}this.classList.add('active');">
                          <a class="nav-link main_option dropdown-toggle" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" href="#">{item.title}</a>

                          <div class="dropdown-menu" aria-labelledby="navbarDropdown">

                            <f:for each="{item.children}" as="subitem">
                              <a class="dropdown-item" href="{subitem.link}" target="{subitem.target}" title="{subitem.title}">{subitem.title}</a>
                            </f:for>
                          </div>
                        </li>
                      </f:then>
                      <f:else>
                        <li class="nav-item" onclick="var divs = document.querySelectorAll('#subNavOptionn li');for (var k = 0; k < divs.length; k++) {divs[k].classList.remove('active')}this.classList.add('active');">
                          <a class="nav-link main_option {f:if(condition: item.active, then:'active')}" href="{item.link}" target="{item.target}" title="{item.title}">
                            {item.title}</a>
                        </li>
                      </f:else>
                    </f:if>
                  </f:for>
                </ul>

              </div>

            </div>

          </nav>

        </f:if>  
      </f:if>
    </f:for>