Page with Horizontal Navigation

1

I'm challenged to build a site using Bootstrap + Wordpress, however I need my container to have horizontal navigation.

How do I do this in Bootstrap?

    
asked by anonymous 13.06.2014 / 16:27

2 answers

1

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

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 view the demo by clicking here (jsFiddle) .

    
13.06.2014 / 16:34
1

It's simpler to build using Odin because it's all ready to work with Bootstrap. See the demo: link

It is an open source project and totally national, it's worth checking.

    
15.06.2014 / 21:37