Develop Reference

How to add auto scroll bar vertically to cssbootstrap affix menu for smaller screens?

I am using css bootstrap affix plugin as a sticky menu on my site.
I have lots of items on the menu which is not an issue on a desktop. However, when I view my site on a small laptop, the bottom half of my menu get cut off.
I need to add an auto scroll bar to the menu when the screen is small.
Here is my html code
<div class="container">
<div class="row">
<nav class="col-sm-3 scrollspy hidden-xs hidden-sm" id="docs-menu-column">
<ul class="nav nav-pills nav-stacked scrollspy affix-menu" id="docs-menu" data-spy="affix">
<li>
<strong>Code Generator</strong>
<ul class="nav">
<li>Introduction</li>
<li>Features</li>
<li>Dependencies</li>
</ul>
</li>
<li>
<strong>Getting Started</strong>
<ul class="nav">
<li>Installation</li>
<li>Features</li>
<li>Available Command</li>
</ul>
</li>
<li>
<strong>How To</strong>
<ul class="nav">
<li>How to create a "views-layout"</li>
<li>How to create a resource</li>
<li>How to create a controller</li>
<li>How to create a model</li>
<li>How to create routes</li>
<li>How to create all standard CRUD views</li>
<li>How to create a "create-view"</li>
<li>How to create a "edit-view"</li>
<li>How to create a "index-view"</li>
<li>How to create a "show-view"</li>
<li>How to create a "form-view"</li>
<li>How to create a database migration</li>
<li>How to create form-request</li>
<li>How to create a language file</li>
</ul>
</li>
<li>
<strong>Fields</strong>
<ul class="nav">
<li>Overview</li>
<li>Creating fields from JSON file</li>
<li>Creating fields from a raw string</li>
</ul>
</li>
</ul>
</nav>
<div class="col-md-9 large-padding-sections" id="docs-main-column">
//Sections goes here.....
</div>
</div>
</div>
I tried adding style="overflow-y: auto !important;" to the <nav class="col-sm-3 scrollspy hidden-xs hidden-sm" id="docs-menu-column" but that did not work.
How can I correctly add a scroll bar vertically to the nav on the left if the screen is not high enough to show the entire affix menu?

I think the problem is that even though you're giving it directive to scroll, there's nothing limiting the height. Try this:
height: 100vh;
overflow-y: scroll;

Need suggestions on how to manage this bootstrap footer for small - med viewports

I'm working on this site, and having issues with how the footer displays anywhere below 950 px wide. All the li's drop down below each other to fit into the page, and because of the class "navbar-fixed-bottom" and the set height, it essentially cuts them out and hides them. Our footer is constructed as such:
<footer class="footer navbar-fixed-bottom">
<nav>
<ul class="nav navbar-nav navbar-right">
<li></li>
<li><a id="embedTitle" class="mousePointer"></a></li>
<li><a id="privacyPolicy" class="mousePointer"></a></li>
<li><a id="termsUse" class="mousePointer"></a></li>
<li><i class="fa fa-twitter"></i></li>
<li><i class="fa fa-facebook"></i></li>
</ul>
<ul class="nav navbar-nav navbar-left">
<li>© 2016 Mogile Technologies</li>
<li><a id="opposingLanguage" class="mousePointer"></a></li>
</ul>
</nav>
</footer>
What would be my best option to maintain a similar height, but include all the items in the footer? Perhaps a collapse nav, or a drop-up or something. And how can I accomplish this? Thanks in advance

Bootstrap templating? can i use Handlebars?

I have been re-building a site with Bootstrap, but I know that many of the links will change as I build the site. It seems the best plan to use HTML templating to produce the links in the navbar.
However, I just can't get it to work at all. I am guessing there may be some issue with the collapsable navbar using javascript, and when each function runs. This is just a guess, I am a beginner.
This is the HTML - (the handlebars link is in the header)
<script id="some-template" type="text/x-handlebars-template">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
<span class="glyphicon glyphicon-align-justify"></span>
</button>
<nav class="navbar-collapse collapse" role="navigation">
<ul class="navbar-nav nav">
<li><span class="glyphicon glyphicon-home"></span> Home</li>
<li class="dropdown">
About<b class="caret"></b>
<ul class="dropdown-menu">
<li>Intention</li>
<li>Membership</li>
<li>Genealogy</li>
<li>Contact</li>
</ul>
</li>
<li class="dropdown">
Writings<b class="caret"></b>
<ul class="dropdown-menu">
<li>Poetry</li>
<li>Articles</li>
<li>Lectures</li>
<li>Qur’anic Study</li>
<li>Sufi Stories</li>
<li>Thoughts</li>
<li>Book Reviews</li>
<li>Library</li>
</ul>
</li>
<li>Sharib Press</li>
<li>99 Names</li>
<li class="dropdown">
Persian Pages<b class="caret"></b>
<ul class="dropdown-menu">
<li>Hafiz Shirazi</li>
<li>First Line index</li>
<li>Glossary</li>
</ul>
</li>
<li>Ajmer</li>
<li>Konya</li>
<li class="dropdown">
Images<b class="caret"></b>
<ul class="dropdown-menu">
<li>Photos</li>
<li>Art Gallery</li>
<li>Sufi Shrines</li>
</ul>
</li>
</ul>
</nav>
</script>
</div>
<script type="text/javascript" src="script.js"></script>
This is the script file -
var source = $("#some-template").html();
var template = Handlebars.compile(source);
var data = {
home : "/home.html",
etc.
};
$("#content-placeholder").html(template(data));
I copied this from a tutorial mostly, and the parent div has the correct ID.
Is it even possible to use templating in this case?

OK incase anyone stumbles across this having the same issue, there was only a small issue.
The fact that one of the data names in the script began with a number '99' (i didn't show this in my question as I assumend the data was fine). To solve this I simply put it in quotation marks.

Bootstrap sidebar links are not contracting & collapsing properly

I am using bootstrap sidebar.
Its only two levels sidebar nav on the website. I have added two more levels, now its four level sidebar. I am receiving a random issue
that some time when I click on second nav of same level it doesn't open nor other nav collapse, until and unless I scroll down. Then it starting working back again.
Like in the below ScreenShot. By clicking on 'Alerts' it should open and accessing should collapse but its not. But on scrolling it working fine.
I have added the code. Please do let me know if i can add anything more.
<body data-spy="scroll" data-target=".p8-sidebar" onLoad="fixNavbarIssue()">
<div class="p8-sidebar hidden-print hidden-sm hidden-xs bs-docs-sidebar hidden-print affix" role="complementary">
<ul class="nav p8-sidenav nav-stacked">
<li class="active">
Console
<ul class="nav">
<li class="">Login
</li>
<li class="">Understanding Console
</li>
<li class="">Connected Users
</li>
<li class="">Connected Consoles
</li>
<li class="">Logout
</li>
</ul>
</li>
<li class=""> Alerts
<ul class="nav">
<li class="">
Creating a New Alert
<ul class="nav">
<li>Basic Information
</li>
<li>Send To
</li>
<li>Event Name
</li>
<li class="">Short Message
</li>
<li class="">Long Message
</li>
<li class="">
Require Acknowledgement
</li>
</ul>
Bootstrap css/js are unchanged.

Change Image Size with Javascript (replicate)

Okay so i have been looking at this for over a week and can not figure it out. Basically here is an example of the end result i posted earlier:
Previous Stack Overflow Post
Their suggestions did not work. The javascript is changing the header css when you click on the buttons to the top right. Here is a Demo: DEMO of JAVASCRIPT CHANGE
I'm Trying to duplicate this action with the image, but i however do not know javascript that well and am not too sure what i am reading when i look at the javascript file. I either would like someone to help me read this javascript so i can edit it myself or help me find a solution.
Here is the Javascript: Script.JS
Here is the relevant HTML that i have done so far:
body >
<div id="gspinner" class="spinner"></div>
<div id="glob">
<header>
<div class="inner">
<h5><img src="images/logo_large.png" /></h5>
<!--<img src="logo-large.png" id="img- logo" alt="" />
<!--</>-->
<nav>
<ul>
<li class="li-2"><span class="lbl">About Us</span><span class="ico -def"></span><span class="ico -hvr"></span>
<ul>
<li>History</li>
<li>Mission Statement</li>
<li>Solutions</li>
<li>Distribution Area</li>
<li>SAS Logo</li>
</ul>
</li>
<li class="li-1"><span class="lbl">Events</span><span class="ico -def"></span><span class="ico -hvr"></span>
<ul>
<li>Trade Show</li>
<li>Awesome Achievers</li>
<li>What's Happening</li>
</ul></li>
<li class="li-3"><span class="lbl">Technology</span><span class="ico -def"></span><span class="ico -hvr"></span>
<ul>
<li>NexGen</li>
<li>Synergy</li>
<li>EDI</li>
</ul>
</li>
<li class="li-4"><span class="lbl">Marketing</span><span class="ico -def"></span><span class="ico -hvr"></span></li>
<li class="li-5"><span class="lbl">Sales</span><span class="ico -def"></span><span class="ico -hvr"></span></li>
<li class="li-6"><span class="lbl">Employment</span><span class="ico -def"></span><span class="ico -hvr"></span></li>
</ul>
</nav>
</div>
</header>
And here is the CSS: Style.css
ANY help would be greatly appreciated and will get "points" for it, i have been working on this for over a week with no help, but i have decided i should reach out for help.
THANKS!

Not a Javascript solution, but I managed to achieve what you want using CSS; just add 'height: 40%' to your logo image and it should scale with the header (note that you'll probably need to use a higher-quality version of the logo), as the current one gets a bit pixellated when it grows.