Page with Horizontal Navigation

Question

I am with a challenge to build a site using Bootstrap + Wordpress, however I need my container have horizontal navigation.

How do I do it in Bootstrap?

Answer 1

You can do this with pure CSS with ease, no need for third-party libraries. I made an example for you:

HTML:

<div id="content">
    <div class="post">
        <h1>Seja bem-vindo!</h1>

        <p>
            Este é o conteúdo
        </p>
    </div>
    <div class="post">
        <h1>Seja bem-vindo!</h1>

        <p>
            Este é o conteúdo
        </p>
    </div>
    <div class="post">
        <h1>Seja bem-vindo!</h1>

        <p>
            Este é o conteúdo
        </p>
    </div>
    <div class="post">
        <h1>Seja bem-vindo!</h1>

        <p>
            Este é o conteúdo
        </p>
    </div>
    <div class="post">
        <h1>Seja bem-vindo!</h1>

        <p>
            Este é o conteúdo
        </p>
    </div>
    <div class="post">
        <h1>Seja bem-vindo!</h1>

        <p>
            Este é o conteúdo
        </p>
    </div>
    <div class="post">
        <h1>Seja bem-vindo!</h1>

        <p>
            Este é o conteúdo
        </p>
    </div>
</div>

CSS:

html, body {margin: 0; padding: 0;}

#content {
    width: auto;
    height: 210px;
    border: 5px solid red;
    overflow-x: scroll;
    overflow-y: hidden;
    white-space: nowrap;
}

#content .post {
    background-color: gray;
    width: 300px;
    display: inline-block;
    vertical-align: middle;
}

.post h1 {
    font-size: 24px;
}

.post p {
    font-size: 14px;
    margin-top: 15px;
}

You can see the demonstration clicking here (jsFiddle).

Answer 2

It becomes simpler to build using the Odin, because he’s all set up to work with Bootstrap. See the demo: http://wpod.in/demo/

It is an Open Source project and totally national, worth checking out.