gost 199228
Veoma poznat
- Poruka
- 13.877
Zdravo, krenuo sam da ucim bootstrap, odradio sam manje vise sve kako treba, ali je zapelo sa navigacijom. Problem je u tome sto na vrhu strane imam deo u kojem stoji br telefona i radno vreme, a tek ispod toga krece navigacija. Sad kad skrolujem, i navigacija se pomera ali je udaljena od vrha ekrana za 70px (koliki je u div iznad navigacije - u kojem je br telefona). Cilj mi je da bude fiksan dok skrolujem i ne dodjem do njega a onda da se zalepi. Probao sam i sa afix-om, ali ne vredi
ovako nesto sam hteo
http://www.bootply.com/95797

ovako nesto sam hteo
http://www.bootply.com/95797
Kod:
<div class="container">
<div class="nav-sadrzaj col-md-6 col-sm-6">
<h5><span class="glyphicon glyphicon-earphone"></span> Kontakt telefon :</h5>
<h4>034/320-333</h4>
</div>
<div class="nav-sadrzaj col-md-6 col-sm-6">
<div class="pull-right">
<h5 class="text-right">Ponedeljak - Petak :</h5>
<h4 class="text-right">10 - 18h</h4>
</div>
<!--pull-right-->
</div>
</div>
<!--container-->
<nav class="navbar navbar-default navbar-static-top" data-spy="affix" data-offset-top="43" role="navigation">
<div class="container">
<div class="navbar-header ">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#collapse">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>
<!-- navbar-header -->
<div class="collapse navbar-collapse" id="collapse">
<ul class="nav navbar-nav">
<li class="active"><a href="#featured">POČETNA</a></li>
<li><a href="#onama">O NAMA</a></li>
<li><a href="#usluge">USLUGE</a></li>
<li>
<a href="#" class="navlink hidden-xs hidden-sm"><img src="images/logo.png" style="margin-bottom: -150px;" class="img-responsive" </li>
<li><a href="#nastim">NAŠ TIM</a></li>
<li><a href="#galerija">GALERIJA</a></li>
<li><a href="#kontakt">KONTAKT</a></li>
</ul>
</div>
<!-- collapse navbar-collapse -->
</div>
<!--container-->
</nav>
Kod:
/*Navigation*/.nav-bgr {
background: url("../images/bgrimg.jpg") center center no-repeat;
width:100%;
height: 960px;
background-size: cover;
}
.navbar {
border-radius: 0;
}
.navbar-default {
background-color: rgba(0, 0, 0, 0.5) !important;
border: none;
box-shadow: 0 5px 3px #000;
margin-bottom: 20px;
border-bottom: 2px solid #EB1C22;
width: 100%;
z-index: 100;
}
.navbar.navbar-default img {
width: 120px;
height: 150px;
}
.nav-sadrzaj h5,
h4 {
display: inline-block;
color: white;
font-family: roboto;
text-shadow: 1px 1px black;
font-size: 140%;
}
.navbar-nav {
width: 100%;
text-align: center;
}
.navbar-nav > li {
float: none;
display: inline-block;
}
.navbar-default .navbar-nav > li > a {
font-weight: 200;
font-size: 18px;
color: white;
font-family: roboto;
font-weight: 300;
}
.navbar-default .navbar-nav > .active > a,
.navbar-default .navbar-nav > .active > a:hover,
.navbar-default .navbar-nav > .active > a:focus {
background: rgba(0, 0, 0, .6);
color: white;
}
.navbar-default .navbar-nav > li > a:hover,
.navbar-default .navbar-nav > li > a:focus {
background: rgba(0, 0, 0, .6);
color: #ABC5EA;
}
.navbar-default .navbar-nav > li > a:hover,
.navbar-default .navbar-nav > li > a.navlink hidden-xs hidden-sm:focus {
background: rgba(0, 0, 0, .6);
}
/*end navigation*/