<link href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script> <script src="//code.jquery.com/jquery-1.11.1.min.js"></script> <!------ Include the above in your HEAD tag ----------> <link href="//fonts.googleapis.com/css?family=Hind" rel="stylesheet" type="text/css"> <link href="//fonts.googleapis.com/css?family=Open+Sans" rel="stylesheet" type="text/css"> <link href="//fonts.googleapis.com/css?family=Montserrat" rel="stylesheet" type="text/css"> <link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossorigin="anonymous"> <div class="container"> <h1>Responsive Navbar Example</h1> </div> <nav class="navbar navbar-inverse"> <div class="container-fluid"> <div class="navbar-header"> <a class="navbar-brand" href="#"> <span><img src="https://i.imgur.com/TpWQH9c.png" height="24"/></span class="hidden-xs hidden-sm"> sketch<span class="text-danger">U</span>cation </a> </div> <div> <div id="sk-top-welcome"> <ul class="nav navbar-nav navbar-right"> <li><li><button type="button" class="btn btn-danger btn-margin-right navbar-btn"><i class="fa fa-sign-in" aria-hidden="true"></i> Sign in</button></li></li> <li><button type="button" class="btn btn-success btn-margin-right navbar-btn">Register</button></li> </ul> </div> <div id="sk-top-modules"> <ul class="nav navbar-nav navbar-right"> <li><a href="#"><i class="fa fa-comments" aria-hidden="true"></i> Forums</a></li> <li><a href="#"><i class="fa fa-shopping-bag" aria-hidden="true"></i> Shop</a></li> <li><a href="#"><i class="fa fa-plug" aria-hidden="true"></i> Extensions</a></li> </ul> </div> </div> </div> </nav>

body { font-family:hind; } h1,h2,h3,h4,h5,h6{ font-family:montserrat; } p{ font-size:17px; } .navbar { border-radius: 0; font-family:montserrat; font-weight:600; } .navbar-inverse { background-color: #2c3e50; border-color: #2c3e50; } .navbar-inverse .navbar-brand, .navbar-inverse .navbar-nav>li>a { color: #fff; } .navbar-inverse .navbar-brand:hover, .navbar-inverse .navbar-nav>li>a:hover { background-color:#34495e; } .navbar-inverse .navbar-nav>.open>a, .navbar-inverse .navbar-nav>.open>a:hover, .navbar-inverse .navbar-nav>.open>a:focus { background-color: #34495e; } .navbar-inverse .navbar-nav>.active>a, .navbar-inverse .navbar-nav>.active>a:hover, .navbar-inverse .navbar-nav>.active>a:focus { background-color: #34495e; } .btn-margin-left { margin-left: 5px; } .btn-margin-right { margin-right: 10px; } .btn-danger { color: #fff; background-color: #c0392b; border-color: #c0392b; } .btn-danger:hover { background-color: #e74c3c; border-color: #e74c3c; } .btn-success { color: #fff; background-color: #27ae60; border-color: #27ae60; } .btn-success:hover { background-color: #2ecc71; border-color: #2ecc71; } .btn-primary { color: #fff; background-color: #2980b9; border-color: #2980b9; } .btn-primary:hover { background-color: #3498db; border-color: #3498db; } .badge-danger { background-color: #e74c3c; }