Bootstrap Affix Not Moving

Question

I'm trying to make the navigation sidebar on my website move down with the browser view via Bootstrap's Affix plugin however it refuses to follow the view and just stays at the top.

This is the structure I have for my HTML:

<div id="page-wrapper">
    <div class="container">
            <div class="row">
                <div id="navigation-affix" data-spy="affix" data-offset-top="20" data-offset-bottom="200">
                    <div class="col-xs-2" id="navigation-wrapper">
                        <div class="inner">
                            <div class="row">
                                <div class="col-xs-12">
                                    <img src="images/me.png" alt="Liam Potter" id="picture-me" class="img-responsive">
                                </div>
                            </div>
                            <div class="row">
                                <div class="col-xs-12">
                                    <div id="navigation">
                                        <a href="/" id="current-page">Home</a>
                                        <a href="/portfolio">Portfolio</a>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

                <div class="col-xs-10" id="content-wrapper">
                    <div class="inner">

                    </div>
                </div>
            </div>
        </div>
        <div id="page-push"></div>
    </div>
    <footer>
        <div class="container">

        </div>
    </footer>

Source: https://jsfiddle.net/tbejd5en/1/

Any thoughts?

Add `position:fixed` to your id `#navigation-affix` .. check this ... https://jsfiddle.net/tbejd5en/4/ — Minal Chauhan, Jul 19 '16 at 12:30
@MinalChauhan that causes this to happen: http://i.imgur.com/URF2FLN.png — Liam Potter, Jul 19 '16 at 12:35
you need to add offset `col-xs-offset-2` to your id ` #content-wrapper` like this : `
` — Minal Chauhan, Jul 19 '16 at 12:41

score 0 · Answer 1 · answered Jul 19 '16 at 12:10

0

You can just add a position:fixed to your id #navigation

HTML

<div class="row">
    <div class="col-xs-12">
        <div id="navigation">
            <a href="/" id="current-page">Home</a>
            <a href="/portfolio">Portfolio</a>
        </div>
    </div>
</div>

CSS

div#navigation {
    text-align: right;
    padding-top: 10px;
    position: fixed;
}

DEMO

https://jsfiddle.net/tbejd5en/2/

answered Jul 19 '16 at 12:10

Sylvain

129
1
8

Sorry, by the navigation I meant the entire sidebar. Image and all. I can't seem to get it to work using position fixed for the entire sidebar. – Liam Potter Jul 19 '16 at 12:14
In the [bootstrap docs](http://getbootstrap.com/components/#navbar) they achieve this by using the bootstrap column for x positioning, and the inner element gets `position: fixed;`. So use a column for column layout, and create an inner div to contain everything you'd like to remain affixed. – Toby Jul 19 '16 at 12:43

score 0 · Accepted Answer · answered Jul 19 '16 at 12:35

0

You can just add a position:fixed to your id #navigation-affix and add col-xs-offset-2 to your id #content-wrapper

div#navigation-affix {
    position: fixed !important;
}

Here is fiddle: https://jsfiddle.net/tbejd5en/5/

answered Jul 19 '16 at 12:35

Mukesh Ram

6,248
4
19
37

This works however it requires me to hardcode the size of the sidebar which is fine. – Liam Potter Jul 19 '16 at 12:42

Bootstrap Affix Not Moving

2 Answers2