Forums

Sticky nav - and C5 UI

Permalink
I try some JS for sticky position. its work well (I have the same problem with scrollSpy JS)

Like this for example:
http://getuikit.com/docs/sticky.html...

THE PROBLEM - The JS Default top : 0 - is Below the C5 top Bar (0 from top of the window object i guess)

How to solve this?

In general how to "CHANGE" this top 0 to be top 0 of the bottom of the edge of the ui?
<div style="    position: fixed; top: 0px; right: 20px;">
      This text is below the C5 UI
</div>
siton
 
MrKDilkington replied on at Permalink Best Answer Reply
MrKDilkington
Hi siton,

One option is to change the behavior of the sticky nav when the concrete5 toolbar is visible. This could mean hiding it, disabling the sticky behavior, or overriding the CSS. This can be done in several ways.

Example: CSS
- when the concrete5 toolbar is visible, the page <html> tag will have the class "ccm-toolbar-visible"
- this can be used to change the nav position to static instead of fixed
.ccm-toolbar-visible nav {
    position: static;
}

Example: PHP
- this could be used to display conditional CSS or JavaScript
$cp = new Permissions($c);
if ($cp->canViewToolbar()) {
    // do something when the toolbar is visible
}
siton replied on at Permalink Reply
siton
Thanks.

In general why i need this function?
$cp = new Permissions($c);
MrKDilkington replied on at Permalink Reply
MrKDilkington
@siton

The canViewToolbar() method is used on the Permissions object.
http://documentation.concrete5.org/api/source-class-Concrete.Core.P...

I believe this is how it works:
- $c is the current page object that is made available in page templates
- with the current page object, get the current permissions for that page
$cp = new Permissions($c);
- using the current permissions, check if a user is able to see the toolbar
if ($cp->canViewToolbar()) {
// do something when toolbar is visible
}
siton replied on at Permalink Reply
siton
Thanks :)
SnowyMountainWeb replied on at Permalink Reply
SnowyMountainWeb
This worked when I added the following to my bootstrap theme's css file:

Example: CSS
- when the concrete5 toolbar is visible, the page <html> tag will have the class "ccm-toolbar-visible"
- this can be used to change the nav position to static instead of fixed
.ccm-toolbar-visible nav {
    position: static;
}


Thanks!