D-Net

<div>

  <div class="uk-offcanvas-content">

    <!--MOBILE & PAD PORTRAIT-->

    <div class="tm-header-mobile uk-hidden@m">

      <ng-container *ngIf="isHomeRoute() ; else smallHeader">

        <nav class="uk-navbar-container uk-navbar" uk-navbar>

          <div class="uk-navbar-right">

            <ul class="uk-navbar-nav">

              <li>

                <a class="" href="#">

                  <div uk-navbar-toggle-icon="" class="uk-navbar-toggle-icon uk-icon">

                  </div>

                </a>

                <div class="uk-navbar-dropdown">

                  <ul class="uk-nav uk-navbar-dropdown-nav">

                    <li class="uk-active"><a [routerLink]="['/home']">Home</a></li>

                    <li class="uk-active"><a [routerLink]="['/overview/' + 'europe']">OA in Europe</a></li>

                    <!--<li class="uk-active"><a href="#">About</a></li>-->

                    <li class="uk-active"><a [routerLink]="['/methodology']">Methodology</a></li>

                    <li class="uk-nav-divider"></li>

                    <li class="uk-active"><a [routerLink]="['home']">Sign In</a></li>

                  </ul>

                </div>

              </li>

            </ul>

          </div>

        </nav>

        <nav class="uk-navbar-container uk-navbar" uk-navbar="">

          <div class="uk-navbar-center">

            <a class="uk-navbar-item uk-logo" [routerLink]="['/home']">

              <img src="../../../assets/img/OS_Logo_Vertical.svg" alt="Open Science Observatory" width="161"

                   class="uk-responsive-height"> </a>

          </div>

        </nav>

      </ng-container>

      <ng-template #smallHeader>

        <nav class="uk-navbar-container uk-navbar smallHeader" uk-navbar>

          <div class="uk-navbar-left">

            <a class="uk-navbar-item uk-logo" [routerLink]="['/home']">

              <img src="../../../assets/img/OS_Logo_small.svg" alt="Open Science Observatory" width="36"

                   class="uk-responsive-height"> </a>

          </div>

          <div class="uk-navbar-center">

            <div class="uk-autocomplete uk-form uk-search uk-search-default searchForCountry" data-uk-autocomplete="{source:'https://getuikit.com/v2/tests/components/_autocomplete.json'}">

              <span uk-search-icon></span>

              <input class="uk-search-input" type="search" placeholder="Search for a country...">

              <!--<input type="text">-->

            </div>

          </div>

          <div class="uk-navbar-right">

            <ul class="uk-navbar-nav">

              <li>

                <a class="" href="#">

                  <div uk-navbar-toggle-icon="" class="uk-navbar-toggle-icon uk-icon">

                  </div>

                </a>

                <div class="uk-navbar-dropdown">

                  <ul class="uk-nav uk-navbar-dropdown-nav">

                    <li class="uk-active"><a [routerLink]="['/home']">Home</a></li>

                    <li class="uk-active"><a [routerLink]="['/overview/' + 'europe']">OA in Europe</a></li>

                    <!--<li class="uk-active"><a href="#">About</a></li>-->

                    <li class="uk-active"><a [routerLink]="['/methodology']">Methodology</a></li>

                    <li class="uk-nav-divider"></li>

                    <li class="uk-active"><a [routerLink]="['home']">Sign In</a></li>

                  </ul>

                </div>

              </li>

            </ul>

          </div>

        </nav>

      </ng-template>

    </div>

    <!--LAPTOP & PAD LANDSCAPE-->

    <div class="tm-header uk-visible@m tm-header-transparent" uk-header="">

      <div class="uk-navbar-container uk-sticky uk-navbar-transparent" uk-sticky="top:0" media="768"

           cls-active="uk-active uk-navbar-sticky" style="" animation="uk-animation-slide-top"

           top=".tm-header + [class*="uk-section"]" cls-inactive="uk-navbar-transparent">

        <div class="uk-container uk-container-expand">

          <nav class="uk-navbar" uk-navbar="{&quot;align&quot;:&quot;left&quot;}">

            <div class="uk-navbar-left">

              <a [routerLink]="['home']" class="uk-logo uk-navbar-item">

                <img src="../../../assets/img/OS_Logo_Horizontal.svg" alt="Open Science Observatory" class="uk-responsive-height">

              </a>

            </div>

            <div class="uk-navbar-right">

              <ul class="uk-navbar-nav" >

                <li class="uk-parent" [routerLinkActive]="['uk-active']">

                  <a [routerLink]="['home']" [routerLinkActive]="['uk-active']">

                    Home

                  </a>

                </li>

                <li class="uk-parent" [routerLinkActive]="['uk-active']">

                  <a [routerLink]="['/overview/' + 'europe']" [routerLinkActive]="['uk-active']">

                    OA in Europe

                  </a>

                </li>

                <li class="uk-parent" [routerLinkActive]="['uk-active']">

                  <a [routerLink]="['/methodology']" [routerLinkActive]="['uk-active']">

                    Methodology

                  </a>

                </li>

                <li class="uk-parent" [routerLinkActive]="['uk-active']">

                  <a [routerLink]="['home']" [routerLinkActive]="['uk-active']">

                    Sign In

                  </a>

                </li>

              </ul>

            </div>

          </nav>

        </div>

      </div>

      <div class="uk-sticky-placeholder" style="height: 84px; margin: 0px;" hidden="hidden"></div>

    </div>

  </div>

</div>