2016-07-29 45 views
2

Ich habe Probleme mit der Positionierung der linken Navigationsleiste. Wenn Sie unten auf dem Vollbildmodus den Ausschnitt ausführen und versuchen, die Größe des Browsers zu ändern, sehen Sie, dass die linke Navigationsleiste nicht am oberen Rand der Seite fixiert ist.Bootstrap navbar (linkes Menü) nicht richtig oben ausgerichtet

Auch ich Header (Logo und Dropdown-Menüs) deckt nicht die ganze Seite.

Vielleicht habe ich etwas verpasst?

Jede Hilfe wird sehr geschätzt!

Danke, die Zeit diesen Beitrag verschwendet zu sehen und half :)

function htmlbodyHeightUpdate(){ 
 
\t \t var height3 = $(window).height() 
 
\t \t var height1 = $('.nav').height()+50 
 
\t \t height2 = $('.main').height() 
 
\t \t if(height2 > height3){ 
 
\t \t \t $('html').height(Math.max(height1,height3,height2)+10); 
 
\t \t \t $('body').height(Math.max(height1,height3,height2)+10); 
 
\t \t } 
 
\t \t else 
 
\t \t { 
 
\t \t \t $('html').height(Math.max(height1,height3,height2)); 
 
\t \t \t $('body').height(Math.max(height1,height3,height2)); 
 
\t \t } 
 
\t \t 
 
\t } 
 
\t $(document).ready(function() { 
 
\t \t htmlbodyHeightUpdate() 
 
\t \t $(window).resize(function() { 
 
\t \t \t htmlbodyHeightUpdate() 
 
\t \t }); 
 
\t \t $(window).scroll(function() { 
 
\t \t \t height2 = $('.main').height() 
 
    \t \t \t htmlbodyHeightUpdate() 
 
\t \t }); 
 
\t });
header.navbar+nav.navbar{ 
 
    /* margin-top: 20px;same margin-bottom .navbar */ 
 
    } 
 
    .navbar.navbar-default.navbar-fixed-top{ 
 
    margin-top: 50px; 
 
    } 
 
    .sidebar.navbar-fixed-top{ 
 
    margin-top: 100px; 
 
    } 
 

 
    @media (min-width: 768px) and (max-width: 998px){ 
 
     .navbar.navbar-default.navbar-fixed-top{ 
 
     margin-top: 100px; 
 
     } 
 
     .sidebar.navbar-fixed-top{ 
 
     margin-top: 150px; 
 
     } 
 
    } 
 

 
    /* Custom navbar default: global*/ 
 

 
    .navbar.navbar-default{ 
 
    background-color: #f8f8f8; 
 
    border-color: #e7e7e7; 
 
    margin: 0; 
 
    border-radius: 0; 
 
    } 
 
    .navbar.navbar-default .navbar-brand { 
 
    color: #666; 
 
    text-shadow: none; 
 
    min-width: 150px; 
 
    } 
 
    .navbar.navbar-default .navbar-nav > li > a { 
 
    color: #666; 
 
    text-shadow: none; 
 
    } 
 
    .navbar.navbar-default .navbar-nav > li > a { 
 
    color: #666; 
 
    text-shadow: none; 
 
    } 
 
    .navbar.navbar-default .navbar-nav > li > a:hover{ 
 
    color: #acc47f; 
 
    } 
 
    .navbar.navbar-default .navbar-nav > .active > a{ 
 
    color: #fff; 
 
    background-color: #acc47f; 
 
    } 
 
    .navbar.navbar-default .navbar-nav > .active > a:hover{ 
 
    color: #608224; 
 
    background-color: #acc47f; 
 
    } 
 
    .navbar.navbar-default .caret { 
 
    border-top-color: #ccc; 
 
    border-bottom-color: #ccc; 
 
    } 
 
    .navbar.navbar-default .caret:hover { 
 
    border-top-color: #333; 
 
    border-bottom-color: #333; 
 
    } 
 

 

 
/* Custom sidebar menu */ 
 

 
/*Remove rounded coners*/ 
 

 
    nav.sidebar.navbar { 
 
    border-radius: 0px; 
 
    } 
 

 
    nav.sidebar, .main{ 
 
    -webkit-transition: margin 200ms ease-out; 
 
     -moz-transition: margin 200ms ease-out; 
 
     -o-transition: margin 200ms ease-out; 
 
     transition: margin 200ms ease-out; 
 
    } 
 

 
    /* Add gap to nav and right windows.*/ 
 
    .main{ 
 
    padding: 10px 10px 0 10px; 
 
    } 
 

 
    /* .....NavBar: Icon only with coloring/layout.....*/ 
 

 
    /*small/medium side display*/ 
 
    @media (min-width: 768px) { 
 

 
    /*Allow main to be next to Nav*/ 
 
    .main{ 
 
     position: absolute; 
 
     width: calc(100% - 40px); /*keeps 100% minus nav size*/ 
 
     margin-left: 40px; 
 
     float: right; 
 
    } 
 

 
    /*lets nav bar to be showed on mouseover*/ 
 
    nav.sidebar:hover + .main{ 
 
     margin-left: 200px; 
 
    } 
 

 
    /*Center Brand*/ 
 
    nav.sidebar.navbar.sidebar>.container .navbar-brand, .navbar>.container-fluid .navbar-brand { 
 
     margin-left: 0px; 
 
    } 
 
    /*Center Brand*/ 
 
    nav.sidebar .navbar-brand, nav.sidebar .navbar-header{ 
 
     text-align: center; 
 
     width: 100%; 
 
     margin-left: 0px; 
 
    } 
 

 
    /*Center Icons*/ 
 
    nav.sidebar a{ 
 
     padding-right: 13px; 
 
      min-width: 100px; 
 
    } 
 

 
    /*custom sidebar nav*/ 
 
     nav.sidebar ul.nav.navbar-nav{ 
 
      margin: 0; 
 
     } 
 
     nav.sidebar.navbar-inverse .navbar-nav .open .dropdown-menu>li>a { 
 
      color: white; 
 
     } 
 

 
    /*adds border top to first nav box */ 
 
    nav.sidebar .navbar-nav > li:first-child{ 
 
     border-top: 1px #e5e5e5 solid; 
 
    } 
 

 
    /*adds border to bottom nav boxes*/ 
 
    nav.sidebar .navbar-nav > li{ 
 
     border-bottom: 1px #e5e5e5 solid; 
 
    } 
 
    /*adds background on hover*/ 
 
    nav.sidebar .navbar-nav > li:hover{ 
 
     color: #fff; 
 
      background-color: #43600E; 
 
    } 
 
    /*removes border last element*/ 
 
    nav.sidebar .navbar-nav > li.last{ 
 
     border-bottom: none; 
 
    } 
 

 
    /* Colors/style dropdown box*/ 
 
    nav.sidebar .navbar-nav .open .dropdown-menu { 
 
     position: static; 
 
     float: none; 
 
     width: auto; 
 
     margin-top: 0; 
 
     background-color: transparent; 
 
     border: 0; 
 
     -webkit-box-shadow: none; 
 
     box-shadow: none; 
 
    } 
 

 
    /*allows nav box to use 100% width*/ 
 
    nav.sidebar .navbar-collapse, nav.sidebar .container-fluid{ 
 
     padding: 0 0px 0 0px; 
 
    } 
 

 
    /*colors dropdown box text */ 
 
    .navbar-inverse .navbar-nav .open .dropdown-menu>li>a { 
 
     color: #777; 
 
    } 
 

 
/*O quanto o menu irá esconder á esquerda*/ 
 
    /*gives sidebar width/height*/ 
 
    nav.sidebar{ 
 
     width: 200px; 
 
     height: 100%; 
 
     margin-left: -270px; 
 
     float: left; 
 
     z-index: 8000; 
 
     margin-bottom: 0px; 
 
    } 
 

 
    /*give sidebar 100% width;*/ 
 
    nav.sidebar li { 
 
     width: 100%; 
 
    } 
 

 
    /* Move nav to full on mouse over*/ 
 
    nav.sidebar:hover{ 
 
     margin-left: 0px; 
 
    } 
 
    /*for hiden things when navbar hidden*/ 
 
    .forAnimate{ 
 
     opacity: 0; 
 
    } 
 
    } 
 

 
    /* .....NavBar: Fully showing nav bar..... */ 
 

 
    @media (min-width: 1330px) { 
 

 
/*  Allow main to be next to Nav 
 
    .main{ 
 
     width: calc(100% - 200px); keeps 100% minus nav size 
 
     margin-left: 200px; 
 
    } 
 

 
    Show all nav 
 
    nav.sidebar{ 
 
     margin-left: 0px; 
 
     float: left; 
 
    } 
 
    Show hidden items on nav 
 
    nav.sidebar .forAnimate{ 
 
     opacity: 1; 
 
    } */ 
 
    } 
 

 
    nav.sidebar .navbar-nav .open .dropdown-menu>li>a:hover, nav.sidebar .navbar-nav .open .dropdown-menu>li>a:focus { 
 
    color: #CCC; 
 
    background-color: transparent; 
 
    } 
 

 
    nav:hover .forAnimate{ 
 
    opacity: 1; 
 
    } 
 
    
 
    
 
    /*---- FIM SLIDE MENU*/ 
 
    
 
    .nav-side-menu { 
 
    overflow: auto; 
 
    font-family: verdana; 
 
    font-size: 12px; 
 
    font-weight: 200; 
 
    background-color: #2e353d; 
 
    position: fixed; 
 
    top: 0px; 
 
    width: 300px; 
 
    height: 100%; 
 
    color: #e1ffff; 
 
} 
 
.nav-side-menu .brand { 
 
    background-color: #23282e; 
 
    line-height: 50px; 
 
    display: block; 
 
    text-align: center; 
 
    font-size: 14px; 
 
} 
 
.nav-side-menu .toggle-btn { 
 
    display: none; 
 
} 
 
.nav-side-menu ul, 
 
.nav-side-menu li { 
 
    list-style: none; 
 
    padding: 0px; 
 
    margin: 0px; 
 
    line-height: 35px; 
 
    cursor: pointer; 
 
    /*  
 
    .collapsed{ 
 
     .arrow:before{ 
 
       font-family: FontAwesome; 
 
       content: "\f053"; 
 
       display: inline-block; 
 
       padding-left:10px; 
 
       padding-right: 10px; 
 
       vertical-align: middle; 
 
       float:right; 
 
      } 
 
    } 
 
*/ 
 
} 
 
.nav-side-menu ul :not(collapsed) .arrow:before, 
 
.nav-side-menu li :not(collapsed) .arrow:before { 
 
    font-family: FontAwesome; 
 
    content: "\f078"; 
 
    display: inline-block; 
 
    padding-left: 10px; 
 
    padding-right: 10px; 
 
    vertical-align: middle; 
 
    float: right; 
 
} 
 
.nav-side-menu ul .active, 
 
.nav-side-menu li .active { 
 
    border-left: 3px solid #d19b3d; 
 
    background-color: #4f5b69; 
 
} 
 
.nav-side-menu ul .sub-menu li.active, 
 
.nav-side-menu li .sub-menu li.active { 
 
    color: #d19b3d; 
 
} 
 
.nav-side-menu ul .sub-menu li.active a, 
 
.nav-side-menu li .sub-menu li.active a { 
 
    color: #d19b3d; 
 
} 
 
.nav-side-menu ul .sub-menu li, 
 
.nav-side-menu li .sub-menu li { 
 
    background-color: #181c20; 
 
    border: none; 
 
    line-height: 28px; 
 
    border-bottom: 1px solid #23282e; 
 
    margin-left: 0px; 
 
} 
 
.nav-side-menu ul .sub-menu li:hover, 
 
.nav-side-menu li .sub-menu li:hover { 
 
    background-color: #020203; 
 
} 
 
.nav-side-menu ul .sub-menu li:before, 
 
.nav-side-menu li .sub-menu li:before { 
 
    font-family: FontAwesome; 
 
    content: "\f105"; 
 
    display: inline-block; 
 
    padding-left: 10px; 
 
    padding-right: 10px; 
 
    vertical-align: middle; 
 
} 
 
.nav-side-menu li { 
 
    padding-left: 0px; 
 
    border-left: 3px solid #2e353d; 
 
    border-bottom: 1px solid #23282e; 
 
} 
 
.nav-side-menu li a { 
 
    text-decoration: none; 
 
    color: #e1ffff; 
 
} 
 
.nav-side-menu li a i { 
 
    padding-left: 10px; 
 
    width: 20px; 
 
    padding-right: 20px; 
 
} 
 
.nav-side-menu li:hover { 
 
    border-left: 3px solid #d19b3d; 
 
    background-color: #4f5b69; 
 
    -webkit-transition: all 1s ease; 
 
    -moz-transition: all 1s ease; 
 
    -o-transition: all 1s ease; 
 
    -ms-transition: all 1s ease; 
 
    transition: all 1s ease; 
 
} 
 
@media (max-width: 767px) { 
 
    .nav-side-menu { 
 
    position: relative; 
 
    width: 100%; 
 
    margin-bottom: 10px; 
 
    } 
 
    .nav-side-menu .toggle-btn { 
 
    display: block; 
 
    cursor: pointer; 
 
    position: absolute; 
 
    right: 10px; 
 
    top: 10px; 
 
    z-index: 10 !important; 
 
    padding: 3px; 
 
    background-color: #ffffff; 
 
    color: #000; 
 
    width: 40px; 
 
    text-align: center; 
 
    } 
 
    .brand { 
 
    text-align: left !important; 
 
    font-size: 22px; 
 
    padding-left: 20px; 
 
    line-height: 50px !important; 
 
    } 
 
} 
 
@media (min-width: 767px) { 
 
    .nav-side-menu .menu-list .menu-content { 
 
    display: block; 
 
    } 
 
} 
 
body { 
 
    margin: 0px; 
 
    padding: 0px; 
 
} 
 

 
nav.navbar-findcond { background: #fff; border-color: #ccc; box-shadow: 0 0 2px 0 #ccc; } 
 
nav.navbar-findcond a { color: #f14444; } 
 
nav.navbar-findcond ul.navbar-nav a { color: #f14444; border-style: solid; border-width: 0 0 2px 0; border-color: #fff; } 
 
nav.navbar-findcond ul.navbar-nav a:hover, 
 
nav.navbar-findcond ul.navbar-nav a:visited, 
 
nav.navbar-findcond ul.navbar-nav a:focus, 
 
nav.navbar-findcond ul.navbar-nav a:active { background: #fff; } 
 
nav.navbar-findcond ul.navbar-nav a:hover { border-color: #f14444; } 
 
nav.navbar-findcond li.divider { background: #ccc; } 
 
nav.navbar-findcond button.navbar-toggle { background: #f14444; border-radius: 2px; } 
 
nav.navbar-findcond button.navbar-toggle:hover { background: #999; } 
 
nav.navbar-findcond button.navbar-toggle > span.icon-bar { background: #fff; } 
 
nav.navbar-findcond ul.dropdown-menu { border: 0; background: #fff; border-radius: 4px; margin: 4px 0; box-shadow: 0 0 4px 0 #ccc; } 
 
nav.navbar-findcond ul.dropdown-menu > li > a { color: #444; } 
 
nav.navbar-findcond ul.dropdown-menu > li > a:hover { background: #f14444; color: #fff; } 
 
nav.navbar-findcond span.badge { background: #f14444; font-weight: normal; font-size: 11px; margin: 0 4px; } 
 
nav.navbar-findcond span.badge.new { background: rgba(255, 0, 0, 0.8); color: #fff; }
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css" rel="stylesheet"/> 
 
<script src="https://code.jquery.com/jquery-3.1.0.js"></script> 
 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> 
 
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/> 
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<html><head><title>test</title> 
 
\t <link type="text/css" rel="stylesheet" media="all" href="bootstrap.min.css" /> 
 
\t <link type="text/css" rel="stylesheet" media="all" href="nabs.css" /> 
 
\t <link type="text/css" rel="stylesheet" media="all" href="font-awesome.min.css" /> 
 
    </head> 
 
    <body class="sidebar-mini"> 
 
<div class="main"> 
 
<aside> 
 
    <nav class="navbar navbar-inverse sidebar navbar-fixed-top" role="navigation"> 
 

 
\t <div class="nav-side-menu"> 
 
\t  <div class="brand">logo</div> 
 
\t  <i class="fa fa-bars fa-2x toggle-btn" data-toggle="collapse" data-target="#menu-content"></i> 
 
      <div class="menu-list"> 
 

 
\t \t <ul id="menu-content" class="menu-content collapse out"> 
 
\t \t  <li> 
 
\t \t \t <a href="#"> 
 
\t \t \t  <i class="fa fa-dashboard fa-lg"></i> Dashboard 
 
\t \t \t </a> 
 
\t \t  </li> 
 
\t \t  <li data-toggle="collapse" data-target="#1" class="collapsed"> 
 
\t \t \t <a href="#"><i class="fa fa-gift fa-lg"></i> Processing </a></li> 
 
\t \t \t <li data-toggle="collapse" data-target="#4" class="collapsed"><a href="#"><i class="fa fa-gift fa-lg"></i> Payments </a></li> 
 
\t \t \t </ul> 
 
\t \t  </div> 
 
\t </div> 
 
    </nav> 
 
</aside> 
 
<nav class="navbar navbar-findcond navbar-fixed-top"> 
 
    <div class="container"> 
 
\t \t <div class="navbar-header"> 
 
\t \t \t <a class="navbar-brand" href="#">Logo</a> 
 
\t \t </div> 
 
\t \t <div class="collapse navbar-collapse" id="navbar"> 
 
\t \t \t <ul class="nav navbar-nav navbar-right"> 
 
\t \t \t \t <li class="dropdown"> 
 
\t \t \t \t \t <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false"><i class="fa fa-fw fa-bell-o"></i> Invites <span class="badge">0</span></a> 
 
\t \t \t \t \t <ul class="dropdown-menu" role="menu"> 
 
\t \t \t \t \t \t <li><a href="#"><i class="fa fa-fw fa-tag"></i> new <span class="badge">Video</span> video</a></li> 
 
\t \t \t \t \t \t <li><a href="#"><i class="fa fa-fw fa-thumbs-o-up"></i> <span class="badge">Music</span> liked</a></li> 
 
\t \t \t \t \t \t 
 
\t \t \t \t \t </ul> 
 
\t \t \t \t </li> 
 
\t \t \t \t <li class="active"><a href="#">Main <span class="sr-only">(current)</span></a></li> 
 
\t \t \t \t <li class="dropdown"> 
 
\t \t \t \t \t <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false">Admin <span class="caret"></span></a> 
 
\t \t \t \t \t <ul class="dropdown-menu" role="menu"> 
 
\t \t \t \t \t \t <li><a href="#">test1</a></li> 
 
\t \t \t \t \t \t <li class="divider"></li> 
 
\t \t \t \t \t \t <li><a href="#">test2</a></li> 
 
\t \t \t \t \t </ul> 
 
\t \t \t \t </li> 
 
\t \t \t </ul> 
 
\t \t </div> 
 
\t </div> 
 
</nav> 
 

 

 

 

 

 

 

 

 
<section class="content-header"> 
 
    <h1> 
 
\t <small>hi</small> 
 
    </h1> 
 
    <ol class="breadcrumb"> 
 
\t <li><a href="#"><i class="fa fa-dashboard"></i> Home</a></li> 
 
\t <li class="active">Dashboard</li> 
 
    </ol> 
 
</section><section class="content"> 
 
    <div class="row"> 
 

 
     <div class="col-md-12"> 
 
\t hi there</div></div> 
 
</section> 
 
<table border="0" style="border: 1px; border-style: dotted;" cellspacing="0" cellpadding="0" width="100%"> 
 
    <tr bgcolor="#D5E7F7"> 
 
\t <td width="100%"> 
 

 
\t </td> 
 
    </tr> 
 
</table> 
 
</div>

Antwort

0

Der schwarze navbar hat eine Sidebar Klasse die Funktionalität des navbar zu brechen scheint blind.

PS: Wenn Sie dies beheben, wird die schwarze Navigationsleiste am oberen Bildschirmrand fixiert und von der weißen Navigationsleiste überlagert. Wenn Sie möchten, dass die schwarze Instanz Präzedenzfälle aufweist, müssen Sie den Z-Index aufheben.

+0

Versuchte aber kein Erfolg :( –

+0

Dann müssen Sie mehr Informationen zur Verfügung stellen, weil ich bin nicht sicher, dass ich das gleiche Ergebnis sehe, wie Sie sind, Einzige Sache, die fehl am Platz war, war das schwarze nav auf Schirmen 768px oder weniger Können Sie einen Screenshot machen, der das Problem veranschaulicht? In welchem ​​Browser sehen Sie diesen Fehler? –

+0

Bitte schauen Sie auf diesen Link. Https://postimg.org/image/ctjmvfap3/ –

Verwandte Themen