CODEWITHSUNDEEP
javascriptcsstwitter-bootstrap
Avi
Avi

Reputation: 15

Twitter Bootstrap, affix, how to have nav stay static at the top in mobile layout

The twitter bootstrap docs site, the left nav gets fixed to the top in a mobile layout. ex: http://twitter.github.com/bootstrap/javascript.html

I want to do the same without using the ...docs.css as is done in the Bootstrap site.

Currently, the issue that I'm facing is that the 'affix nav' stays on top of the content in mobile dimensions as you scroll through the content. 

<div class="row">
<div class="span3">
    <div data-spy="affix">
        <ul class="nav nav-list nav-stacked">
            <li><a href="#objective"> Objective </a>
            </li>
            <li><a href="#experience"> Experience </a>
            </li>
            <li><a href="#skills"> Skills </a>
            </li>
            <li><a href="#education"> Education </a>
            </li>
        </ul>
    </div>
</div>
<div class="span9">
    <section id="objective">
        <div class="page-header">
             <h1>
                Objective: <small> Do good </small>
            </h1>

        </div>
    </section>
    <section id="experience">
        <div class="page-header">
             <h1>
                Exprience: <small> I worked at a bit </small>
            </h1>

        </div>
    </section>
    <section id="skills">
        <div class="page-header">
             <h1>
                skills: <small> my skillz </small>
            </h1>

        </div>
    </section>
    <section id="education">
        <div class="page-header">
             <h1>
                education: <small> I went to school </small>
            </h1>
        </div>
    </section>
</div>

http://jsfiddle.net/gPsWe/1/

I want the 'affix nav' to get fixed to the top in a mobile layout with using the latest bootstrap v2.3.1. How do I go about it? Any suggestions?

Upvotes: 1

Views: 1743

Answers (1)

David Taiaroa
David Taiaroa

Reputation: 25475

Menus for mobile screens aren't always the easiest things to work with.

Using the layout you've started with, here's a simple idea where you remove the affixed behaviour for mobile screens: http://jsfiddle.net/panchroma/ZuELd/ . Doing this returns the menu to normal flow so then the content falls nicely into place underneath.

You might need to fine-tune the menu links, or even change them to a horizontal list for mobile screens, but that's easy enough to do from here.

CSS 

@media (max-width: 767px){
.affix{
    position:static;
}

}

Good luck!

Upvotes: 2

Related Questions