I'm looking to create a navigation bar that defaults to right alignment for the items, but switches to left alignment when collapsed. Here's the HTML code I have so far:
<nav class="navbar">
<div class="container-fluid" width='300px'>
<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="index.html"><img src="img/UWCL_logo_white.png" alt="Gibbs Lab" style="width:80px;height:auto;"></a>
</div>
<div class="collapse navbar-collapse navbar-left " id="myNavbar">
<ul class="nav navbar-nav navText " style='list-style-type: square'>
<li ><a class="dropdown-divider" href="production/index.html" id="navText">About</a></li>
<li><a href="research/index.html" id="navText">Staff</a></li>
<li><a href="education/index.html" id="navText">Data Dashboards</a></li>
<li><a href="people/index.html" id="navText">Current Projects</a></li>
</ul>
</div>
</div>
</nav>
This is how my navigation bar appears:
https://i.sstatic.net/tCNoN.png
And here it is when collapsed:
https://i.sstatic.net/j69AA.png
I've attempted to align the collapsed items to the left of the page with no success using this CSS code:
.navbar-collapse {
text-align:left;
float:left;
}