<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>