Currently, I am designing a responsive navigation bar utilizing Bootstrap. The current layout displays as follows:
https://i.sstatic.net/KglsX.png
in expanded view, and:
https://i.sstatic.net/DKvex.png
in collapsed view.
While the design appears satisfactory in normal view, I am looking to maintain the "Sign Up" link within the navigation bar when collapsed without duplicating it in the list. A proposed solution is depicted below:
https://i.sstatic.net/7JdTo.png
The code snippet for this project is as follows:
@import url('https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css');<script src="http://code.jquery.com/jquery-3.2.1.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<nav class="navbar navbar-inverse">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">WebSiteName</a>
</div>
<div class="collapse navbar-collapse" id="myNavbar">
<ul class="nav navbar-nav navbar-right">
<li><a href="#"><span class="glyphicon glyphicon-user"></span> Sign Up</a></li>
</ul>
<ul class="nav navbar-nav">
<li><a href="#">Home</a></li>
</ul>
</div>
</div>
</nav>Fiddle: https://jsfiddle.net/aqgtmy6w/4/
I came across this post which addresses a similar issue but encounters problems with the collapsed list shifting links left and right.
Could anyone offer guidance on how to preserve specific links within the navbar upon collapsing, while ensuring they are not duplicated in the list?