AcaiBerry46Pills
New Member
I am trying to use two Twitter Bootstrap navs on the same page. I have written some css to style them. Problem is, I want the css to apply to just one of the navs. I tried to use css ids to distinguish the two navs, but am having trouble getting the selectors right. Can anyone help?Here's a simplified version of what I'm trying to do: http://jsfiddle.net/XVReX/HTML:\[code\]<div id="something" class="navbar"> <div class="navbar-inner"> <div class="container"> <ul class="nav"> <li id="selectEventStep"><a>Select Event</a> </li> <li id="selectPriceStep"><a>Select Price</a> </li> <li id="confirmSwapStep"><a>Confirm Swap</a> </li> </ul> </div> </div></div><div class="navbar"> <div class="navbar-inner"> <div class="container"> <ul class="nav"> <li id="selectEventStep"><a>Select Event</a> </li> <li id="selectPriceStep"><a>Select Price</a> </li> <li id="confirmSwapStep"><a>Confirm Swap</a> </li> </ul> </div> </div></div>\[/code\]CSS:\[code\]#something.navbar #something.navbar-inner { padding: 0; background-image: -webkit-linear-gradient(top, #E5665D, #C4564F);}#something.navbar #something.nav li a { font-weight: bold; text-align: center; color: #FFE2E0; text-shadow: 0 1px 0 #000; ;}#something.navbar #something.nav li a:hover { color: #fff;}\[/code\]Thanks!