How to make your elements sticky

A full-width navbar that sticks to the top of the page when you scroll.

nav.navbar {
  position: fixed;
  top: 0;
  width: 100%;
}

Here is another way usning sticky.

.site-header {
  position: sticky;
  top: 0px;
  z-index: 1;

  background: white;

  box-shadow: 0px 5px 10px -1px rgba(0, 0, 0, 0.2);
  -webkit-box-shadow: 0px 5px 10px -1px rgba(0, 0, 0, 0.2);
  -moz-box-shadow: 0px 5px 10px -1px rgba(0, 0, 0, 0.2);
}

See also Bulma navbar documentation.

If your footer is tall, it might not look good fixed to the bottom of the screen especially on mobile.

Note that if your footer is not actually navbar, you cannot use the Bulma navbar above. Here is an approach.

footer {
  position: fixed;
  bottom: 0;
  width: 100%;
}

See more approaches in this Bulma issue.

Also see StackOverflow

footer {
    margin-top: auto;
    min-height: 20px;
    padding: 10px;
}