"Bootstrap docs" sidebar nav -problems getting it to work!

I’d like to use a sidebar type navigation, similar in appearance and functionality as the one used on the Bootstrap 3 documentation page.
I’ve tried to dissect it from the HTML source and CSS, but it’s not easy as the CSS has been minimized, but I’ve managed to copy/paste it into a Codepen-pen:

There’s a page entitled Bootstrap docs sidebar explained which goes through the entire code for it, so I followed the examples and entered the code into a new codepen, but it doesn’t work like in the explanation. I’ve ensured that I’ve used Boostrap 3 as was likely they’d used here, but still no go:

The person who documented this [also made it available in JSFiddle: http://jsfiddle.net/KyleMit/v6zhz/53/
I tried to copy the HTML, CSS and JS from it and pasted it into an empty Codepen, but alas it doesn’t work there:

What am I doing wrong?,
EDIT: it seems to work now! I had to put the CDN link for jquery.js before bootstrap.min.js.

and furthermore : how do I make it work in Bootstrap 4?

Have a look here.

I’ve scratched my head for a while to figure this out and it seems scrollspy isn’t part of the problem, but Affix.
According to the Bootstrap docs (“Migrating to Version 4”), Affix has been removed (which was part of Bootstrap 3), hence the issues I’m experiencing.

  • Dropped the Affix jQuery plugin.
  • We recommend using position: sticky instead. See the HTML5 Please entry for details and specific polyfill recommendations. One suggestion is to use an @supports rule for implementing it (e.g., @supports (position: sticky) { ... } )/
  • If you were using Affix to apply additional, non- position styles, the polyfills might not support your use case. One option for such uses is the third-party ScrollPos-Styler library.

From what I can see, this is the CSS code which affects Affix:

.fixed {
    position: fixed;

I believe the above tells me that I need to replace the Affix functionality in BS3 with something else, such as the polyfill from the HTML5 Please page, which is called StickyFill.
But then I read it’s no longer needed for modern browsers, and I’m not sure if this relates to my specific case where position: fixed is used, not position: sticky. Also I don’t want to lose support for older browsers.

Reading on I see Scrollpos-styler might be the solution I’m looking for. But then I read this (scroll down on that Scrollpos-Styler page):

Differentiation and Limitations

This script is designed to modify attributes OTHER THAN an element’s position. It doesn’t work well when changing positioning of an element. Switching between position:relative and position:fixed is exactly what position:sticky is designed for, and this script in no viable alternative. Refer to the documentation for details, and use polyfills for older browsers.

So in the end I’m utterly confused. What exactly do I need to do regarding Affix?

Here’s my forked Codepen with the CDN links updated to Bootstrap 4.6 and the header navbar updated, but otherwise unchanged (UPDATE: no longer true as I’ve tried this out among other things, but without any success):

You don’t seem to be following all the instructions from here:

or here:

It looks like you need slim version of jquery for the scrollspy plugin.

The js is activated is with data attributes on the elements concerned and you need to attach them to the body tag. The body would also need position:relative applied. It’s in the documentation on the page I linked to.

It’s quite tricky to implement because you have to have it all pointing in the right place so I suggest that you start with the “Example with nested nav” from that above page and copy the html. Next view source and copy the relevant js or make sure you have the right files linked to from a cdn etc.

The nav will work with position:fixed but I’d need to double check that position:sticky will work also (position:sticky requires a different approach with the html and I have given you a codepen with a position:sticky example in another thread).

Look at the CSS on that bootstrap page using the devtools and see what css is being applied so that you can copy it.

As I said at the start bootstrap does not alleviate the need to have a deep understanding of CSS so its best if you keep trying yourself before I offer a solution. You can see from the examples on that bootstrap page that the nav is working and highlighted by the scrollspy (although it doesn’t collapse or open as that is your job to write in css using the class that the js adds).

If you can’t get anything to work then I will try and put up a stand alone version of the bootstrap example to show it working on its own. I’m a little pushed for time as these things do take a while to build even for an experienced user. :slight_smile:

1 Like

Here’s a fully working example that you can fork and play with.

I suggest that you play around with this for a few days until you understand what is happening. It is also worth spending a considerable amount of time going through the bootstrap documentation as its not something you can easily digest in an afternoon and you need to constantly refer to it and test the demos.

Even though I am pretty good at CSS it took me an hour or so to get that codepen working because I had to keep referring to the bootstrap documentation. (It would have only taken me minutes in vanilla css to do this though (apart from the js interactions).

Hope it helps anyway but I am away again for a few days from tomorrow.:slight_smile:

1 Like

Thank you!
I really appreciate you taking the time spent making it work in Boostrap 4.

I’ve started by comparing the original (Boostrap 3-based) code with your edited one and will take it from there. Since I’m not very experienced in neither CSS or JS I think it’ll take me a while to get the grips of this, but I’m certainly going to give it a go.
Thanks again!

1 Like