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>