ajuda position:fixed na div

.sys

Power Member
boas pipz,

estou a fazer um projeto e estou com um problema, tenho tudo como quero mas queria a div "extend-menu" sempre fixa no mesmo sitio só que se usar position:fixed ela desaparece e ja tentei de tudo mas nao encontro soluçao.
alguem milagroso por ai ?
se precisarem de fazer scroll insiram mais divs de "information-content"
estou com o bootstrap

HTML:

Código:
<div class=".col-xs-12 .col-sm-12 .col-md-12 .col-lg-12" >
        <div>
        <nav class="navbar navbar-fixed-top navbar-default">
            <div class="container-fluid">
                <div class="navbar-header">
                    <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#collapse-menu" aria-expanded="false">
                        <span class="icon-bar"></span>
                        <span class="icon-bar"></span>
                        <span class="icon-bar"></span>
                    </button>
                    <div class="navbar-brand" >Onseguros</div>
                </div>

                <div class="collapse navbar-collapse" id="collapse-menu">
                    <ul class="nav navbar-nav navbar-right links">
                        <li><a href="">Sair</a></li>
                    </ul>
                </div>
            </div>
        </nav></div>
   
        <div class="extend-menu"></div>
   
        <div class="main container-fluid ">
            <div class="information-content">
                Propostas Content;
            </div>
            <div class="information-content">
                Propostas Content;
            </div>
            <div class="information-content">
                Propostas Content;
            </div><div class="information-content">
                Propostas Content;
            </div>
            <div class="information-content">
                Propostas Content;
            </div>
            <div class="information-content">
                Propostas Content;
            </div>
            <div class="information-content">
                Propostas Content;
            </div>
            <div class="information-content">
                Propostas Content;
            </div>
        </div>


CSS:

Código:
body{
    background-color:#dadfe1;
    font-family: 'Roboto Mono' ;
    font-size:24px;
}


.navbar-default{
    background-color:#446cb3;
    margin-top:-1px;
    border-radius:0px;
    border:none;
}

.navbar-default .navbar-brand{
    color: #fff;
    font-size:30px;
    font-family:'Roboto Mono' ;
    font-weight:bold;
}

.navbar-default .navbar-brand:hover{
    color: #fff;
    font-size:30px;
    font-family:'Roboto Mono' ;
    font-weight:bold;
}

.navbar .container-fluid {
    max-width:1200px;
}

.navbar-default .navbar-nav > li > a:hover, .navbar-default .navbar-nav > li > a:focus{
    color: #fff;
    font-size:18px;
    font-family:'Roboto Mono' ;
}

.navbar-default .navbar-nav > li > a, .navbar-default .navbar-nav > li > a{
    color: #fff;
    font-size:18px;
    font-family:'Roboto Mono' ;
}

.navbar-default div.navbar-collapse{
    border-top:none;
    box-shadow:none;
}

.navbar-default .navbar-toggle{
  border-color: #446cb3;
}

.navbar-default .navbar-toggle .icon-bar{
  background-color:#fff;
}

.navbar-default .navbar-toggle:hover,
.navbar-default .navbar-toggle:focus{
  background-color: #446cb3;
}

.extend-menu{
    height:230px;
    background-color:#4183d7;

}

.main{
    max-width:1000px;
    min-width:380px;
    font-size:16px;
    font-family:'Roboto Mono' ;
}

.main .information-content{
    width:100%;
    position: relative;
    min-height:100px;
    background-color:#fff;
    margin-top:-70px;
    padding:50px;
    margin-bottom:90px;
}


Obrigado :)
 
Boas!

adiciona um "width" e o "position:fixed" no css, e experimenta:


.extend-menu{

height:230px;
background-color:#4183d7;

position:fixed;
width:100%;

}
 
Back
Topo