Forums

pinterest images share button over fixed header on scroll

Permalink
Hi,
I have changed the header z-index to be higher than the - astronomical - pinterest button value so that the button does not show over the header on scrolling down the site.

This however, causes the header to show over the block set up forms during editing.
i.e. I click on add slider block, the form opens but the header is over it due to the high z-index value (see screenshot).
Can I set a default z-index for all block set up forms (that doesnt affect contact forms on the page) to resolve this?
Or is there another way to stop the pinterest save button from scrolling over the bootstrap header - I haven't seen this phenomenon on any other site ... :-/
Thanks,
Una

1 Attachment

 
MrKDilkington replied on at Permalink Reply
MrKDilkington
Hi fatcatsanonymous,

One option would be to conditionally set the header z-index to a lower value while in edit mode (inline or with a style element). If the header is above the concrete5 toolbar, you may need to also set the z-index based on whether the toolbar is visible or not.

Example: using PHP
- conditionally add a CSS style based on if the page is in edit mode or the toolbar is visible
<?php
$cp = new \Permissions($c);
if ($c->isEditMode() || $cp->canViewToolbar()) { ?>
    <style>
        .my-header-class {
            z-index: 100;
        }
    </style>
<?php } ?>

This code snippet could be added to one of your page templates or includes.

Example: using CSS
.ccm-toolbar-visible .my-header-class,
.ccm-edit-mode .my-header-class {
    z-index: 100;
}

Both .ccm-toolbar-visible and .ccm-edit-mode are added to the html element of the page.