Let's set up the header and footer for our social networking website. It's going to be made up of the regular Bootstrap navbar component, with some new customizations. The main new items will be an icon-based navigation, a search bar, a utility drop-down menu, and some mobile-specific styling.
I'll start out by showing you the code for the entire header, and then we'll dissect the parts that we need to update. Start off by creating a file called _header.ejs, and save it in the /partial directory. Then, insert this code:
<nav class="navbar navbar-default" role="navigation">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar1">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<...