How to make a menu on bootsrtap?

In my opinion you have everything very fancy there. Too ... Everything can be greatly simplified. div.row>div>a - more and not necessary. It seems to me that it is easier to rewrite there than to correct the code.
In general, below, I offer my version, which does, as it seems to me, what you need.

Since all the menu items in general are the same, I designed only the first two "New Ad" and "New Folder". The rest, I think, in the image and likeness you can organize yourself.

 #head { text-align: center; } a.topLink { display: inline-block; font-size: 14px; font-family: "Open Sans"; color: rgb(95, 95, 95); padding-left: 2%; padding-right: 2%; line-height: 75px; width: 100%; } #head>div:not(#logo):before { background-color: rgb(95, 95, 95); content: ' '; display: block; width: 2px; height: 22px; position: absolute; top: 35%; margin-left: -1px; } #head a:hover:not(.logo_img) { background-color: rgb(104, 144, 231); color: white; } #head a:hover, #head a:hover .glyphicon { color: white; } .header-box { background-color: rgb(255, 255, 255); box-shadow: 0px 0px 4px 0px rgba(18, 37, 74, 0.3); height: 75px; } .logo_img { background-image: url("http://papeo.braintips.ru/images/logo-head2.png"); background-repeat: no-repeat; margin-top: 15px; width: 128px; height: 33px; z-index: 131; } 

 <script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script> <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" /> <div class="header-box"> <div id="head" class="row"> <div id="logo" class="col-xs-3"> <a class="navbar-brand logo_img" href="/"></a> </div> <div class="col-xs-3"> <a class="topLink" href="#new_ads"> <div class="glyphicon glyphicon-plus"></div>New Ad</a> </div> <div class="col-xs-3"> <a class="topLink" href="#new_folder"> <div class="glyphicon glyphicon-plus"></div>New Folder</a> </div> </div> </div> 

Some notes are important for understanding this solution.

• in order to make small vertical lines, it is not necessary to do separate div . I suggest using the pseudo-element :before (or :after — as is more convenient).
  Pay attention to CSS #head>div:not(#logo):before .
  Before each "child" of the #head element (except #logo ) a block is added with a gray background 2px wide by 22px high by absolute positioning and a 35% indent from the top. All this makes it possible to create a small vertical line and precisely position it relative to the block.
  You can play with the indicators to do what you need.
• making a menu tag like display: inline-block; width: 100% display: inline-block; width: 100% you can avoid this terrible construction: <div class="wellhead" onclick="location.href='#new_ads'"><a href="#new_ads">
• by adding line-height: 75px you can get rid of margin-top: 23px; - the browser itself will put the text vertically in the center relative to the height of your menu.
• Your logo is made as background-image for some reason. It seems there is no need ... well. However, if you already made it a background, do not forget to make background-repeat: no-repeat;
• In order for the code to appear normally in my snippet, I had to replace all of your col-XX-X classes. You can use your own.

In general, I think that if you take the approach proposed by me as a basis, you will be able to correct your menu with a variant that is more subservient to you and understandable to the masters ...