A Pen by Jose OneTime.

Bootstrap-Fixed-Navbar-and-Sticky-Footer.markdown

Bootstrap Fixed Navbar and Sticky Footer

Getting acquainted with this Bootstrap template.

A Pen by Jose OneTime on CodePen.

License.

index.jade

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.0')
    meta(name='description' content='sandbox')
    meta(name='author' content='Christina Laverentz')
    link(rel='shortcut icon' href='../../docs-assets/ico/favicon.png')
    
    title Sticky Footer Navbar Template for Bootstrap
    
    // Bootstrap core CSS
    link(href="//netdna.bootstrapcdn.com/bootstrap/3.0.3/css/bootstrap.min.css" rel="stylesheet")
    // Custom styles for this template would go here
    
    // HTML5 shim and Respond.js IE8 support of HTML5 elements and MedQuerys
    //
      | [if lt IE 9]>
      | <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
      | <script src="https://oss.maxcdn.com/libs/respond.js/1.3.0/respond.min.js"></script>
      | [endif]
      
  body
    // Wrap page content
    #wrap
      // Fixed navbar
      .navbar.navbar-default.navbar-fixed-top(role='navigation')
        .container
          .navbar-header
            button.navbar-toggle(type='button' data-toggle='collapse' data-target='.navbar-collapse')
              span.sr-only Toggle navigation
              span.icon-bar
              span.icon-bar
              span.icon-bar
            a.navbar-brand(href='#') Project name
          .collapse.navbar-collapse
            ul.nav.navbar-nav
              li.active: a(href='#') Home
              li: a(href='#about') About
              li: a(href='#contact') Contact
              li.dropdown
                a.dropdown-toggle(href='#' data-toggle='dropdown') Dropdown
                  b.caret
                ul.dropdown-menu
                  li: a(href='#') Action
                  li: a(href='#') Another action
                  li: a(href='#') Something else here
                  li.divider
                  li.dropdown-header Nav header
                  li: a(href='#') Separated Link
                  li: a(href='#') One more separated link
    
      // Begin page content
      .container
        .page-header
          h1 Sticky footer with fixed navbar
        p.lead
          | Pin a fixed-height footer to the bottom of the viewport 
          | in desktop browsers with this custom HTML and CSS. 
          | A fixed navbar has been added within 
          code
            | .wrap.
        p
          | Back to 
          a(href='../sticky-footer') the default sticky footer
          |  minus the navbar.
    
    // Footer should be outside of .wrap
    #footer
      .container
        p.text-muted Place sticky footer content here.
    
    // Bootstrap core JavaScript 
    // ================================= 
    // Placed at the end of the document so the page loads faster 
    script(src='https://code.jquery.com/jquery-1.10.2.min.js')
    script(src="//netdna.bootstrapcdn.com/bootstrap/3.0.3/js/bootstrap.min.js")