How to make Fixed navbar footer

Questions
1

I have been building interfaces with bootstrap and jquery and I will like to continue with Framework7 alone and getting started in cool but I have some worries.

I will like to make my footer navbar stay fixed at the bottom, couldn’t find this (the attribute) in the docs or online, any help please?

2

Do you mean this bar?

image
image.jpg509×667 31 KB

More infos:
https://framework7.io/docs/toolbar-tabbar.html#toolbar-api

3

Great, nice and thanks a big deal.
Please how can I insert a footer note either above or below the toolbar-inner attribute. I tried and it gets averything all mmixed up and that page doesn’t have an example on that, so I am stuck again.

4

Poderia me dar um exemplo?

Please, post one example!

5

17
Sorry here is the illustration

6

Here is a sample code.

  <div class="toolbar toolbar-bottom-md custom">
    <div class='toolbar-text-container'>
      <span>my text</span>
    </div>
    <div class="toolbar-inner">
      <a href="#" class="link">Link 1</a>
      <a href="#" class="link">Link 2</a>
      <a href="#" class="link">Link 3</a>
    </div>
  </div>

.custom{
  height: 60px !important;
}
.toolbar-inner{
  max-height: 44px;
  bottom: 0 !important;
  top: auto;
}
.toolbar-text-container {
  position: absolute;
  height: 14px;
  top: 0;
  background: #42b833;
  width: 100%;
  text-align: center;
  line-height: 14px;
}

.toolbar-text-container span {
  font-size: 12px;
}

Result:

Screenshot_1
Screenshot_1.png426×748 30.4 KB

2 Likes
7

wOW, THANKS SO MUCH FOR THIS, IT WORKS. tHANKS AGAIN.