restricting the width of the submenubar in bootstrap - html

Question

I am trying to restrict the width of the submenu items "Certification" and "Training", Currently it is occupying the whole window size.
Here is the code
<div class="navbar navbar-inverse navbar-fixed-top" >
<div class="container" >
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<div >
#* #Html.ActionLink("Application name", "Index", "Home", null, new { #class = "navbar-brand" })*#<img src="~/Images/InfosysLogo.png" style="height:70px;width:200px" />
</div>
</div>
<div class="navbar-collapse collapse">
<ul id="nav" class="nav navbar-nav">
<li>#Html.ActionLink("DashBoard", "ExecutiveDashboard", "Charts")</li>
<li>#Html.ActionLink("Engagement Metrics", "EngagementMatrix", "Charts")</li>
<li>#Html.ActionLink("Quality Metrics", "Contact", "Home")</li>
<li>
#Html.ActionLink("People Aspects", "Contact", "Home")
<ul>
<li>#Html.ActionLink("Certifications", "Index", "Certification",null, new { #class = "my-class" })</li>
<li>#Html.ActionLink("Trainings", "Index", "Training", null,new { #class = "my-class" })</li>
</ul>
</li>
<li>#Html.ActionLink("Financials", "BudgetVSActualChart", "Financial")</li>
<li>#Html.ActionLink("Admin", "AdminView", "PMODashboard")</li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li class="navbar-text">Hello, #User.Identity.Name!</li>
</ul>
</div>
</div>
</div>
Any help will be appreciable
Thank you

Answer 1

Since you are loading in bootstrap anyway, you should use the bootstrap grid system. Add for example class="col-lg-3" to your div you want to rescrict in width. You can find more information about the grid system on Bootstrap grid page. This is always a nice way to make your page responsive!

Answer 2

Allright, I found the problem you are having:
The problem is that .nav-collapse has a with of auto.
There are 2 ways you could fix this.
Overwrite the .collapse in your css file like:
.navbar-collapse {
width:250px;
box-shadow: none;
border-top: 0px;
}
You find your bootstrap.css file and look for the following 2 rules:
#media (min-width: 768px) {
.navbar-collapse {
Here you remove the line that says width:auto;
I would advise you to use example 1.
Check out this jsfiddle
Let me know if it works for you!
Cheers

Answer 3

I used the class dropdown to the item on which dropdown will appear and class dropdown-menu in the un ordered list tag and it resolved my issue.
<ul id="nav" class="nav navbar-nav">
<li>#Html.ActionLink("DashBoard", "ExecutiveDashboard", "Charts")</li>
<li>#Html.ActionLink("Engagement Metrics", "EngagementMatrix", "Charts")</li>
<li>#Html.ActionLink("Quality Metrics", "Contact", "Home")</li>
<li class="dropdown">
#Html.ActionLink("People Aspects", "Contact", "Home")
<ul class="dropdown-menu navbar-inverse">
<li>#Html.ActionLink("Certifications", "Index", "Certification")</li>
<li>#Html.ActionLink("Trainings", "Index", "Training")</li>
</ul>
</li>
<li>#Html.ActionLink("Financials", "BudgetVSActualChart", "Financial")</li>
<li>#Html.ActionLink("Admin", "AdminView", "PMODashboard")</li>
</ul>