I have included css for a bottom navigation bar in my custom css tiddler, and, I have a tiddler called Footer with the html part of it. When the Footer tiddler is on screen, the bottom navigation bar works like a charm. But if I close the tiddler, the navigation bar disappears.
I used $:/tags/footer and I also tried $:/tags/BottomNavBar. Both work. But the bottom bar still disappears when I close the Footer tiddler. Is there a custom tag I should be using?
I also have a top naviagation bar, and that is brilliant. No issues there. What am I doing wrong with the bottom bar? Does anyone know?
Are you using an alternative layout that makes use of the $:/tags/Footer tag? If not, neither it nor $:/tags/BottomNavBar is part of the standard Tiddlywiki layout, so they don’t assign any special behavior to tiddlers with that tag. When your Footer tiddler is open in the story, it creates a corresponding <div>, positioned as per your CSS, but it’s not part of the permanent layout, so it disappears when “Footer” is no longer in the story river.
I just double checked the list of default system tags that do assign special behavior (including layout elements), and I think $:/tags/BelowStory ought to do what you’re looking for. If you want it to appear behind the story river tiddlers rather than in front of them, you can set the z-index in your .footer class to control the relative position on the z-axis.
This defines the footer class, but does nothing unless something is displayed using the footer class.
This says when open display the div using the footer class.
However unlike most items in a tiddler it uses positioning on the page. You will not see it where you “display it”.
All you need to do is to have it always display - any where and the positioning will be at the bottom. As @etardiff says the $:/tags/BelowStory but so will $:/tags/AboveStory, and if the menu is installed $:/tags/TopLeftBar and $:/tags/TopRightBar The Below story makes sense if you were looking for it, but it is not actually where its displayed.
I would be tempted to put it in a system tiddler $:/theScribe/page-footer, tagged $:/tags/BelowStory but not $:/tags/Stylesheet
<style>
.footer {
height: 60px;
position: fixed;
left: 0;
bottom: 0;
padding-top: 5px;
padding-bottom: 5px;
width: 100%;
background-color: #1e73be;
color: white;
text-align: center;
z-index: 100;
}
</style>
<div class="footer">
<p>All rights reserved - My Test Website | Built with Tiddlywiki</p>
</div>
This makes it a single tiddler solution
You can adjust styles and content in the one tiddler, and only removing $:/tags/BelowStory hides it.
However if you do this on tiddlywiki.com you will see in the sidebar results tab, you can’t see the last item(s). Fix this with a tiddler tagged $:/tags/SideBarSegment, with an empty list-after field, and the following example contents;
I did, but the bar didn’t appear at the bottom of the page if I removed the tiddlers. So I tried @TW_Tones suggestion and that appears to work, but only if I have “position: fixed”. Ideally, I would prefer the bar to be at the bottom of the webpage, and if a long tiddler is on the screen, then the footer is still below it. But I definitely am several steps closer. Thank you.
