<ul id=“main-menu” data-nav-showing=“false” style=“transform: translate(0%, -116%) matrix(1, 0, 0, 1, 0, 0);”>

<!-- <li class="nav-jr home-anc"><h4><a href="#home"><br></a></h4></li> -->
<div class="flexbox-parent">
  <div class="flexbox-child">
    <li class="about-anc">
      <h4><a class="nav-underline home" href="{{site.url}}">Home</a></h4></li>
    {% for page in site.pages %}
      {% if page.tags contains "about" %}
        <li class="about-anc">
          <h4><a class="nav-underline about" href="{{page.url}}">{{page.title}}</a></h4></li>
      {% endif %}
      {% if page.tags contains "contact" %}
        <li class="expertise-anc">
          <h4><a class="nav-underline contact" href="{{page.url}}">{{page.title}}</a></h4></li>
      {% endif %}
      {% if page.tags contains "portfolio" %}
        <li class="team-anc">
          <h4><a class="nav-underline portfolio" href="{{page.url}}">{{page.title}}</a></h4></li>
      {% endif %}
      {% if page.tags contains "projects" %}
        <li class="beliefs-anc">
          <h4><a class="nav-underline open-source" href="{{page.url}}">{{page.title}}</a></h4></li>
      {% endif %}
      {% if page.tags contains "resume" %}
        <li class="beliefs-anc">
          <h4><a class="nav-underline resume" href="{{page.url}}">{{page.title}}</a></h4></li>
      {% endif %}
    {% endfor %}
        <li>
        {% if site.show_social_icons %}
          {% include social_links.html %}
        {% endif %}
        </li>
</div>

</ul> <!– <div class=“title-div”>

<div class="title" style="transform: translate(0%, -116%) matrix(1, 0, 0, 1, 0, 0);"><span class="title-label">About</span></div>

</div> –>

<style> nav ul {

z-index: 1001;
float: left;
padding-left: 0;
padding-bottom: 5%;
margin: 0;
background: #fff;
width: 100%;
-webkit-transform: translateY(-116%);
transform: translateY(-116%);
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-align-items: center;
-ms-flex-align: center;
align-items: center;
-webkit-justify-content: center;
-ms-flex-pack: center;
justify-content: center;
-webkit-transition: all 0.75s ease;
-moz-transition: all 0.75s ease;
-o-transition: all 0.75s ease;
-ms-transition: all 0.75s ease;
transition: all 0.75s ease;

}

nav .flexbox-parent {

width: 100000%;

}

nav li {

list-style: none;
margin: 4vh auto;

}

nav .nav-underline:before {

bottom: 0;
width: 100%;
-webkit-transform: scaleX(1);
transform: scaleX(1);

}

.medium-link h2:before, nav .nav-underline:before, nav a:after {

content: '';
border-bottom: 2px solid #000;

}

nav .nav-underline:before, nav a:after {

position: absolute;
left: 0;
transition: .4s;

}

nav a {

position: relative;

}

nav .nav-underline:hover:before {

-webkit-transform: scaleX(0);
transform: scaleX(0);

}

nav a:hover:after {

-webkit-transform: scaleX(0);
transform: scaleX(0);
width: 100%;

}

nav a:after {

bottom: .5vh;
width: 100%;
-webkit-transform: scaleX(0);
transform: scaleX(0);

} </style>