Center first and last menu item with items above menu - css

Question

Using bootstrap 3, I have:
<div class="container"> </div> {with specific width}
<div class="container-fluid">
<nav> <nav>
</div> {need container-fluid to make mnu background full width}
I would like to center first menu item with left edge of picture above and also last menu item to center with right edge of text above.
Here is a link to the JSFiddle demo.
Do maximize JS fiddle result window to see menu in full width
The idea is that space between all menu items is same. I try to get result with some padding of <a> tag and <li> tag, but for bigger screen I must then write queries. Hence, how do I have an "universal" solution?

Answer 1

How about using flexbox to add the property value space-between and justify your unordered list items, combined with a media query to prevent affecting your hamburger menu.
#media (min-width: 768px) {
.navbar-nav {
display: flex;
width: 100%;
justify-content: space-between;
align-items: center;
}
.navbar-nav > li {
display: flex;
}
.navbar-nav > li > a {
justify-content: center;
align-items: center;
}
}
jsfiddle
CODE SNIPPET:
/* Latest compiled and minified CSS included as External Resource*/
/* Optional theme */
#import url('//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap-theme.min.css');
.container {
width: 1100px;
padding: 0px;
}
.navbar-nav {
padding: 0;
margin: 0;
}
.menuCon {
background: grey;
}
#mainMenu > ul > li > a {
color: #000;
}
#media (min-width: 768px) {
.navbar-nav {
display: flex;
width: 100%;
justify-content: space-between;
align-items: center;
}
.navbar-nav > li {
display: flex;
}
.navbar-nav > li > a {
justify-content: center;
align-items: center;
}
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<div class="container ">
<div class="row headRow">
<div class="col-xs-12 col-sm-12 col-md-4 borderRight width80">
<img src="https://placeholdit.imgix.net/~text?txtsize=20&txt=230%C3%9781&w=230&h=81" class="img-responsive logo" id="logo" alt="logo" />
</div>
<div class="hidden-xs col-sm-6 col-md-4 mobileMarginText ">
<div class="headerTextOne">
<div>top textttttt</div>text text</div>
</div>
<div class="col-xs-12 col-sm-6 col-md-4 text-left ">
<p class=" headerPhone">12345678999 710</p>
<p class=" headerMail">hi#hello.com</p>
</div>
</div>
<!-- /row menu-->
</div>
<div class="container-fluid menuCont ">
<div class="row">
<div class="col-xs-12 col-md-12">
<nav class="navbar navbar-default noBorder height40 menuBox">
<div class="container-fluid">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed " data-toggle="collapse" data-target="#mainMenu" aria-expanded="false">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="mainMenu">
<ul class="nav navbar-nav">
<li>First
</li>
<li>Home1
</li>
<li>Home2
</li>
<li>Home3
</li>
<li>Home4
</li>
<li>Last
</li>
</ul>
</div>
<!-- /.navbar-collapse -->
</div>
<!-- /.container-fluid -->
</nav>
</div>
</div>
</div>