CODEWITHSUNDEEP
htmlcsstwitter-bootstrap
Jordyn
Jordyn

Reputation: 1133

Make a custom navigation scroll on mobile devices bootstrap

I made a custom navigation bar inside a div im using bootstrap. I want the overflow-x to be scroll on mobile devices. Issue is I want to keep the maximum width of the navigation bar on mobile device and scroll it.

I don’t want the li tags to be one below the other.

Ex: wrong way

Button 1

Button 2

Button 3

Button 4 so on

Correct way

Button 1 | Button 2 | Button 3 | Button 4 | so on and make it scroll on mobile devices

HTML

<div class="col-md-10">
        <ul class="my-nav">
        <li><a class="btn-nav tab-active" href="">Button 1</a></li>
          <li><a class="btn-nav" href="">Button 2</a></li>
          <li><a class="btn-nav" href="">Button 3</a></li>
          <li><a class="btn-nav" href="">Button 4</a></li>
          <li><a class="btn-nav" href="">Button 5</a></li>
        </ul>
</div>

CSS

.my-nav {
    margin: 0;
    padding: 0;
    list-style: none;
}
.my-nav li {
    float: left;
}
.my-nav li a, .my-nav li a:link, .my-nav li a:visited {
    color: #000;
    font-size: 15px;
}
.my-nav li a:hover {
    border-bottom: 4px solid #CCC;
}
a.btn-nav.tab-active, a.btn-nav.tab-active:visited, a.btn-nav.tab-active:hover {
    color: #27a020;
    border-bottom: 4px solid #27a020;
}
.btn-nav {
    display: block;
    text-align: center;
    padding:15px 25px;
}

JSFiddle

Upvotes: 0

Views: 1197

Answers (1)

Nutshell
Nutshell

Reputation: 8537

EDIT

To achieve this, you can add a media query for mobile width with an overflow-x: scroll; property for the parent of the nav bar : 

@media (max-width: 640px){
  .parent { 
    overflow-y:hidden;
    overflow-x:scroll;
  }
  .my-nav {
    height: 70px; 
    width: 600px; 
  }
}

I volontary applied a fixed width to make the horizontal scroll works, but you can calculate it with a javascript script if you prefer.

Get informations about device width : http://www.mydevice.io/devices/

Live example

Upvotes: 1

Related Questions