Is this the type of design you have in mind?
This tutorial demonstrates how to create a right-aligned navigation bar using Font Awesome icons and flexbox.
For Font Awesome icons, visit:
https://fontawesome.com/icons?from=io
Learn about flexbox here:
https://css-tricks.com/snippets/css/a-guide-to-flexbox/
$('#navButton').click(function() {
$('.subNav').slideToggle('slow', function() {});
});
.navigation {
position: absolute;
top: 0;
left: 0;
right: 0;
list-style-type: none;
display: -webkit-box;
display: -moz-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
justify-content: flex-end;
background-color: #5d80ba;
height: 40px;
z-index: 50;
}
.navigation li {
display: inline-flex;
flex-direction: row;
}
.navigation li a {
padding: 10px;
cursor: pointer;
justify-content: space-between;
}
.navigation li a:hover {
color: #dddddd;
background-color: #334ba1;
}
.subNav {
display: none;
position: fixed;
top: 40px;
right: 0;
width: 100px;
background-color: #8f80ba;
z-index: 40;
list-style-type: none;
}
.subNav li {
display: inline-block;
width: 45px;
padding-top: 10px;
padding-bottom: 10px;
}
.subNav li:hover {
cursor: pointer;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://use.fontawesome.com/releases/v5.0.6/css/all.css" rel="stylesheet>
<ul class="navigation">
<li>
<a><i class="fas fa-bed"></i></a>
</li>
<li>
<a><i class="fas fa-beer"></i></a>
</li>
<li>
<a><i class="fas fa-utensils"></i></a>
</li>
<li>
<a><i class="fas fa-utensils"></i></a>
</li>
<li>
<a><i class="fas fa-bed"></i></a>
</li>
<li>
<a><i class="fas fa-beer"></i></a>
</li>
<li>
<a><i class="fas fa-utensils"></i></a>
</li>
<li>
<a id="navButton"><i class="fas fa-bars"></i></a>
</li>
</ul>
<ul class="subNav">
<li>
<a><i class="fas fa-bed"></i></a>
</li>
<li>
<a><i class="fas fa-utensils"></i></a>
</li>
<li>
<a><i class="fas fa-beer"></i></a>
</li>
<li>
<a><i class="fas fa-utensils"></i></a>
</li>
<li>
<a><i class="fas fa-beer"></i></a>
</li>
<li>
<a><i class="fas fa-utensils"></i></a>
</li>
</ul>