<nav class="pv3 ph3 ph4-ns" role="navigation">
  <div class="flex-l justify-between items-center center">
    <a href="{{ .Site.BaseURL }}" class="f3 fw2 hover-white no-underline white-90 dib">
      {{ .Site.Title }}
    </a>
    <div class="flex-l items-center">

      {{ $currentPage := . }}
      <!-- start .main-menu -->
      <ul class="pl0 mr3">
        {{ range .Site.Menus.main }}
        {{ if .HasChildren }}
        <li class="list f5 f4-ns fw4 dib pr3 {{ if $currentPage.HasMenuCurrent "main" . }}active{{ end }}">
          <a class="hover-white no-underline white-90" href="{{ .URL }}" title="{{ .Name }} page">
            {{ .Pre }}
            <span>{{ .Name }}</span>
          </a>
          <span id="about_chevron"  class="fa fa-chevron-down"></span>
          <ul class="sub-menu dn pa0 w-33 center mt0">
            {{ range .Children }}
            <li class="db {{ if $currentPage.IsMenuCurrent "main" . }}active{{ end }}">
              <a href="{{ .URL }}">{{ .Name }}</a>
            </li>
            {{ end }}
          </ul>
        </li>
        {{ else }}
        <li class="list f5 f4-ns fw4 dib pr3">
          <a class="hover-white no-underline white-90" href="{{ .URL }}" title="{{ .Name }} page">
            {{ .Name }}
          </a>
        </li>

        {{ end }}
        {{ end }}
      </ul><!-- end /.main-menu -->

      {{ partial "social-follow.html" . }}
    </div>
  </div>
</nav>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<script type="text/javascript" src="/javascript/dropdown.js"></script>
<style type="text/css">
  span.fa {
      color: #FFF;
  }
  @media (max-width: 991px) {
      ul.sub-menu {
          display: block;
      }
  }
  @media (min-width: 992px) {
      ul.sub-menu:not(.dn){
          position: absolute;
          top: auto;
          width: 100%;
          max-width: 320px;
          background: rgba(0,0,0,0.333);
      }
  }
  ul.sub-menu li a {
      color: #FFF;
      display: block;
      text-decoration: none;
      padding: 8px;
  }
  ul.sub-menu li a:hover,
  ul.sub-menu li a:focus {
      background: rgba(0,0,0,0.7);
  }
</style>