css - HTML: Bootstrap Navbar has full spanning underline that I can't identify? -

-

i creating practice navbar using bootstrap cdn. cake except default there underline either wish remove or customize, didn't put there not sure how identify in css selectors.

enter image description here

using chrome dev tools found item display: table when disable bar jumps above tabs. table relate behind tabs, not actual line itself.

my html:

<!doctype html> <html lang="en"> <head> <meta charset="utf-8"> <title>mockup navbar</title> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css"> <style type="text/css">     body {         background-color: gray;     }     #home {         padding: 11px;         background-color: #64a3dd;         color: white;         border-radius: 3px;     }     .divider {         width: 80%;     }      {         color: #ffffff;     }     .dropdown {         margin-right: 1px;         margin-left: 1px;         border-radius: 3px;         background-color: #64a3dd;     } </style> </head> <body> <div class="menu-mockup" style="center">     <ul class="nav nav-tabs">         <li class="active">             <div id="home">             <a href="#"><i class="fa fa-home"></i></a>             </div>         </li>         <li class="dropdown">             <a href="#" data-toggle="dropdown" class="dropdown-toggle">community</a>                         <ul class="dropdown-menu">                     <li><a href="#">recent activity</a></li>                     <li class="divider"></li>                     <li><a href="#">member forum</a></li>                     <li class="divider"></li>                     <li><a href="#">member list</a></li>                     <li class="divider"></li>                     <li><a href="#">member groups</a></li>                 </ul>         </li>         <li class="dropdown">             <a href="#" data-toggle="dropdown" class="dropdown-toggle">pet help</a>                      <ul class="dropdown-menu">                     <li><a href="#">pets dummies</a></li>                     <li class="divider"></li>                     <li><a href="#">expected costs</a></li>                     <li class="divider"></li>                     <li><a href="#">breeds</a></li>                     <li class="divider"></li>                     <li><a href="#">pet quiz</a></li>                 </ul>         </li>         <li class="dropdown">             <a href="#" data-toggle="dropdown" class="dropdown-toggle">pets sale</a>                 <ul class="dropdown-menu">                     <li><a href="#">buying guide</a></li>                     <li class="divider"></li>                     <li><a href="#">search location</a></li>                     <li class="divider"></li>                     <li><a href="#">search species</a></li>                     <li class="divider"></li>                     <li><a href="#">pet accessories</a></li>                 </ul>         </li>         <li class="dropdown">             <a href="#" data-toggle="dropdown" class="dropdown-toggle">pet services</a>                 <ul class="dropdown-menu">                     <li><a href="#">veterinarians</a></li>                     <li class="divider"></li>                     <li><a href="#">grooming</a></li>                     <li class="divider"></li>                     <li><a href="#">training</a></li>                     <li class="divider"></li>                     <li><a href="#">pet clubs</a></li>                 </ul>             </li>         </ul>    </div> </body> </html>

all need add css:

.menu-mockup .nav-tabs {   border-bottom: 0; }

working code snippet:

body {    background-color: gray;  }  #home {    padding: 11px;    background-color: #64a3dd;    color: white;    border-radius: 3px;  }  .divider {    width: 80%;  }  {    color: #ffffff;  }  .dropdown {    margin-right: 1px;    margin-left: 1px;    border-radius: 3px;    background-color: #64a3dd;  }  .menu-mockup .nav-tabs {    border-bottom: 0;  }
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css">    <body>    <div class="menu-mockup" style="center">      <ul class="nav nav-tabs">        <li class="active">          <div id="home">            <a href="#"><i class="fa fa-home"></i></a>          </div>        </li>        <li class="dropdown">          <a href="#" data-toggle="dropdown" class="dropdown-toggle">community</a>           <ul class="dropdown-menu">            <li><a href="#">recent activity</a>            </li>            <li class="divider"></li>            <li><a href="#">member forum</a>            </li>            <li class="divider"></li>            <li><a href="#">member list</a>            </li>            <li class="divider"></li>            <li><a href="#">member groups</a>            </li>          </ul>        </li>        <li class="dropdown">          <a href="#" data-toggle="dropdown" class="dropdown-toggle">pet help</a>           <ul class="dropdown-menu">            <li><a href="#">pets dummies</a>            </li>            <li class="divider"></li>            <li><a href="#">expected costs</a>            </li>            <li class="divider"></li>            <li><a href="#">breeds</a>            </li>            <li class="divider"></li>            <li><a href="#">pet quiz</a>            </li>          </ul>        </li>        <li class="dropdown">          <a href="#" data-toggle="dropdown" class="dropdown-toggle">pets sale</a>          <ul class="dropdown-menu">            <li><a href="#">buying guide</a>            </li>            <li class="divider"></li>            <li><a href="#">search location</a>            </li>            <li class="divider"></li>            <li><a href="#">search species</a>            </li>            <li class="divider"></li>            <li><a href="#">pet accessories</a>            </li>          </ul>        </li>        <li class="dropdown">          <a href="#" data-toggle="dropdown" class="dropdown-toggle">pet services</a>          <ul class="dropdown-menu">            <li><a href="#">veterinarians</a>            </li>            <li class="divider"></li>            <li><a href="#">grooming</a>            </li>            <li class="divider"></li>            <li><a href="#">training</a>            </li>            <li class="divider"></li>            <li><a href="#">pet clubs</a>            </li>          </ul>        </li>      </ul>    </div>  </body>


Comments

Post a Comment

Popular posts from this blog

yii2 - Yii 2 Running a Cron in the basic template -

-
i have seen instructions on running cron in advanced template, cant figure out how on basic template. have following controller in basic controllers folder. <?php namespace app\controllers; use yii\console\controller; /** * cron controller */ class croncontroller extends controller { public function actionindex() { echo "cron service runnning"; } public function actionmail($to) { echo "sending mail " . $to; } } i have navigated root of application , tried these comands yii cron php yii cron im getting unknown comand "cron" i know old question failed find actual answer this. if @ code yii exec file you'll notice requires /common/config/aliases.php file console/config/main.php. can naturally change these or copy on these advanced template. hope solves problem wanting same thing.
Read more

asp.net - 'System.Web.HttpContext' does not contain a definition for 'GetOwinContext' Mystery -

-
i realize question might seem trivial some, it's these types of things find myself fighting quite bit , want make sense of despite seeming losing battle in .net (for me anyway). so, if following: using system.web; ... applicationuser user = system.web.httpcontext.getowincontext().getusermanager<applicationusermanager>().findbyid(system.web.httpcontext.user.identity.getuserid()); that produces error in title , red getowincontext() , error cannot resolve symbol 'getowincontext()' however, if following (remove system.web in front of httpcontext ), works expected (or @ least no errors): using system.web; ... applicationuser user = httpcontext.getowincontext().getusermanager<applicationusermanager>().findbyid(system.web.httpcontext.user.identity.getuserid()); however, if (same line that's working using system.web commented out): //using system.web; ... applicationuser user = httpcontext.getowincontext().getusermana...
Read more

mercurial graft feature, can it copy? -

-
there new feature in mercurial 3, called 'graft' (graft local). job of moving change-set different branch. is there way "copy" change-set branch? i interested in in moving stuff qa branch production branch, still need code reside in qa. want copy. found , have tried few things, maybe it'll become clear more tinkering , reading... does have better way of 'cherry picking' change-sets move cross branch (or trunk)??? graft copies changesets, doesn't move them. hg graft (emphasis mine): this command uses mercurial's merge logic copy individual changes other branches without merging branches in history graph. known 'backporting' or 'cherry-picking' . default, graft copy user, date, , description source changesets.
Read more