Whistling Frogs

Comments

Whistling Frogs

Comments

Fixed Header, Nav bar and Footer with Pug and Bootstrap

Follow steps 1-5 of the Obyte Web Integration Tutorial to create basic Node js app with Pug and Bootstrap.

Create header.pug file in the views folder with following code:

header.navbar.bg-info.text-light
  div
    h2 My Sample App

Create footer.pug file in the views folder with following code:

footer.navbar.bg-info.text-light.fixed-bottom
  div
    p ©
      span(id="copyright")
        script.
          document.getElementById('copyright').appendChild(document.createTextNode(new Date().getFullYear()))
      span=' YourCompany.com  Created by You  Powered by '
      a( style='color:white' target="discord" href="https://obyte.org") Obyte
      span=' and '
      a( style='color:white' target="discord" href="https://obytejs.com") Obyte.js

Replace body section of the layout.pug file with following code:

body
  div.fixed-top
      include header.pug
      include menu.pug

  div.container-fluid
    include header.pug
    include menu.pug

    block content

  include footer.pug