I need assistance with creating a new project template to convert a WordPress template into a Bootstrap template.
Currently, I am working on the navbar and facing issues with responsive design and toggle navigation. On laptop devices, the navbar looks good as intended. However, on smartphone devices, especially with navbar-left and navbar-right, the toggle-navigation does not display the navbar properly.
Laptop device :
https://i.stack.imgur.com/thjBd.png
Smartphone device :
https://i.stack.imgur.com/vcb32.png
I want all elements to be vertically aligned in the smartphone view, but that's not the case for www.coe.int and languages with glyphicons.
This is my HTML script:
<nav class="navbar navbar-default navbar-static-top">
<div class="container">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button type="button" data-target="#navbarCollapse" data-toggle="collapse" class="navbar-toggle">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>
<!-- Collection of nav links and other content for toggling -->
<div id="navbarCollapse" class="collapse navbar-collapse">
<ul class="nav navbar-nav navbar-left">
<li><a id="coe" href="http://www.coe.int">WWW.COE.INT</a></li>
</ul>
<ul class="nav navbar-nav navbar-middle">
<li><a class="active" href="#">EUROPEAN PHARMACOPOEIA</a></li>
<li><a href="#">PHARMEUROPA</a></li>
<li><a href="#">OTHER PUBLICATIONS</a></li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li><a href="#">Languages</a></li>
<li><a><span class="glyphicon glyphicon-search"></span></a></li>
</ul>
</div>
</div>
</nav>
And this is my CSS section:
body {
font-family:sans-serif;
font-size: 1.25em;
}
/* ######################## */
/* HEADER PART */
/* ######################## */
header{
background-color: #e8e8e8;
}
header a{
color: #a5a5a4;
}
/* Bootstrap Stuff */
nav.navbar.navbar-default.navbar-static-top {
background-color: #e8e8e8;
}
.navbar .navbar-nav {
display: inline-block;
float: none;
vertical-align: top;
}
.navbar .navbar-collapse {
text-align: center;
}
a#coe {
font-weight: bold;
text-decoration: none;
}
ul.nav.navbar-nav.navbar-middle > li > a:hover {
background-color: #1b7eac;
color: black;
transition: all 0.2s;
}
ul.nav.navbar-nav.navbar-middle > li > a:focus{
background-color: #1b7eac;
color: white;
transition: all 0.2s;
}
Any suggestions or solutions would be greatly appreciated.