CODEWITHSUNDEEP
javascriptcsstwitter-bootstrap
Snippet
Snippet

Reputation: 1560

Bootstrap:Fixed nav-static-top on top but scrollable nav-collapse

I am using bootstrap to design my site.

Base on this fiddle

I made the nav-static-top to fixed on top. Now the nav-collapse has to many contents and i can't browse to the last menu because the nav-static-top is fixed on top. Is there a way that the nav-static-top is fixed on top and the nav-collapse content is scrollable so i can scroll to choose on the content?

i've than something like this but i doesn't look good and i think android devices don't support overflow:scroll

Upvotes: 3

Views: 2894

Answers (2)

Snippet
Snippet

Reputation: 1560

Found a better way. Tested on iphone 4 only.

@media (max-width: 767px) { 
.body-container {
    padding-top: 50px;
    margin-left:10px;
    margin-right:10px; 
}

.navbar-static-top{
    position:fixed;
    width:100%;
    z-index:1000;
}
.navbar-responsive-collapse{
    max-height: 350px;  
        overflow-y: auto; 
        -webkit-overflow-scrolling: touch; 
    }

}

Upvotes: 2

Sam G-H
Sam G-H

Reputation: 627

This doesn't completely fix your problem, but it definitely looks better if you do this:

<div class="nav-collapse collapse navbar-responsive-collapse" style="overflow-y: scroll;max-height:400px">
<ul class="nav">

instead of 

<div class="nav-collapse collapse navbar-responsive-collapse">
<ul class="nav" style="overflow: scroll;max-height:400px">

I don't know about doing it on Android, but if it really doesn't work this way, you'll probably have write some JS or something.

Upvotes: 1

Related Questions