html - <li> element not filling entire nav bar -
i'm having issue navigation bar i'm working with. added image right of links, li elements containing text stop filling entire height of nav bar. how can make fill entire height of bar?
edit: added url image it's possible view in live preview
html
<html lang="en"> <head> <meta charset="utf-8"> <title>document</title> <script src="{% static 'js/jquery-2.1.4.js' %}"></script><!-- jquery --> <link href='http://fonts.googleapis.com/css?family=hind:600,700,400,500' rel='stylesheet' type='text/css'><!-- google fonts --> <!-- begin bootstrap --> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css"> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap-theme.min.css"> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script> <!-- end bootstrap --> <link rel="stylesheet" href="{% static 'css/main.css' %}"> </head> <body> <nav class="navbar navbar-default"> <div class="container-fluid"> <div class="navbar-header"> <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1"> <span class="sr-only">toggle navigation</span> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button> <a class="navbar-brand" href="#">brand</a> </div> <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1"> </ul> <ul class="nav navbar-nav navbar-right"> <!-- why don't css attributes work when 'nav-link' class? --> <li><a href="#" id="nav-link">link</a></li> <li><a href="#" id="nav-link">another link</a></li> <li><a href="#" id="nav-link">and another</a></li> <li><a href="#" id="nav-link"><img src="http://steamcommunity-a.akamaihd.net/public/images/signinthroughsteam/sits_small.png" alt="sign in through steam"></a></li> <!-- steam login/add functionality --> </ul> </div> </div></nav> <div class="container"> <div class="row"> <div class="col-md-6 game-info"> </div> <div class="col-md-6 progress-bar"> </div> </div> </div> <script src="{% static 'js/main.js' %}"></script> </body> </html> css
body { background-color: white; } /***************************************** nav *****************************************/ .navbar-default { background:#373737; border:0; border-radius:0px; } nav { font-family: 'hind', sans-serif; } #nav-link { -webkit-transition: background .5s ease-out; -moz-transition: background .5s ease-out; -ms-transition: background .5s ease-out; -o-transition: background .5s ease-out; transition: background .5s ease-out; font-weight:600; font-size:16px; color:#ffffff; text-shadow:none; background:#373737; } #nav-link:hover { -webkit-transition: background .5s ease; -moz-transition: background .5s ease; -ms-transition: background .5s ease; -o-transition: background .5s ease; transition: background .5s ease; background:#14a1ff; } /******************************************* body *******************************************/ .container { width:100%; } .game-info { background:black; } .progress-bar { background:blue; }
html
<ul class="nav navbar-nav navbar-right"> <li class="nav-item"><a href="#">link</a></li> <li class="nav-item"><a href="#">another link</a></li> <li class="nav-item"><a href="#">and another</a></li> <li class="nav-item"><a href="#"><img src="http://steamcommunity-a.akamaihd.net/public/images/signinthroughsteam/sits_small.png" alt="sign in through steam"></a></li> </ul> css
.nav-item { -webkit-transition: background .5s ease-out; -moz-transition: background .5s ease-out; -ms-transition: background .5s ease-out; -o-transition: background .5s ease-out; transition: background .5s ease-out; font-weight:600; font-size:16px; color:#ffffff; text-shadow:none; background:#373737; } .nav-item:hover { -webkit-transition: background .5s ease; -moz-transition: background .5s ease; -ms-transition: background .5s ease; -o-transition: background .5s ease; transition: background .5s ease; background:#14a1ff; }
Comments
Post a Comment