Fixed toolbar with separately clickable fixed footer above

Questions
1

Greetings,

I’m trying to add a fixed footer bar that is clickable right above the toolbar. I’ve followed the discussion at https://forum.framework7.io/t/how-to-make-fixed-navbar-footer/3408 and have been able to add the footer as desired. Unfortunately, for the life of me I am unable to code this properly so that the footer bar - I’d like the entire footer div to be clickable - can be clicked/touched.

toolbar1
toolbar11125×813 29.8 KB

Here is my toolbar code:

      <!-- Bottom Toolbar -->
    <div class="toolbar tabbar tabbar-labels toolbar-bottom custom">
  	<div class='toolbar-text-container' onclick="myFn();">
  	  <span><a href="#" data-sheet=".my-sheet" class="sheet-open">Shortcuts</a></span>
  	</div>
  	<div class="toolbar-inner">
  	  <a href="#tab-1" class="tab-link tab-link-active">
  		<!-- Different icons for iOS and MD themes -->
  		<i class="icon f7-icons if-not-md" style="top: 35px;">house</i>
  		<i class="icon material-icons md-only" style="top: 35px;">house</i>
  		<!-- Label text -->
  		<span class="tabbar-label">Home</span>
  	  </a>
  	  <a href="/training/" class="tab-link">
  		<i class="icon material-icons if-not-md" style="top: 35px;">directions_run<span class="badge color-red">5</span></i>
  		<i class="icon material-icons md-only" style="top: 35px;">directions_run<span class="badge color-red">5</span></i>
  		<span class="tabbar-label">Link 1</span>
  	  </a>
  	  <a href="#tab-3" class="tab-link">
  		<i class="icon material-icons if-not-md" style="top: 35px;">gps_fixed</i>
  		<i class="icon material-icons md-only" style="top: 35px;">gps_fixed</i>
  		<span class="tabbar-label">Link 2</span>
  	  </a>
  	  <a href="#tab-4" class="tab-link">
  		<i class="icon f7-icons if-not-md" style="top: 35px;">chart_bar</i>
  		<i class="icon material-icons md-only" style="top: 35px;">bar_chart</i>
  		<span class="tabbar-label">Link 3</span>
  	  </a>
  	  <a href="/index.cgi" class="tab-link">
  		<i class="icon f7-icons if-not-md" style="top: 35px;">person</i>
  		<i class="icon material-icons md-only" style="top: 35px;">person</i>
  		<span class="tabbar-label">Link 4</span>
  	  </a>
  	</div>
    </div>

And the CSS for appearance:

  	 <style>
  	.custom{
  		height: 90px !important;
  	}
  	.toolbar-inner{
  		max-height: 90px;
  		bottom: 0 !important;
  		top: auto;
  	}
  	.toolbar-text-container {
  		position: absolute;
  		height: 24px;
  		top: 0;
  		background: #42b833;
  		width: 100%;
  		text-align: center;
  		line-height: 24px;
  	}
  	.toolbar-text-container span {
  		font-size: 16px;
  	}
  	</style>

Any assistance/suggestions would be greatly appreciated !

Cheers,

Ajar

1 Like