We Keep Coding

Bootstrap Collapse not working in small view

I seem to have a strange Issue with the Bootstrap collapse dropdown feature in small views. I have icons in a header in both XS and S views, in XS, clicking on these will expand the feature, whilst in S - these dropdowns are already opened, and if I try to click the button that interacts with the dropdown I get a strange animation.
Iv noticed that turning off display: !important; on the navbar-collapse.collapse in the bootstrap css (browser debugger) seems to remedy the issue - however this is a poor fix for all kinds of reasons - and I dont know how I can override this in my custom style sheet. Has anyone had similar issues with Bootstrap Collapse dropdowns?
I have created a Bootply document, images and font-awesome icons won't show up on there so it looks abit strange, ignore the red line as that is there to test the height of something.
http://www.bootply.com/2dWHqPQ0x3
I know its not a coding service - just looking for pointing in the right direction, will be good for those with similar problems in the future.

It's because 'navbar-collapse' is built to work (toggle) only for xs screens as defined in your bootstrap.css.
This is taken from the bootstrap site:
Changing the collapsed mobile navbar breakpoint
The navbar collapses into its vertical mobile view when the viewport is narrower than #grid-float-breakpoint, and expands into its horizontal non-mobile view when the viewport is at least #grid-float-breakpoint in width. Adjust this variable in the Less source to control when the navbar collapses/expands. The default value is 768px (the smallest "small" or "tablet" screen).
So essentially you need to change this so that it starts at 992px and not 768px.
#media (min-width: 768px){ /* change to 992px (or whatever you've set your grid breakpoint at for 'md') */
.navbar-collapse.collapse {
display: block!important;
height: auto!important;
padding-bottom: 0;
overflow: visible!important;
}
}

How can I prevent a responsive menu from breaking my layout when the window is resized?

I've updated my self-made responsive menu but I have a problem with the menu disappearing when resizing.
When I downsize my window below 1100px width and open the responsive menu, everything is fine. However when I close the responsive menu Jquery applies a display: none inline attribute.
This makes my screen disappear when I resize back to full width.
I've updated my codepen with the javascript below. Is this a good solution or can somebody help me improve this little responsive menu?
Codepen link
$(window).resize(function() {
var viewportWidth = $(window).width();
if (viewportWidth > 1100) {
$('.navigational-menu').show();
}
});

Unfortunately, this is just part of adapting a site to be responsive.
First off, I'd recommend using media queries instead of javascript to do it. Start by adding in rules for the different widths you'll be defining for, so if it goes below 1100px, you'll need to have
#media screen and (max-width: 1100px) { /* Changes to your CSS for widths below 1100px will go here */}
What you want to do is resize your window below that width, and then see everything that "breaks" or needs to be redone with new CSS rules, and make those changes. You'll probably need to change the menu sizes, maybe font-sizes (depending on how you have it set up). But what I find to be the easiest, is to open up your browsers CSS Element Inspector / CSS Editor, and make those changes on the fly as you're resizing your browser. Then, just transfer those changes to your main code, and keep going for the lower widths. Chances are this one rule for under 1100px won't be enough, and you'll have to create a few to ensure it looks good at all widths. So say, once you get to 800px, you'll want to further update some elements, you just
#media screen and (max-width: 800px) { /* Changes to your CSS for widths below 800px will go here */}
And do the same thing. Keep going until your site works well at all widths, and your site will be responsive.
From the look of your question though, it seems as though you're looking for a magic bullet to make the menu work automatically responsively... unfortunately, that's not how it works, and you're going to have to code in the changes at each level to make it look how you'd like.
Good luck!

Is there a Bootstrap class for things to disappear on mobile only?

.sr-only the CSS class of the Bootstrap library is used to make things disappear on computer screens only. Is there any opposite class for it to make things disappear on mobiles only?
I know there could be several workarounds using Javascript scripts. These are acceptable if and only if there is no opposite.

Bootstrap responsive utilities will handle this: http://getbootstrap.com/css/#responsive-utilities
Hide on extra small screens screens (less than 768px):
class="hidden-xs"
Show on extra small and small screens (less than 992px):
class="visible-xs visible-sm"

Using Bootstrap 4 you could use class="d-md-none". As this would set display:none to the element from the md width and up.

If you want to display the element only on large and medium screens and hide on small and extra-small screens this are the classes you have to add in the element using bootstrap v4: d-none d-md-block.
Here is the full answer for your question if you are using Bootstrap v4:
https://getbootstrap.com/docs/4.4/migration/#responsive-utilities

How to change vertically tabbed content panel into responsive collapsible with media queries and jquery?

I am attempting to build a content navigation pattern that uses vertically stacked tabs to toggle the display of hidden content panels next to the tabs. At smaller widths, this pattern breaks.
Heres my fiddle: http://jsfiddle.net/jrotton/xCeX8/1/
It is somewhat responsive...but lets say I have 12 tabs and the length of their labels range from "Nursing" to "Architecture, Design, and Construction". This breaks when the screen gets below 500px or so.
I could:
.contextNav { width: 100%; }
ul.checklist-select li { display:inline-block; }
..it works but it not ideal when you have more than a few tabs.
I would rather hide the tab menu and change the panels into collapsibles with clickable h2's. It's also important that the pattern is screen-reader-accessible but I haven't made it that far yet.
Any ideas on how I could do this? Thanks in advance..

http://www.zurb.com/playground/off-canvas-layouts
Here's a few ideas...
Also I would say with what you have at the moment, floating that menu to the right on the mobile version isn't going to work. at the mobile size, those nav items should be 100% width, and the nav should be above the content, or should be another "slide panel".
Jquery mobile also has some very useful, very common design patterns built right in:
http://jquerymobile.com/

How to create multiple scroll-able sections within a twitter-bootstrap fluid layout

I am using Twitter's Bootstrap fluid layout for my site. I have a collapse/expand accordion and inside of one of the sections, I have three columns that I would like to be separately scroll-able. These columns currently expand to the full height of their content, but I'd instead like them to expand to the viewport (viewable page) and show a scrollbar to get to the rest (when it is not already all visible).
The scrollbars will show up if I set the column to: overflow: auto; height: 500px;
I don't want to set the height; however, I want it to be set to whatever fits in the viewport.
I understand you can set a div's height to 100% in order to expand to the viewport; however, it has to depend on a containing elements height. I'm not sure how to deal with this within Bootstrap.

appart $('#collapseOne').on('shown', sizing()); not resizing properly if you resize after loading.
This is working pretty much ok on desktop.
http://jsfiddle.net/baptme/MwzvD/17/