3
\$\begingroup\$

I need a second set of eyes to look at my twitter bootstrap 3 header. I would welcome some insight on the code structure and methodology as it relates to bootstrap best practices and efficiency.

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">


    <title>Navbar Template for Bootstrap</title>

    <!-- Bootstrap core CSS -->
    <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css" rel="stylesheet">
    <link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css" rel="stylesheet">
    <link href="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap-glyphicons.css" rel="stylesheet">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>

   <style type="text/css" media="screen">
      #navbar-xs { min-height:35px; border-radius:0; margin-bottom:10px; border-bottom: solid thin #ddd;} 
      #navbar-xs .navbar-inverse .navbar-toggle { border-color: none;}
      #navbar-xs .navbar-toggle { padding:0;}
      #navbar-xs .navbar-brand { padding: 8px 0px; font-size: 16px; line-height: 22px; height: 30px; } 
      #navbar-xs h4.navbar-brand { margin: 0px; } 
      #navbar-xs .navbar-nav > li a { padding: 0px 10px; margin:8px 0;}
      #navbar-xs .navbar-nav > li + li a { border-left:1px solid #ddd;  }

      #mainNav .container { margin-bottom: 12px;}
      #mainNav.navbar-default { background-color: transparent; border-width: 0;}
      #mainNav .nav { padding: 30px 0 0 20px;}
      #mainNav .navbar-nav > li > a { padding-bottom: 10px; padding-top: 10px;}
      #mainNav .navbar-brand { float: none; padding: 0; margin: 10px 0; width:250px; }
 
    @media (max-width: 767px) {
      #navbar-xs h4.navbar-brand { font-size: 14px; padding:6px 5px; } 
      #navbar-xs .navbar-brand { width: 280px;}

      #mainNav .navbar-brand { padding:0 60px 10px; margin:0; width:100%; height: auto; }
      #mainNav .nav, .navbar-collapse { padding: 0; margin:0; border-width:0;}
      #mainNav .navbar-collapse .navbar-nav { background-color: #f3f3f3; border-width: 0;}   
    }

   </style>
  </head>
  <body>
<!-- Start navbar-xs Top Navigation -->
<nav id="navbar-xs" class=" navbar-default" role="navigation">
  <div class="container">
    <!-- Brand and toggle -->
    <div class="navbar-header">
      <h4 class="navbar-brand">
        Place Main Tagline Goes Here - 
        <small>Sub Tag Here</small>
      </h4>
      <button type="button" class="navbar-toggle btn-sm" data-toggle="collapse" data-target=".navbar-ex1-collapse">
        <span class="sr-only">Company Name</span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </button>
    </div>
    <!-- toggling -->
    <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
      <ul class="nav navbar-nav navbar-right hidden-sm">
        <li><a href="#"><i class="fa fa-facebook"></i></a></l>
        <li><a href="#"><i class="fa fa-twitter"></i></a></li>
        <li><a href="#"><i class="fa fa-google-plus"></i></a></li>
      </ul>
      <ul class="nav navbar-nav navbar-right">
        <li>
          <a href="#"> <i class="glyphicon glyphicon-earphone"></i>
            1-800-555-1234
          </a>
        </li>
        <li class="dropdown">
          <a href="#" class="dropdown-toggle" data-toggle="dropdown"> <i class="glyphicon glyphicon-search"></i>
            Search
          </a>
          <ul class="dropdown-menu">
            <li>
              <div class="input-group input-group-sm" style="margin:5px; width:300px;">
                <input type="text" class="form-control" placeholder="Search for...">
                <span class="input-group-btn">
                  <button class="btn btn-default" type="button">
                    <i class="glyphicon glyphicon-search"></i>
                  </button>
                </span>
              </div>
            </li>
          </ul>
        </li>
        <li class="dropdown">
          <a href="#" class="dropdown-toggle" data-toggle="dropdown">
            Customer Service <b class="caret"></b>
          </a>
          <ul class="dropdown-menu">
            <li>
              <a href="#">Link One</a>
            </li>
            <li>
              <a href="#">Link Two</a>
            </li>
            <li class="divider"></li>
            <li>
              <a href="#">Section Two</a>
            </li>
          </ul>
        </li>
      </ul>
    </div>
  </div>
</nav>
<!-- End navbar-xs -->

<!-- Start mainNav Navigation -->
 <nav id="mainNav" class="navbar navbar-default" role="navigation">
    <div class="container">    
            <div class="navbar-header">
               <div class="navbar-brand" align="center">
                <a href="/">
                    <img class="img-responsive " src="http://placehold.it/350x70">
                </a>
            </div>
          </div>
            <!-- toggling -->
            <div class="collapse navbar-collapse navbar-ex1-collapse">
            <div class="row visible-xs"> 
              <img class="img-responsive" src="http://placehold.it/1200x10">
            </div>
                <ul class="nav navbar-nav navbar-right ">
                  <li><a href="#about">About</a></li>
                  <li><a href="#services">Services</a></li>
                  <li class="dropdown"><a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false">Dropdown <span class="caret"></span></a>
                    <ul class="dropdown-menu" role="menu">
                      <li><a href="#">Action</a></li>
                      <li class="divider"></li>
                      <li> <a href="#">Another action</a></li>
                      <li class="divider"></li>
                      <li><a href="#">Something else here</a></li>
                    </ul>
                  </li>
                </ul>
            </div>
            <div class="row"> <img class="img-responsive" src="http://placehold.it/1200x10" alt="">
        </div>
        <!-- /.container -->
    </nav>
   </body>
</html>

\$\endgroup\$
2
\$\begingroup\$
  • There's an "i" missing from facebook </li> tag (you can leave out the closing tags completely).
  • Since you declared HTML5 doctype, avoid using <i> and <b> for icons as they have semantic meaning, use <span> instead.
  • align="" attribute is deprecated, use css instead.
  • don't use <li class="divider"></li> elements, use css instead.
  • don't use <small> for styling purposes, use <span> and css instead.
\$\endgroup\$

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.