Text über Navbar

Ich habe eine vertikale Navbar, die als ein Menü in meinem asp.net MVC5-Projekt dient. In einem CSS-Stylesheet habe ich festgelegt, dass es position:fixed; ist, um es ständig sehen zu können. Auf der anderen Seite meiner Webseite habe ich eine Teilansicht, die sich je nach Menüauswahl ändert. Mein Problem ist, dass wenn die Teilansicht zu groß ist, wenn ich horizontal scrolle, um zu sehen, was fehlt, der Text mit der Navigationsleiste überlappt.Text über Navbar

Hier ist ein Beispiel aus meiner navbar in einer Datei _Menu.cshtml genannt:

<div class="sidebar-nav"> 
    <div class="navbar navbar-default" role="navigation"> 
     <div class="navbar-header"> 
      <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".sidebar-navbar-collapse"> 
       <span class="sr-only">Toggle navigation</span> 
       <span class="icon-bar"></span> 
       <span class="icon-bar"></span> 
       <span class="icon-bar"></span> 
      </button> 
      <span class="visible-xs navbar-brand">Sidebar menu</span> 
     </div> 
     <div class="navbar-collapse collapse sidebar-navbar-collapse"> 
      <ul class="nav navbar-nav" id="sidenav01"> 
       <li class="active"> 
        <a href="#" data-toggle="collapse" data-target="#toggleDoc" data-parent="#sidenav01" class="collapsed"> 
         <span class="glyphicon glyphicon-folder-close"></span> Documentation <span class="caret pull-right"></span> 
        </a> 
        <div class="collapse" id="toggleDoc" style="height: 0px;"> 
         <ul class="nav nav-list"> 
          <li><a href="#">Documentation 1.1</a></li> 
          <li><a href="#">Documentation 1.2</a></li> 
          <li><a href="#">Documentation 1.3</a></li> 
         </ul> 
        </div> 
       </li> 
      </ul> 
     </div> 
    </div> 
</div>

Im _Layout.cshtml, ich habe folgend innerhalb von <body> tag:

<div class="container-fluid"> 
    <div class="row affix-row"> 
     <div class="col-sm-4 col-md-4 col-lg-4 col-xl-4 affix-sidebar"> 
       @Html.Partial("~/Views/PartialViews/_Menu.cshtml") 
     </div> 
     <div class="col-sm-8 col-md-8 col-lg-8 col-xl-8"> 
       @RenderBody() 
     </div> 
    </div> 
</div>

Schließlich wird die CSS:

.sidebar-nav{ 
    position: fixed; //Center works but then my navbar is not fixed anymore! 
}

Ich benutze Bootstrap zu trennen Beide Teile meiner Seite, also das Menü auf der linken Seite, und der Körper (oder Teilansichten der Menülinks) auf der rechten Seite. Ich weiß, dass die Navbar position anders wird das Problem lösen. Aber ich hätte gerne eine feste Navbar, die würde nicht horizontal fixiert sein ODER haben den Text auf der rechten Seite meiner Seite gehen hinter der Navbar. Irgendwelche Ideen, wie man das macht?

Hier ist, wie es aussieht (man beachte die ipadress nicht zeigen, so Seite ist nicht wirklich gefüllt, und bitte bewundere meine zeichnerischen Fähigkeiten: p)

Quelle

2017-07-20 Flexabust Bergson

Haben Sie versucht, Z-Index mit Ihrem Inhalt zu "Schicht" Ihr Menü über? –

Kannst du eine Geige machen? –

@KanzantsinArlouski Nein Ich werde es überprüfen, danke, dann habe ich jsfiddle, wenn es nicht funktioniert :) –

Sie mögen vielleicht mit einem Z-Index, um zu versuchen oder verwenden Sie ein Füller-Div, das als Abstandhalter zwischen Ihrem Inhalt und Ihrem Menü fungiert. Beispiel unten.

.sidebar-nav{ 
 
    position: fixed; //Center works but then my navbar is not fixed anymore! 
 
    width: 100%; 
 
    z-index: 1; 
 
} 
 
#filler { 
 
    display: block; 
 
    height: 50px; 
 
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/> 
 
<div class="sidebar-nav"> 
 
    <div class="navbar navbar-default" role="navigation"> 
 
     <div class="navbar-header"> 
 
      <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".sidebar-navbar-collapse"> 
 
       <span class="sr-only">Toggle navigation</span> 
 
       <span class="icon-bar"></span> 
 
       <span class="icon-bar"></span> 
 
       <span class="icon-bar"></span> 
 
      </button> 
 
      <span class="visible-xs navbar-brand">Sidebar menu</span> 
 
     </div> 
 
     <div class="navbar-collapse collapse sidebar-navbar-collapse"> 
 
      <ul class="nav navbar-nav" id="sidenav01"> 
 
       <li class="active"> 
 
        <a href="#" data-toggle="collapse" data-target="#toggleDoc" data-parent="#sidenav01" class="collapsed"> 
 
         <span class="glyphicon glyphicon-folder-close"></span> Documentation <span class="caret pull-right"></span> 
 
        </a> 
 
        <div class="collapse" id="toggleDoc" style="height: 0px;"> 
 
         <ul class="nav nav-list"> 
 
          <li><a href="#">Documentation 1.1</a></li> 
 
          <li><a href="#">Documentation 1.2</a></li> 
 
          <li><a href="#">Documentation 1.3</a></li> 
 
         </ul> 
 
        </div> 
 
       </li> 
 
      </ul> 
 
     </div> 
 
    </div> 
 
</div> 
 
<div class="container-fluid"> 
 
    <div class="row affix-row"> 
 
     <div id="filler"></div> 
 
     <div iclass="col-sm-4 col-md-4 col-lg-4 col-xl-4 affix-sidebar"> 
 
       <!-- @Html.Partial("~/Views/PartialViews/_Menu.cshtml") --> 
 
       <p>Bunchotext</p> 
 
     </div> 
 
     <div class="col-sm-8 col-md-8 col-lg-8 col-xl-8"> 
 
       <!-- @RenderBody() --> 
 
       <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam vitae semper tortor, non efficitur nulla. Pellentesque elementum augue arcu, quis fermentum elit vestibulum eu. Curabitur ornare volutpat turpis, vitae pellentesque ex commodo lacinia. Sed venenatis dui nisi, sed feugiat dui hendrerit a. Nullam rutrum libero at mauris pellentesque bibendum. Interdum et malesuada fames ac ante ipsum primis in faucibus. Vestibulum volutpat efficitur arcu, nec eleifend ante consectetur vitae. 
 

 
In hac habitasse platea dictumst. Ut ornare, nisl non pharetra ultricies, arcu sapien porttitor ligula, vitae pellentesque diam tellus vitae urna. Sed eget tempus orci, sit amet egestas nisl. Nam sed aliquet ex, vel consequat magna. Aliquam enim diam, sollicitudin ut metus ut, accumsan dictum nunc. Phasellus dictum ultrices leo, tempus elementum nisl commodo eu. Ut efficitur turpis id dui accumsan lobortis. Fusce semper venenatis orci in dapibus. Ut id dolor et diam sagittis mollis. Nam vulputate tincidunt enim, vel facilisis leo ultricies eget. Mauris accumsan at diam id imperdiet. Integer gravida, nisi eget accumsan consectetur, purus quam suscipit est, maximus ullamcorper lectus lorem non velit. In interdum nec lectus et luctus. Donec congue malesuada tellus, vel auctor magna egestas non. 
 

 
Nulla hendrerit, velit a euismod blandit, enim ex ultricies elit, ac aliquam massa tortor vitae erat. Mauris rutrum hendrerit nisl vel finibus. Sed aliquam eget arcu eget egestas. Nullam a auctor ante. Donec a nibh fringilla, ornare nibh ac, posuere felis. Pellentesque condimentum suscipit vestibulum. Fusce quis sapien non ex mattis ultricies et sit amet metus. Phasellus at nunc sollicitudin, tristique nunc eget, sodales augue. Praesent sagittis justo eget placerat feugiat. 
 

 
Fusce aliquet enim eget venenatis fringilla. Suspendisse imperdiet, tellus eu pretium fringilla, ligula ante fermentum dui, in venenatis erat risus nec erat. Curabitur libero dolor, semper eu eros sit amet, eleifend accumsan diam. Fusce dui ante, pellentesque vitae nisl at, dapibus consectetur arcu. Mauris rhoncus nisl nec leo sollicitudin, eu fermentum nisi sodales. Quisque magna dolor, consequat sed ultricies dignissim, ullamcorper eu dui. Fusce vitae est sed augue ornare finibus. Aenean a eleifend ipsum. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nunc dapibus malesuada nulla ac dignissim. Nulla scelerisque diam vel neque consequat, tempus facilisis eros tempor. Ut pellentesque urna vitae tellus imperdiet, a sagittis ipsum condimentum. Nullam in purus ut nisl porttitor porttitor nec eget metus. Sed maximus nisl arcu. Suspendisse ut egestas ipsum, ut varius nisi. 
 

 
Nulla lacus neque, suscipit quis odio ac, accumsan molestie nisi. Vestibulum quam quam, bibendum non velit eu, faucibus laoreet sem. Aliquam auctor rhoncus ultrices. Nullam a sem sagittis, accumsan risus eu, auctor nisl. Nam vestibulum lobortis sagittis. Nunc vel ultricies sem, et convallis nulla. Mauris elementum imperdiet lorem, non maximus enim. Suspendisse dictum turpis massa, at bibendum neque ultrices ac. Sed sodales tempor augue et molestie. </p> 
 
     </div> 
 
    </div> 
 
</div>

Quelle

2017-07-20 12:57:30

Ja, der Füllstoff löst das Problem zwar nicht, es fügt einen Platz hinzu, aber mein Problem war ein vertikaler Standpunkt, also kann ich es nicht funktionieren lassen. Ich nehme an, mein Code, den ich Ihnen gab, war irreführend, da normalerweise Menü links und Text rechts im Menü ist (sie überlappen sich nur, wenn der Text zu lang ist und Sie nach rechts scrollen müssen, was ein anderes Problem ist !). Nochmals vielen Dank :) –

Ich würde Ihnen gerne dabei helfen, würden Sie in der Lage sein, Fiddler/Codepen für mich zu sehen? Tun Sie das, geben Sie mir Ihr Endergebnis, und es soll geschehen. –

Wow das ist wirklich nett :) Ich bin dran! Also, wenn ich es auf den Finger lege, gibt es dieses Problem nicht, hah! https://jsfiddle.net/oaq1m1ma/ Vielleicht kommt es vom Helfer @RenderBody? In dieser Demo wird der Text bei der Größenänderung gedrückt, aber meine eigentliche Seite tut das nicht, ich suche, was ist der Unterschied –

Text über Navbar

Antwort

Verwandte Themen