i'm using bootstrap material design template website. has three different colored navbars of want use last one. i'm unsure how use last one. need manually change color of navbar, or can change 1 thing somewhere color of buttons , radio buttons changes?
i found piece on github page points out how change primary color cusom one. don't want that, want use blue color see in third navbar option here.
any ideas how can that? tips welcome!
actually have use different classes change in colors, default bootstrap theme have navbar-default , navbar-inverse in theme you're using have class called navbar-material-light-blue-300 needs added in following manner.
<div class="navbar navbar-material-light-blue-300"> <div class="navbar-header"> <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-material-light-blue-collapse"> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button> <a class="navbar-brand" href="javascript:void(0)">brand</a> </div> <div class="navbar-collapse collapse navbar-material-light-blue-collapse"> <ul class="nav navbar-nav"> <li class="active"><a href="javascript:void(0)">active</a></li> <li><a href="javascript:void(0)">link</a></li> <li class="dropdown"> <a href="index.html" data-target="#" class="dropdown-toggle" data-toggle="dropdown">dropdown <b class="caret"></b></a> <ul class="dropdown-menu"> <li><a href="javascript:void(0)">action</a></li> <li><a href="javascript:void(0)">another action</a></li> <li><a href="javascript:void(0)">something else here</a></li> <li class="divider"></li> <li class="dropdown-header">dropdown header</li> <li><a href="javascript:void(0)">separated link</a></li> <li><a href="javascript:void(0)">one more separated link</a></li> </ul> </li> </ul> <form class="navbar-form navbar-left"> <input type="text" class="form-control col-lg-8" placeholder="search"> </form> <ul class="nav navbar-nav navbar-right"> <li><a href="javascript:void(0)">link</a></li> <li class="dropdown"> <a href="index.html" data-target="#" class="dropdown-toggle" data-toggle="dropdown">dropdown <b class="caret"></b></a> <ul class="dropdown-menu"> <li><a href="javascript:void(0)">action</a></li> <li><a href="javascript:void(0)">another action</a></li> <li><a href="javascript:void(0)">something else here</a></li> <li class="divider"></li> <li><a href="javascript:void(0)">separated link</a></li> </ul> </li> </ul> </div> </div> happy coding :)
Comments
Post a Comment