Re: [Tiki-devel] TR: Sticky top bar

Hello,

I do that on literally all websites I implement with Tiki by default:

Copy/Paste a navbar from getbootstrap.com to a Tiki custom module and 
customise it with Tiki standard menus, modules and bootstrap classes.

This way the stickyness is created with a few simple standard 
text-strings from getbootstrap.com, which work in Tiki out of the box 
and which was literally the reason why we changed to Bootstrap in 2013.

The hiding content issue is to be solved with a simple extension of 
margin-top or padding-top of the body. Ex: navbar-fixed-to-top / sticky 
height = 50px:

body {margin-top: 50px;} or body {padding-top: 50px;}

I do not consider this a hack.


Usually I add a simple js/html/css off-canvas-sidebar.

The off-canvas-sidebar should be added to Tiki code by default including 
the relevant module zones.


Regards,
Torsten

On 12/10/18 7:15 PM, Cloutier, Philippe (DGARI-Consultant) wrote:
>> De : luciash [mailto:[email protected]]
>> Envoyé : 10 décembre 2018 12:40
>>
>> Yes,
>> that is site specific code. We have this in the "Custom CSS" section:
>> /* Prevent target anchors from being covered by fixed top navbar */
>> h1:target:before,
>> h2:target:before,
>> h3:target:before,
>> h4:target:before,
>> h5:target:before {
>>   content:"";
>>   display:block;
>>   height:72px; /* fixed header height*/
>>   margin:-72px 0 0; /* negative fixed header height */
>> }
>> On themes.tiki.org it is done a bit differently with the new feature theme_navbar_fixed_topbar_offset set to 45px, so we have this in "Custom HTML head content" there:
>>
>> <style type="text/css">
>> {literal}
>> /* Prevent target anchors from being covered by fixed top navbar */
>> h1:target:before,
>> h2:target:before,
>> h3:target:before,
>> h4:target:before,
>> h5:target:before,
>> h6:target:before {
>>   content: "";
>>   display: block;
>>   height: {/literal}{$prefs.theme_navbar_fixed_topbar_offset}{literal}px; /* fixed header height*/
>>   margin: -{/literal}{$prefs.theme_navbar_fixed_topbar_offset}{literal}px 0 0; /* negative fixed header height */
>> }{/literal}
>> </style>
>
> Thank you luciash
>
> By the way, I find it poor that tiki.org sites use custom code like this. For one thing, this functionality having a general interest, seeing it on tiki.org gives the impression that Tiki supports (without custom code) such sticky top bars. Secondly, hacks like this can cause breakage. This can be seen by scrolling down a bit on - for example - https://dev.tiki.org/Overview and looking at the overlap between the sticky top bar and the top of the sticky TOC. And that's just one of several bugs I experienced in the last months with tiki.org's sticky top bars.
>
>> luci
>>
>>
>>> On 10.12.2018 17:59, Cloutier, Philippe (DGARI-Consultant) wrote:
>>> I am forwarding a question which is probably not about developing Tiki vanilla, but which can be answered by an administrator of tiki.org (or by a Tiki developer).
>>>
>>>> De : Cloutier, Philippe (DGARI-Consultant) [mailto:[email protected]]
>>>> Envoyé : 7 décembre 2018 13:02
>>>>
>>>> Hi,
>>>> Our sites use a top module bar which sticks in the viewport even when the reader scrolls down. It is similar to what can be seen on tiki.org. Our site uses a custom theme with a hack to implement this sticky bar. We have issues in some places with the sticky bar hiding content.
>>>>
>>>> First, how does tiki.org implement its sticky bar?
>>>>
>>>> I see that when one clicks a link in the floating table of contents on https://dev.tiki.org/Overview the title of the clicked section is fully visible. I can see CSS related to that in the main document:
>>>> /* Prevent target anchors from being covered by fixed top navbar */ h1:target:before, h2:target:before, h3:target:before, h4:target:before, h5:target:before {
>>>> content:"";
>>>> display:block;
>>>> height:72px; /* fixed header height*/
>>>> margin:-72px 0 0; /* negative fixed header height */ }
>>>>
>>>> Is this code specific to dev.tiki.org?
> _______________________________________________
> TikiWiki-devel mailing list
> [email protected]
> https://lists.sourceforge.net/lists/listinfo/tikiwiki-devel


_______________________________________________
TikiWiki-users mailing list
[email protected]
https://lists.sourceforge.net/lists/listinfo/tikiwiki-users