CODEWITHSUNDEEP
htmlcsstwitter-bootstrap
Timsen
Timsen

Reputation: 4126

How to make fixed navbar inside column to resize properly?

Ive created a left navigation bar which is fixed to the top when user is scrolling, this part is working great. However, when i resize the resolution, at some point left navigation bar is moving on top of the MAIN content, and i cant figure out how to prevent this with fixed div.

Bonus question, how do i make left navigation to have red background for whole col-md-2 column?

picture to explain what is going on

in fiddle i didnt add top navigation.

Fiddle: http://jsfiddle.net/9ayLc825/1/

<body>
    <div class=" col-md-2">
        <ul class="nav nav-pills nav-stacked mainMenu ">
            <li>
                <a><i class="fa fa-tags fa-2x"></i>xxxxxx <span class="caret pull-right margin-top"></span></a>
                <ul class="nav nav-pills nav-stacked">
                    <li>xxxxxx</li>
                </ul>
            </li>
            <li><a><i class="fa fa-cog fa-2x"></i>xxxxx</a></li>
            <li><a><i class="fa fa-users fa-2x"></i>xxxxxx <span class="caret pull-right margin-top"></span></a></li>
            <li><a><i class="fa fa-area-chart fa-2x"></i>xxxxxx</a></li>
        </ul>

    </div>
    <div class="col-md-10">
        <div class="row">
            <div class="col-md-12">
  MAIN
            </div>
        </div>
    </div>

</body>

Fiddle : http://jsfiddle.net/9ayLc825/

Upvotes: 0

Views: 344

Answers (1)

Pavan
Pavan

Reputation: 655

Try to give html,body width and height 100%, based on that use nav bar width height percentages using css media queries as shown below.

html,body{
height: 100%;

width: 100%; }

@media (max-width: 900px) {

.navClass { width:10%;height:20%; // values are just for reference }

Upvotes: 1

Related Questions