Bootstrap Snippet Navbar with custom sizes using HTML CSS Bootstrap

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.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="//maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css"
    rel="stylesheet">
    <nav class="navbar navbar-default navbar-xl navbar-inverse navbar-static-top" role="navigation">
      <div class="container-fluid">
        <!-- Brand and toggle get grouped for better mobile display -->
        <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>
        <!-- Collect the nav links, forms, and other content for toggling -->
        <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
          <ul class="nav navbar-nav">
            <li class="active">
              <a href="#">Link</a>
            </li>
            <li>
              <a href="#">Link</a>
            </li>
            <li class="dropdown">
              <a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown <span class="caret"></span></a>
              <ul class="dropdown-menu" role="menu">
                <li>
                  <a href="#">Action</a>
                </li>
                <li>
                  <a href="#">Another action</a>
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
.navbar-xl { min-height:80px; height: 80px; }
.navbar-xl .navbar-brand{ padding: 0px 12px;font-size: 24px;line-height: 80px; }
.navbar-xl .navbar-nav > li > a {  padding-top: 0px; padding-bottom: 0px; line-height: 80px; font-size:24px; }
.navbar-xl .navbar-text{ padding: 10px 12px;font-size: 24px; }
.navbar-xl .navbar-form {  padding-top: 10px; padding-bottom: 10px; }
.navbar-sm { min-height:28px; height: 40px; }
.navbar-sm .navbar-brand{ padding: 0px 12px;font-size: 16px;line-height: 40px; }
.navbar-sm .navbar-nav > li > a {  padding-top: 0px; padding-bottom: 0px; line-height: 40px; }
.navbar-sm .navbar-form { margin-top: 4px; padding-top: 0px; padding-bottom: 2px; }
.navbar-sm .navbar-text{ margin: 13px; padding: 0px 12px; line-height: 1; }
.navbar-xs { min-height:28px; height: 28px; }
.navbar-xs .navbar-brand{ padding: 0px 12px;font-size: 16px;line-height: 28px; }
.navbar-xs .navbar-nav > li > a {  padding-top: 0px; padding-bottom: 0px; line-height: 28px; }
.navbar-xs .navbar-form { margin-top: 3px; padding-top: 0px; padding-bottom: 2px; }
.input-xs { height: 22px; padding: 0px 5px; font-size: 12px; line-height: 1; border-radius: 3px; }
.navbar-xs .navbar-text{ margin: 7px; padding: 0px 12px; line-height: 1; }
#login-menu { min-width: 250px; padding: 14px 14px 0; overflow: hidden; background-color: rgba(255,255,255,.8);}
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

1
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

"Navbar with custom sizes"
Bootstrap 3.3.0 Snippet by ttorrez

Related: See More

Questions / Comments:

"Navbar with custom sizes" Bootstrap 3.3.0 Snippet by ttorrez

Related: See More

Questions / Comments:

"Navbar with custom sizes"
Bootstrap 3.3.0 Snippet by ttorrez