CODEWITHSUNDEEP
htmlcsstwitter-bootstrap
Taerus
Taerus

Reputation: 475

Keep nav items on one line on small devices

Currently my nav nav-tabs are being pushed to a next line if i make my screen smaller, however i wish to keep them on one line and enable overflow-x when they pass the 768px breakpoint. I cannot figure out how to make this work, can anyone help?

html

<nav class="navbar navbar-fixed-top navbar-default">
    <div class="container">
        <div class="navbar-header">
            <div class="min-width" ng-if="user.loggedIn" id="char-nav" bs-scrollspy-list>
                <ul class="nav nav-tabs" role="tablist">
                    <li><a href="/#char-identity">Identity</a></li>
                    <li><a href="/#char-attributes">Attributes</a></li>
                    <li><a href="/#char-skills">Skills</a></li>
                    <li><a href="/#char-spells">Spells</a></li>
                    <li><a href="/#char-passives">Passives</a></li>
                    <li><a href="/#char-equipment">Equipment</a></li>
                    <li><a href="/#char-consumables">Consumables</a></li>
                </ul>
            </div>
        </div>
    </div>
</nav>

current css

#char-nav {
    border: none;
    margin-top: 13px;
}
.nav-tabs {
    border: none;
}
.nav > li > a {
    padding: 8px 15px;
}

@media screen and (max-width: 767px) {
    #char-nav {
        display: inline-block;
        overflow-x: scroll;
        overflow-y: hidden;
        white-space: nowrap;
        max-width: 80%;
        margin-top: 0;
    }
}

Upvotes: 3

Views: 3237

Answers (1)

BENARD Patrick
BENARD Patrick

Reputation: 30975

Here is a bit of css :

.min-width{ 
    overflow-x:auto 
}
ul.nav{
    display:inline-flex
}

And a bootply : http://www.bootply.com/BRqVaRNnZP

Upvotes: 3

Related Questions