JSFiddle - React, Tailwind, and code Playground
HTML
<div class="navigation">
<div class="nav_item">
<a href="#" class="link"><!-- Home --></a>
</div>
<div class="nav_item">
<a href="#" class="link">About</a>
</div>
<div class="nav_item">
<a href="#" class="link">Portfolio</a>
</div>
</div>
CSS
*{
margin: 0;
padding: 0;
}
.navigation{
position: absolute;
text-align: center;
width: 100%;
height: 70px;
line-height: 40px;
background: #333;
}
.nav_item{
position: relative;
margin: 0 5px;
padding: 15px 0;
display: inline-block;
background: yellow;
}
.hidden{
display: none;
}
JavaScript
$(function () {
if ($("a.link").is(':empty')) {
$(this).parent().addClass("hidden");
}
});