[Markdown]

Tutorials: Sticky Footer

How to Add a Sticky Navbar as a Footer

On Hubzilla.org, we created a sticky navigation bar (navbar) at the bottom of the page. To do that, we used a Bootstrap 5 Navbar and made it sticky.

Since Hubzilla does not normally have a sticky footer, we will have to add in some spacers so that content does not get hidden behind the sticky footer.

The steps to create this:

Use the Webpages App to create:
1. a block with the sticky footer code.
2. Two blocks for spacers, one for sidebar column in use.
3. a layout for webpages.
Use the PDL Editor to position these blocks on the desired pages.

Layouts

For each block, you would need to add the following code where you want the block to appear.

[block]example[block]

If your page has a background color, you may want to remove the border around the widget. To do that, use this code instead.

[block][var=wrap]none[/var]example[/block]

Change "example" to the name of the block in both examples.

Example Code

The code for the spacers:

<div class="mb-5 mt-5"> </div>

The code for the sticky footer:

Powered by the <a href="/page/info/home">Hubzilla Fediverse Server</a>. Celebrating 15 Years of Innovation.

<nav class="navbar navbar-expand-lg navbar-secondary shadow-none fixed-bottom bg-body">
  <div class="container-fluid">


<span class="d-none d-md-inline">
    <a class="navbar-brand" href="/">
<img class="!img-fluid" src="https://hubzilla.org/cloud/info/website_images_small/Hubzilla.png" height="40" style="max-height:30px;" alt="Hubzilla" />
    </a>
</span>
<span class="d-inline d-sm-none">
    <a class="navbar-brand" href="/">
      <img src="photo/profile/s/6" class="me-2" alt="Hubzilla" width="30" height="30" />
    </a>
    <a class="navbar-brand" href="/">Hubzilla</a>
</span>

    <button class="navbar-toggler" data-bs-toggle="collapse" data-bs-target="#navbarNavFooterAltMarkup">
      <span class="navbar-toggler-icon"></span>
    </button>
    <div class="collapse navbar-collapse" id="navbarNavFooterAltMarkup">
      <div class="navbar-nav">
        <a class="nav-link" href="/page/info/home">Home</a>
        <a class="nav-link" href="/channel/info">News</a>
        <a class="nav-link" href="/page/info/software">Software</a>
        <a class="nav-link" href="/page/info/membership">Association</a>
        <a class="nav-link" href="/page/info/documentation">Documentation</a>
        <a class="nav-link" href="/page/info/community">Community</a>
        <a class="nav-link" href="/channel/association">Members</a>
        <a class="nav-link" href="/channel/adminsforum">Support</a>
      </div>

    </div>

      <span class="navbar-text">
<span class="d-inline d-sm-none">
       <a href="/page/info/get_involved"><button class="btn btn-success">Start</button></a>
</span>
<span class="d-none d-md-inline">
       <a href="/page/info/start"><button class="btn btn-success">Getting Started</button></a>

</span>


  </div>
</nav>