<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="nav-color"> <div class="nav-wrap"> <div id="lang-selector"> <a href="/naslovna/hr" class="active">HR</a>  |  <a href="/naslovna/en" class="">ENG</a> </div> <nav class="navbar navbar-default navbar-fixed-top"> <div class="container-fluid"> <div class="navbar-header"> <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" 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> <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1"> <ul class="nav navbar-nav"> <li class="active"><a href="../home/home.php"><span class="dot hidden-xs"></span><span class="text">NASLOVNA</span></a></li> <li class=""><a href="../project/project.php"><span class="dot hidden-xs"></span><span class="text">PROJEKT</span></a></li> <li class=""><a href="../blog.php"><span class="dot hidden-xs"></span><span class="text">BLOG</a></li> <li class="logo hidden-xs"><a href="#intro" class="smoothScroll"><img src="https://ditz.me/img/tech/html5.png"></a></li> <li class=""><a href="../gallery/gallery.php"><span class="dot hidden-xs"></span><span class="text">GALERIJA</span></a></li> <li class=""><a href="../partners/partners.php"><span class="dot hidden-xs"></span><span class="text">PARTNERI</span></a></li> <li class=""><a href="../press/press.php"><span class="dot hidden-xs"></span><span class="text">PRESS</span></a></li> </ul> </div> </div> </nav> </div> </div>

.nav-color{ background-color: #EAEAEA; position: fixed; width: 100%; z-index: 9990; } .nav-wrap{ max-width: 1280px; margin: 0 auto; position: relative; } ul.nav li:nth-child(n) { width: 14%; margin-top: 42px; text-align: center; } .navbar li>a>.dot:before{ content: '\2022'; max-height: 10px; font-size: 22px; color: #000000; } .navbar .navbar-nav>.active>a>.dot:before{ color: #ED5A24; } .navbar-default .navbar-nav>li>a:focus, .navbar-default .navbar-nav>li>a:hover { color: #ED5A24; background-color: transparent; } ul.nav li:nth-child(4) { width: 16%; text-align: center; margin-top: 0px; } .navbar .dot{ border: none; top: -10px; position: relative; } .navbar-default .navbar-nav>.active>a, .navbar-default .navbar-nav>.active>a:focus, .navbar-default .navbar-nav>.active>a:hover{ background-color: transparent; color: #ED5A24; } .navbar { max-width: 1280px; height: 140px; position:relative; margin: 0 auto; font-size: 11px; font-weight: bold; text-transform: uppercase; } .navbar .nav { float: none; display: block; margin: 0 auto; } .nav>li>a>img { max-width: 100px; } .navbar-default .navbar-nav>.active>a>span.text { border-bottom: 2px solid #ED5A24; padding-bottom: 5px; } .navbar-default { background-color: #EAEAEA; border-color: #EAEAEA; } @media (min-width: 768px) { .navbar-nav > li > a { padding-top: 20px; padding-bottom: 20px; } } #lang-selector { position: absolute; top: 10px; right: 25px; z-index: 9999; font-weight: bold; font-size: 10px; } #lang-selector a{ color: #4F5759; } #lang-selector a.active{ color: #ED5A24; } @media (max-device-width: 480px) and (orientation: landscape) { .navbar-fixed-bottom .navbar-collapse, .navbar-fixed-top .navbar-collapse { max-height: 100vh; } } @media (max-width: 767px) { #lang-selector { position: absolute; top: 10px; left: 25px; z-index: 9999; font-weight: bold; font-size: 1.5em; display: table; } .navbar{ height: 50px !important; } .navbar-collapse{ background-color: #4F5759; padding-bottom: 20px; } ul.nav li:nth-child(n) { margin-top: 13px !important; text-align: center; width: 100%; font-size: 1.5em; } .navbar-default .navbar-nav>li>a { color: #EAEAEA; } .nav-color{ height: 50px !important; } .container-menu-offset{ padding-top: 50px !important; } }