Bootstrap responsive navbar with toggle-navigation - html

Question

I'm looking for creating a new project Template in order to convert Wordpress Template to Bootstrap Template.
I'm working on navbar and I'm getting an issue with responsive-design and toggle-navigation
When I'm in laptop device, my navbar is well-defined as I want. But, with smartphone device for example, the toggle-navigation doesn't display my navbar as I would like to get. Especially with navbar-left and navbar-right.
Laptop device :
Smartphone device :
I would like to get in smartphone view all elements aligned vertically and it'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>PHARMEUROPA</li>
<li>OTHER PUBLICATIONS</li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li>Languages</li>
<li><a><span class="glyphicon glyphicon-search"></span></a></li>
</ul>
</div>
</div>
</nav>
And my CSS part :
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;
}
Could you help me to find a solution ?

Answer 1

My reputation does not allow me to comment unfortunately as this certainly be a comment.
But have you tried simply altering the text size using media queries to get your desired result?
--EDIT-----
I am assuming you already have the toggle button already working.
In which case If you wish to align them vertically you can use the bootstrap operator
col-sm-4 (for three items vertically aligned)
col-sm-3 (for 4 items vertically aligned)
Which will give each element their own space and align them vertically.
But remember you need to have a container then row then this property like so:
<div class="container">
<div class="row">
<div class="col-sm-4">item here</div>
<div class="col-sm-4">item here</div>
<div class="col-sm-4">item here</div>
</div>
</div>
I hope this helps you!