CODEWITHSUNDEEP
jquerycsstwitter-bootstrapnavbar
mridul
mridul

Reputation: 2096

Bootstrap : Dropdown in top navbar in fixed place

I am trying to make dropdown in top navbar. And I want to show the dropdown content in fixed place.

Dropdown box of each navitem shown in different places.

Here the picture of dropdown content of left most navitem. I want to show the dropdown box of all navitem in this place.

dropdown content of left most navitem

Here the picture of dropdown content of 5th navitem. But dropdown box show in right side of that navitem.

dropdown content of navitem

Navbar:

    <nav class="navbar navbar-default" role="navigation">
    <div class="navbar-header">
        <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-ex1-collapse">
             <span class="sr-only">Toggle navigation</span>
             <span class="icon-bar"></span>
             <span class="icon-bar"></span>
             <span class="icon-bar"></span>
        </button>
    </div>

    <div class="collapse navbar-collapse dropdown navbar-ex1-collapse">
        <ul class="nav navbar-nav category-nav">
          <li><a href="#" data-toggle="dropdown" style="border-right&#58;#fff 1px solid;color:white;">Electronics</a>
            <ul class="dropdown-menu" role="menu" aria-labelledby="dLabel">
                    <li><a href="#">subcategory1</a>
                        <ul>
                                <li><a href="#" style="color:black">sub_subcategory1</a></li>   
                                <li><a href="#" style="color:black">sub_subcategory2 ....</a></li>
                        </ul>
                    </li>
                    <li><a href="#" >subcategory2</a>
                        <ul>
                                <li><a href="#" style="color:black">sub_subcategory</a></li>                
                        </ul>
                    </li>
                    <li><a href="#">subcategory3</a>
                        <ul>
                                <li><a href="#" style="color:black">sub_subcategory</a></li>                
                        </ul>
                    </li>
                    <li><a href="#">subcategory4</a>
                        <ul>
                                <li><a href="#" style="color:black">sub_subcategory1</a></li>   
                                <li><a href="#" style="color:black">sub_subcategory2 ....</a></li>
                        </ul>
                    </li>
                    <li><a href="#" >subcategory5</a>
                        <ul>
                                <li><a href="#" style="color:black">sub_subcategory</a></li>                
                        </ul>
                    </li>
                    <li><a href="#">subcategory6</a>
                        <ul>
                                <li><a href="#" style="color:black">sub_subcategory</a></li>                
                        </ul>
                    </li>
                </ul>
         </li>
... .... ...
<li><a href="#" data-toggle="dropdown" style="border-right&#58;#fff 1px solid;color:white;">Food</a>
....
   </ul>
 </div>

</nav>

Jquery to hieght and width of dropdown content:

$('.navbar-nav>li>.dropdown-menu').css("width",$('.category-nav').width());
$('.navbar-nav>li>.dropdown-menu').css("max-height","300px");

Upvotes: 0

Views: 2433

Answers (2)

mridul
mridul

Reputation: 2096

change properties of dropdown menu in css

.dropdown-menu {
position: fixed !important;
/*left: 25% !important;*/
top:146px;
display: none;

}

to centralize dropdown-menu and set width add this jquery

var ddw = $('.category-nav').width();//set ddw to width of navbar
$('.navbar-nav>li>.dropdown-menu').css("width",ddw);
$('.dropdown-menu').css("left",($(window).width()-ddw)/2);//centralise dropdown menu
$(window).resize(function() {
    $('.dropdown-menu').css("left",($(window).width()-ddw)/2);//centralise dropdown menu during resizing window
});

Upvotes: 1

Pinki
Pinki

Reputation: 1042

Your Problem is that the position of the ul.nav > li > ul is relative to the ul.nav > li. This should be removed in your CSS and you should instead add position:relative; to your ul.nav

Then you're a step closer. But i can only provide more Help if you can show me your CSS. Or better the live example.

Upvotes: 0

Related Questions