<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/js/bootstrap.min.js"></script> <script src="//code.jquery.com/jquery-1.11.1.min.js"></script> <!------ Include the above in your HEAD tag ----------> <div class="container-fluid"> <div class="row"> <nav class="navbar navbar-default" role="navigation"> <!-- 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=".navbar-collapse"> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button> <h1 class="logoHome"><a class="navbar-brand" href="#">LOGO</a></h1> </div> <!-- Collect the nav links, forms, and other content for toggling --> <div class="collapse navbar-collapse"> <ul id="menu-menu-main" class="nav nav-justified"> <li id="menu-item-34" class="menu-item menu-item-type-post_type menu-item-object-page current-menu-item page_item page-item-5 current_page_item active menu-item-34"><a href="#">link1</a></li> <li id="menu-item-33" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-33"><a href="#">link2</a></li> <li id="menu-item-32" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-32"><a href="#">link3</a></li> <li id="menu-item-31" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-31"><a href="#">link4</a></li> <li id="menu-item-30" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-30"><a href="#">link5</a></li> <li id="menu-item-29" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-29"><a href="#">link6</a></li> <li id="menu-item-28" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-28"><a href="#">link7</a></li> <li id="menu-item-27" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-27"><a href="#">link8</a></li> <li id="menu-item-26" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-26"><a href="#">link9</a></li> <li id="menu-item-25" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-25"><a href="#">link10</a></li> </ul> </div><!-- /.navbar-collapse --> </nav> </div> </div>

.container-fluid { border: 1px solid #000; } .navbar-default { background-color: rgba(255, 255, 255, 0); border: none; } .navbar-header { float: none; } #menu-menu-main { margin-top: 30px; display: flex; display: -webkit-flex; flex-flow: row nowrap; -webkit-flex-flow: row nowrap; /*align-items: center; -webkit-align-items: center;*/ justify-content: space-between; -webkit-justify-content: space-between; } .nav > li > a:link, .nav > li > a:visited { /*padding: 10px 0px;*/ font: 700 1em/0.5em "Open Sans", Arial, Helvetica, Geneva, sans-serif; text-transform: uppercase; text-align: left; border-top: 3px solid rgba(0, 0, 0, 0); /*margin: 0;*/ padding: 0; padding-top: 5px; width: min-content; width: -moz-min-content; width: -webkit-min-content; } .nav > li > a:hover { border-top: 3px solid #000000; padding-top: 5px; background-color: rgba(255, 255, 255, 0); } .nav > li:before { content: ""; position: absolute; width: 6px; height: 6px; background: red; top: 50%; margin-top: -2px; right: -3px; z-index: 1; border-radius: 6px; margin-right: 35%; } .nav > li:last-child:before { content: none; } @media (min-width: 768px) { .nav-justified>li { /*display: table-cell; width: initial;*/ } }