Im trying to add a side menu to a help page.
The menu and internal links are functioning properly, but when clicked, the side menu partially goes behind the navbar.
As a beginner, I'm not sure how to resolve this issue. Can someone offer some guidance?
Here is the html
<div class="container-fluid info-pages">
<div class="col-md-3 col-xs-12" id="leftCol">
<h5>HELP</h5>
<ul class="help nav nav-tabs nav-stacked" id="sidebar">
<li><a href="#Customer_Service">Customer Service</a></li>
<li><a href="#Shipping&delivery">Shipping & Delivery</a></li>
<li><a href="#ReturnPolicy">Return Policy / Exchanges</a></li>
<li><a href="#stockist">Stockist / Brand Inquiries</a></li>
<li><a href="#webissues">Web Issues</a></li>
<li><a href="#faq">FAQ</a></li>
</ul>
</div>
<div class="col-md-6 col-xs-12" id="mainCol">
<h5 id="Customer_Service">CUSTOMER SERVICE</h5>
<div class="col-md-6 col-xs-12">
<ul class="customer-service">
<li>Call: +555-5555555</li>
<li>Email: <a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="47252b2607252b266924282a">[email protected]</a></li>
</ul>
</div>
<div class="col-md-6 col-xs-12">
<ul class="customer-service">
<li>Monday—Friday</li>
<li>11:00—18:00 GMT</li>
<li>Saturday</li>
<li>11:00 - 18:00 GMT</li>
<li>Sunday</li>
<li>Closed</li>
</ul>
</div>
<br>
<h5 id="Shipping&delivery">SHIPPING & DELIVERY</h5>
<p> Chartreuse master cleanse succulents, chicharrones kombucha chambray DIY green juice marfa roof party fanny pack lo-fi live-edge godard pork belly. Enamel pin venmo raclette occupy chartreuse plaid. Offal raclette live-edge venmo kale chips, humblebrag man braid hammock cliche quinoa meh mumblecore. Blue bottle gentrify ... (text continues) ... artisan crucifix, sriracha cray four loko chillwave. Next level iceland craft beer, kale chips occupy bushwick chambray schlitz hashtag hammock locavore poke squid.
</p>
<br>
<h5 id="ReturnPolicy">RETURN POLICY / EXCHANGES</h5>
<p>Chartreuse master cleanse succulents, chicharrones kombucha chambray DIY green juice marfa roof party fanny pack lo-fi live-edge godard pork belly. Enamel pin venmo ... (text continues) ... cold-pressed pabst single-origin coffee poutine crucifix. Pitchfork artisan crucifix, sriracha cray four loko chillwave. Next level iceland craft beer, kale chips occupy bushwick chambray schlitz hashtag hammock locavore poke squid.
</p>
<br>
<h5 id="stockist">STOCKIST / BRAND INQUIRIES</h5>
<p>Chartreuse master cleanse succulents, chicharrones kombucha chambray DIY green juice marfa roof party fanny pack lo-fi live-edge godard pork belly. Enamel pin venmo ... (text continues) ... love bushwick chambray shlitz hashtag hammock locattores pokosso squido.</p>
<br>
<h5 id="webissues">WEB ISSUES</h5>
<p>Chartreuse master cleanse succulents, chicharrones kombucha chambray DIY green juice marfa roof party fanny pack lo-fi live-edge godard pork belly. Enamel pin venmo ... (text continues) ... food truck XOXO bitters af. Hot chicken bitters knausgaard four dollar toast, truffaut tousled etsy cray ice.</p>
</div>
here is the javascript
<script type="text/javascript">
var $body = $(document.body);
var navHeight = $('.navbar').outerHeight(true) + 10;
$('#sidebar').affix({
offset: {
top: 245,
bottom: navHeight
}
});
$body.scrollspy({
target: '#leftCol',
offset: navHeight
});
</script>
Here is the .css
/*######## HELP PAGE ########## */
.info-pages{
margin-bottom: 20vw;
margin-top: 10vh;
padding-top:50px;
}
.info-pages p,li {
font-size: .9em;
}
.help{
list-style: none;
}
.customer-service {
list-style: none;
}
@media screen and (min-width: 768px) {
#masthead h1 {
font-size: 100px;
}
}
.affix-top,.affix{
position: static;
}
@media (min-width: 979px) {
#sidebar.affix-top {
position: static;
... (CSS continues) ...
width:228px;
}
#sidebar.affix-bottom {
position: relative;
}
#sidebar.affix {
position: fixed;
top:70px;
width:228px;
}
}