Fixed toolbar with separately clickable fixed footer above


I’m trying to add a fixed footer bar that is clickable right above the toolbar. I’ve followed the discussion at 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.

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 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 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 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 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 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>

And the CSS for appearance:

  		height: 90px !important;
  		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;

Any assistance/suggestions would be greatly appreciated !



1 Like