problem sa navigacijom Bootstrap

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 :dash:



ovako nesto sam hteo

http://www.bootply.com/95797
primer1.jpg
primer2.jpg

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*/
 

Back
Top