I am trying to create a simple, floating and responsive navigation bar while using Skeleton boilerplate.
It should be nothing more than a logo align to the left of container and a few menu anchor links aligned to the right. Position of it should be fixed while scrolling the site's content, while staying in Skeleton's responsive grid. Exactly like here.
Natural way of doing this would be something like this for me.
<header>
<div class="container">
<div class="row" style="position: absolute; margin-top: 5rem">
<div class="two columns">
<!--LOGO-->
</div>
<div class="ten columns" style="text-align: right;">
<!--MENU-->
</div>
</div>
</div>
</header>
The problem is that by setting position: absolute, div loses its ability to divide into columns. Also, the links aren't clickable. Can anyone suggest a working solution? Having a hamburger menu icon on mobile would be an ideal extension, so if anyone knows the simplest way to do this, I would love to hear it out.
Thanks in advance!