html - How can I make this navigation bar more responsive? -
.navbar-brand { padding: 0px; } .navbar-brand>img { height: 50px; padding:10px; } .glyphicon { font-size: 30px; color: red; } .navbar { margin-bottom: 0; background-color: #2d2d30; border: 0; letter-spacing:2px; opacity:0.5; z-index:0; } .navbar-nav li a:hover { color: gainsboro!important; } .navbar-default .navbar-toggle { border-color: transparent; } <!doctype html> <html> <head> <title>digiconnect portal</title> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.0/jquery.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> <link rel="stylesheet" href="digiconnect.css"> </head> <body data-spy="scroll" data-target=".navbar" data-offset="50"> <nav class="navbar navbar-default navbar-fixed-top" id="page-content-wrapper"> <div class="container-fluid"> <div class="navbar-header"> <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#mynavbar"> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button> <a class="navbar-brand" href="#"><span style="padding: 10px 10px 0px 10px;" class="glyphicon glyphicon-menu-hamburger" id="menu-toggle"></span></a> <a class="navbar-brand" href="#"><img src="headerlogo.png" class="img-responsive" hspace="50"></a> </div> <div class="collapse navbar-collapse" id="mynavbar"> <ul class="nav navbar-nav navbar-right"> <li><a href="#"><span class="glyphicon glyphicon-bell"></span></a></li> <li><a href="#"><span class="glyphicon glyphicon-search"></span></a></li> </ul> </div> </div> </nav> </body> </html> whenever screen size reduced width of navigation bar increased , hamburger icon , logo not appear in navigation bar. not proper responsive how can make more responsive reducing effects.
Comments
Post a Comment