CODEWITHSUNDEEP
csstabstwitter-bootstrap-3
Murhaf Sousli
Murhaf Sousli

Reputation: 13296

Bootstrap : prevent "nav-tabs nav-justified" from stacking on small screen

I'm using Twitter Bootstrap 3 and I have a sidebar and tabs in it.

enter image description here

<div class="col-md-4">
    <div class="side-posts">
        <ul class="nav nav-tabs nav-justified">
          <li class=""><a href="#recent" data-toggle="tab"><span data-icon="&#xe048;"></span> Recent</a></li>
          <li class="active"><a href="#top" data-toggle="tab"><span data-icon="&#xe0b0;"></span> Popular</a></li>
        </ul>

        <div class="tab-content">
        .....
        </div>
    </div>
</div>

When screen's width gets smaller the tabs stack on each other like this

enter image description here

Is it possible to keep the original look and prevent this change?

Upvotes: 3

Views: 5049

Answers (3)

Sikhumbuzo Dlamini
Sikhumbuzo Dlamini

Reputation: 31

This worked perfectly for me, even keeps the default styling for bootstrap justified nav-bar.**

@media (max-width: 768px){
    .nav-justified > li {
        display: table-cell;
        width: 1%;
  }
    .nav-justified > li > a  {
        border-bottom: 1px solid #ddd !important;
        border-radius: 4px 4px 0 0 !important;
        margin-bottom: 0 !important;
  }
    .nav-justified > li.active > a  {
        border-bottom: 1px solid transparent !important;
  }

}

Upvotes: 1

Murhaf Sousli
Murhaf Sousli

Reputation: 13296

I had to write my own tabs style to get it work.

enter image description here

Here is a live bootply

in case link got broken here is the css:

/* CSS used here will be applied after bootstrap.css */
body{
    background-color: #f2f2f2; 
}
.container{
    width: 325px;  
}
.side-posts{
    margin-top:15px;
}
.post-tabs{
  padding:0;
  margin-bottom:0;
  list-style-type: none;
  overflow: hidden;
}
.post-tabs li{
    display: inline;
}
.post-tabs a{
    display: block;
    z-index: 1;
    text-decoration: none;
    padding: 10px 15px;
    float:  left;
    width: 50%;
    text-align:center;
    border-bottom: 1px solid #dddddd;
    text-shadow: 1px 1px 0 white;
    transition:color 0.3s ease;
    background: rgba(255,255,255,1);
    background: -moz-linear-gradient(top, rgba(255,255,255,1) 0%, rgba(246,246,246,1) 47%, rgba(237,237,237,1) 100%);
    background: -webkit-gradient(left top, left bottom, color-stop(0%, rgba(255,255,255,1)), color-stop(47%, rgba(246,246,246,1)), color-stop(100%, rgba(237,237,237,1)));
    background: -webkit-linear-gradient(top, rgba(255,255,255,1) 0%, rgba(246,246,246,1) 47%, rgba(237,237,237,1) 100%);
    background: -o-linear-gradient(top, rgba(255,255,255,1) 0%, rgba(246,246,246,1) 47%, rgba(237,237,237,1) 100%);
    background: -ms-linear-gradient(top, rgba(255,255,255,1) 0%, rgba(246,246,246,1) 47%, rgba(237,237,237,1) 100%);
    background: linear-gradient(to bottom, rgba(255,255,255,1) 0%, rgba(246,246,246,1) 47%, rgba(237,237,237,1) 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#ededed', GradientType=0 );

    color:#3b5998;
}
.post-tabs a:hover{
    color:#e95c40;
}
.post-tabs li.active a{
    border-bottom: 0;
    color: #444444;
    z-index: 2;
}

.post-tabs li.active:first-child a {
    border-right: 1px solid #dddddd;
    box-shadow: inset -3px 0px 3px 0px rgba(0,0,0,0.4);
}
.post-tabs li.active:last-child a{
    border-left: 1px solid #dddddd;
    box-shadow: inset 3px 0px 3px 0px rgba(0,0,0,0.4);
}
.tab-content{
    height:400px;  
    background-color: #dddddd;
}

Upvotes: 2

Alessandro Incarnati
Alessandro Incarnati

Reputation: 7248

You can add float:left; and remove float:none; editing the mobile media query inside bootstrap like:

 @media (min-width: 768px){
    .nav-tabs.nav-justified > li {
        float: none;
        }
    }

@media (max-width: 768px){
.nav-tabs.nav-justified > li {
    float: left;
    }
}

DEMO http://jsfiddle.net/a_incarnati/52VtD/7771/

Upvotes: 1

Related Questions