Menu
If I have the following, the link text wraps to the next line beautifuly:
<div class="sidenav" id="site-navbar">
<ul class="nav nav-pills nav-stacked" >
<li><a href="#h0">A very very very very very very very very very long thing</a></li>
However, if I add affix, the text stays on the same line and overlaps onto the main content column:
<div class="sidenav" id="site-navbar">
<ul class="nav nav-pills nav-stacked" data-spy="affix">
<li><a href="#h0">A very very very very very very very very very long thing</a></li>
Is there a way to fix this with css? Also, can I do it without editing the current CSS.
Here is a fiddle to demonstrate the overflow: https://jsfiddle.net/75nLbwyb/
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<title>Example of navbar overflow</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">
<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
<body data-spy="scroll" data-target="#navbar-example">
<div class="row">
<div class="container">
<div class="col-sm-3">
<div class="sidenav" id="navbar-example" data-spy="affix">
<ul class="nav nav-pills nav-stacked" data-offset-top="1">
<li><a href="#headline0">Section 1</a></li>
<li><a href="#headline1">Section 2 - a very very long thing</a></li>
<li><a href="#headline2">Section 3</a></li>
</ul>
</div>
</div>
<div class="col-sm-9">
<div id="headline0">
<h1>Section 1</h1>
</div>
<p>
blah </p>
<div id="headline1">
<h2>Section 2</h2>
</div>
<p> blah blah blah blah </p>
<p> blah blah blah blah </p>
<p> blah blah blah blah </p>
<p> blah blah blah blah </p>
<p> blah blah blah blah </p>
<p> blah blah blah blah </p>
<p> blah blah blah blah </p>
<p> blah blah blah blah </p>
<p> blah blah blah blah </p>
<p> blah blah blah blah </p>
<p> blah blah blah blah </p>
<p> blah blah blah blah </p>
<p> blah blah blah blah </p>
<p> blah blah blah blah </p>
<p> blah blah blah blah </p>
<div id="headline2">
<h2>Section 3</h2>
<p> blah blah blah blah </p>
<p> blah blah blah blah </p>
<p> blah blah blah blah </p>
<p> blah blah blah blah </p>
<p> blah blah blah blah </p>
<p> blah blah blah blah </p>
<p> blah blah blah blah </p>
<p> blah blah blah blah </p>
<p> blah blah blah blah </p>
<p> blah blah blah blah </p>
<p> blah blah blah blah </p>
<p> blah blah blah blah </p>
<p> blah blah blah blah </p>
<p> blah blah blah blah </p>
<p> blah blah blah blah </p>
</div>
<p>
fddf
</div>
</div>
</div>
</body>
454
Main problem you face is that your .nav container (which own the .affix class) gets position:fixed as soon you scroll. Fixed elements orientate themselves to the browser viewport, this is the reason why its ignoring the width of the parent .col-sm-3 container from bootstrap (the 25% of the container width) and overlapping the text to the right.
Your only solution is to add a width value to the .affix class therefor your nav container wont break layout. HTML markup is fine so far! Maybe you need to make some adjustments for mobile styling (keep that in mind):
.nav.affix {
width: 150px;
background: #fff;
z-index: 1;
/* background and zindex for mobile styles, currently layout breaks */
}
Check the sidebar of the bootstrap documentation. They adding a width to the affix class element too! — https://getbootstrap.com/docs/3.3/css/#code
154
Try use flexbox
.container-new {
display: flex;
} <title>Example of navbar overflow</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<body data-spy="scroll" data-target="#navbar-example">
<div class="row">
<div class="container container-new">
<div class="col">
<div class="sidenav" id="navbar-example">
<ul class="nav nav-pills nav-stacked" data-spy="affix" data-offset-top="1">
<li><a href="#headline0">Section 1</a></li>
<li><a href="#headline1">Section 2 - a very very long thing asd as das das das das d</a></li>
<li><a href="#headline2">Section 3</a></li>
</ul>
</div>
</div>
<div class="col">
<div id="headline0">
<h1>Section 1</h1></div>
<p>
blah </p>
<div id="headline1">
<h2>Section 2</h2></div>
<p> blah blah blah blah </p>
<p> blah blah blah blah </p>
<p> blah blah blah blah </p>
<p> blah blah blah blah </p>
<p> blah blah blah blah </p>
<p> blah blah blah blah </p>
<p> blah blah blah blah </p>
<p> blah blah blah blah </p>
<p> blah blah blah blah </p>
<p> blah blah blah blah </p>
<p> blah blah blah blah </p>
<p> blah blah blah blah </p>
<p> blah blah blah blah </p>
<p> blah blah blah blah </p>
<p> blah blah blah blah </p>
<div id="headline2">
<h2>Section 3</h2>
<p> blah blah blah blah </p>
<p> blah blah blah blah </p>
<p> blah blah blah blah </p>
<p> blah blah blah blah </p>
<p> blah blah blah blah </p>
<p> blah blah blah blah </p>
<p> blah blah blah blah </p>
<p> blah blah blah blah </p>
<p> blah blah blah blah </p>
<p> blah blah blah blah </p>
<p> blah blah blah blah </p>
<p> blah blah blah blah </p>
<p> blah blah blah blah </p>
<p> blah blah blah blah </p>
<p> blah blah blah blah </p>
</div>
<p>
fddf
</div>
</div>
</div>
</body>https://jsfiddle.net/75nLbwyb/4/
1
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
