The easiest way to do it is to make them smaller. So their texts will be ‘ closer ‘.
If you want to keep the navbar_navigation width as it is now, then you could add 2 empty cols inside the row with a bs class ( for eg col-md-1 ). Then you have 10 cols left. Make a col-md-10 and wrap the 4 col-md-3 inside that col.
So the result is that the 4 cols are still equal but smaller so the text is ‘closer’. The
navbar_navigation has the same width ( this is what i guess you mean when you say you want to keep the margins ).
Check code snippet below in Full Page.
As a side note. Do not use float. Stick to bootstrap and flexbox.
.navbar {
box-shadow: 0 5px 15px rgba(0, 0, 0, .20);
background: #fff;
border: 0;
max-height: 65px
}
#navbar_navigation > div.row > div > a{
display: inline-block;
position: relative;
text-decoration: none;
color: #244b5a;
}
.navbar_navigation{
text-align: center;
font-family: 'Montserrat-SemiBold', sans-serif;
font-size: 22px;
}
.vertical-align {
display: flex;
align-items: center;
}<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<nav class="navbar navbar-fixed-top" role="navigation">
<div class="row vertical-align">
<div style="text-align: center; background: red;" class="col-md-2">
<a href="/">
Logo
</a>
</div>
<div id="navbar_navigation" class="col-md-8">
<div class="row">
<div class="col-md-1 navbar_navigation">
</div>
<div class="col-md-10">
<div style="background: gray;" class="col-md-3 navbar_navigation">
<a href="#">My menu 1</a>
</div>
<div style="background: purple;" class="col-md-3 navbar_navigation">
<a href="#">Prices</a>
</div>
<div style="background: green;" class="col-md-3 navbar_navigation">
<a href="#">Help Me Please</a>
</div>
<div style="background: yellow;" class="col-md-3 navbar_navigation">
<a href="#">My account</a>
</div>
</div>
<div class="col-md-1 navbar_navigation">
</div>
</div>
</div>
<div style="background: red; text-align: center" class="col-md-1">
<a href="#">
TXT
</a>
</div>
<div style="background: blue;" class="col-md-1">
<a href="#">
<div style="float: right; width: 65px; height: 65px; background: #2d4c55;"></div>
</a>
</div>
</div>
</nav>