SO mobile menu II

by panchroma

HTML

<script src="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.3.1/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.3.1/css/bootstrap-combined.min.css">
<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>
</div>

CSS

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

.nav-stacked > li {
float: left;
}
.span3{
    overflow:hidden;
}

}