Customization
Sass
Flat is built with Sass. To create a customized version, open _variables.scss file and edit variables, then compile flat.scss to generate a custom stylesheet.
Colors
To change navbar color, replace navbar-default for navbar-inverse.
<!-- Default color -->
<nav class="navbar navbar-default">
...
</nav>
<!-- Inverse color -->
<nav class="navbar navbar-inverse">
...
</nav>
Display
To change navbar to an off canvas menu, add navbar-offcanvas and navbar-fixed-left or navbar-fixed-right to place the menu on the selected side.
<!-- Off canvas -->
<nav class="navbar navbar-offcanvas navbar-fixed-left">
...
</nav>
Position
To change navbar position, replace navbar-static-top for navbar-fixed-top or navbar-fixed-bottom.
<!-- Scrolls away with the page -->
<nav class="navbar navbar-static-top">
...
</nav>
<!-- Fixed to top, overlays page content -->
<nav class="navbar navbar-fixed-top">
...
</nav>
<!-- Fixed to bottom, overlays page content -->
<nav class="navbar navbar-fixed-bottom">
...
</nav>
To change off canvas menu position, replace navbar-static-top for navbar-fixed-left or navbar-fixed-right.
<!-- Off canvas, fixed to left -->
<nav class="navbar navbar-offcanvas navbar-fixed-left">
...
</nav>
<!-- Off canvas, fixed to right -->
<nav class="navbar navbar-offcanvas navbar-fixed-left">
...
</nav>
Fixed positions requires body padding.
Icons
Flat uses FontAwesome icons. You can replace this icons for Glyphicons, included in Bootstrap.
<!-- FontAwesome -->
<span class="fa fa-icon"></span>
<!-- Glyphicon -->
<span class="glyphicon glyphicon-icon"></span>
Compatibility
Bootstrap presents some related issues on Internet Explorer 9 and previous versions. In case you must support this browsers, CDN served Bootstrap has to be replaced for a downloaded copy. Also, include htmlshiv.js and respond.min.js in your project.
<!-- Required files for IE<=9 -->
<link rel="stylesheet" href="/path/to/bootstrap.min.css">
<script src="/path/to/bootstrap.min.js"></script>
<script src="/path/to/html5shiv.js"></script>
<script src="/path/to/respond.min.js"></script>