Brad, Eric is on the right track above. The problem is absolute positioning
(of which fixed positioning is a subset) removes the element from document
flow and sets it in proportion to the viewport width.
You'll have to add a fixed width to your unordered list, but more specific
than 25%. Try adding the rules below to your internal styles (the `/*
bootstrap overrides */` section of the html). (Be sure to keep the order
provided here.)
The next version of Bootstrap will change hard px values for rems!
@media (min-width: 992px) {
.affix {
width: 220px;
}
}
@media (min-width: 1200px) {
.affix {
width: 270px;
}
}
Cheers,
Brian Zelip
---
MS Student, Graduate School of Library & Information Science
Graduate Assistant, Scholarly Commons
University of Illinois at Urbana-Champaign
zelip.me
On Tue, Nov 18, 2014 at 2:03 PM, Eric Phetteplace <[log in to unmask]>
wrote:
> When the <ul> goes to position: fixed it loses the width of its parent
> (which has a "col-md-3" class) which is why it's smaller. If you can get
> the "affix" class to act like "col-md-3" that'd help some, so:
>
> .affix { width: 25%; }
>
> is a start on large screens, but won't solve the way the <ul> ends up
> behind your main content on smaller screens.
>
> Best,
> Eric
>
> On Tue, Nov 18, 2014 at 11:35 AM, Brad Coffield <
> [log in to unmask]
> > wrote:
>
> > Brian,
> >
> > Awesome, thanks a lot.
> >
> > Of course in all my back and forth I didn't have it setup like I had. I'd
> > gone back to scratch to try again. So, I just added the data-spy option
> to
> > the UL in the template that is the nav. The problems that are happening
> > with it on this page aren't exactly as described in my previous email but
> > still, there be problems :) The offset doesn't work at all. Not sure what
> > css to include to make it work right. And it gets skinny on scroll now,
> not
> > wider.
> >
> > http://francis.beta.libguides.com/c.php?g=9436
> >
> >
> > Thank you!!!
> >
> > On Tue, Nov 18, 2014 at 2:22 PM, Brian Zelip <[log in to unmask]> wrote:
> >
> > > Brad, publish a dummy draft page with the left-nav template and the
> > problem
> > > you're encountering so I can take a look.
> > >
> > > brian
> > >
> > > On Tue, Nov 18, 2014 at 1:13 PM, Brad Coffield <
> > > [log in to unmask]>
> > > wrote:
> > >
> > > > Has anyone endeavored to get this to work? If not, is there anyone
> > > willing
> > > > to help me getting it to work, lol?
> > > >
> > > > What I'm talking about:
> > > >
> > > > 1. Use left-nav template in Libguides v2
> > > >
> > > > 2. Once you scroll down in the content area get the left-nav to stay
> > with
> > > > you, always visible.
> > > >
> > > > You can see a really slick example of it on the bootstrap docs page
> > > (which
> > > > also uses scrollspy to note where in the document you are...but lets
> > slow
> > > > down haha): http://getbootstrap.com/javascript/
> > > >
> > > > 3. Bootstrap has affix.js built-in and its therefore possible to do
> it
> > > > without any outside code.
> > > >
> > > > 3a. You can see info about affix.js at the bottom of the bootstrap
> docs
> > > > link I just provided.
> > > >
> > > > 4. I've gotten it to work BUT with a lot of problems.
> > > >
> > > > For one, it will stay stuck in the middle of the screen instead of
> > > sticking
> > > > to the top of the screen once you've started scrolling.
> > > >
> > > > For two, it breaks the responsivity: on small screens instead of
> normal
> > > > functioning it kinda hides behind the content column
> > > >
> > > > For three, once it starts scrolling its width changes.
> > > >
> > > > For four, it will cover the footer when you get down there.
> > > >
> > > >
> > > > To have the left-nav sticky on long content pages would be GREAT.
> > > >
> > > > Thanks a lot.
> > > >
> > > > --
> > > > Brad Coffield, MLIS
> > > > Assistant Information and Web Services Librarian
> > > > Saint Francis University
> > > > 814-472-3315
> > > > [log in to unmask]
> > > >
> > >
> >
> >
> >
> > --
> > Brad Coffield, MLIS
> > Assistant Information and Web Services Librarian
> > Saint Francis University
> > 814-472-3315
> > [log in to unmask]
> >
>
