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

HTML & CSS
19

That’s awesome! Thanks -your help is very much appreciated :grin:

Here’s the CSS for adding for this to work.
As you say the “rem” value needs to be adjusted to suit the height of the navbar, so I changed this to only have the scrollbar appear when the browser height is below that of all my sidebar items.
I’ve also customized the scrollbar appearance (only the sidebar-nav scrollbar) making it thinner among other things. There are different codes for Firefox and webkit browsers:

/* sidebar nav -stays in same location while scrolling */ 
.sticky-column {
  position: -webkit-sticky;
  position: sticky;
  top: 5rem;
/* scrollbar appears with screens not high enough 
to display entire sidebar nav, 
otherwise hidden */
        overflow: auto;
/* change "rem" value to height of 
when scrollbar appears */
        max-height: calc(100vh - 6rem);
/* scrollbar appearance (Firefox only) */  
        scrollbar-width: thin;
        scrollbar-color: red white;
/* scrollbar on left side */        
/* direction: rtl;             */
}
  
/* scrollbar appearance (webkit browsers) */ 
/* width */
.sticky-column::-webkit-scrollbar {
  width: 7px;
}

/* Track */
.sticky-column::-webkit-scrollbar-track {
  box-shadow: inset 0 0 5px grey; 
  border-radius: 10px;
}
 
/* Handle */
.sticky-column::-webkit-scrollbar-thumb {
  background: red; 
  border-radius: 10px;
}

/* Handle on hover */
.sticky-column::-webkit-scrollbar-thumb:hover {
  background: orange; 
}

Here’s my sidebar again with the scrollbar added. It’s not wroking perfectly because the sidebar-nav doesn’t stick to the top unless you scroll the contents down to item 1. I haven’t yet figured out why/how this happens, but I think it has something to do with how I’ve set up columns/rows:

Here on the other hand it works much better. This is the actual layout I want to use for my site (obviously without any content yet) and here the sidebar nav stays in place at the top:

But I wonder if I’ve made a structural mistake in my layout as the sidebar DIV I’ve coloured pink also has the topmost DIVs (1, 2, A) in the content column show up pink as well. Those are the DIV boxes which represent various content such as images, Bootstrap cards, text etc. Most of those content-boxes are coloured (“bg-success” and “bg-warning”) in order to see them better, but I didn’t expect the sidebar-nav column to extend over to the content section column… Maybe someone reading can explain why?
Firefox bugs: yes, it does look like there’s a bug causing the header-flickering when scrolling, and perhaps there’s a workaround once I figure out exactly what’s causing it, but otherwise I’ll just leave it at that.
There might be another bug I’ve discovered in Firefox: often when I’ve made some changes in my sidebar-nav code within Codepen and saved it, the sidebar doesn’t work properly. Either the sub-tems don’t expand (i.e. item 1-1) or mouse-hovering over the items is gone. The solution is to reload the browser page (sometimes multiple times). I’ve briefly read about CSS resets and wonder if this might be something I need to look closer into?

1 Like