"Center image menu"
Bootstrap 3.3.0 Snippet by tabaktoni

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
<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>
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
.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{
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
1
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

Related: See More


Questions / Comments: