ThemeKit Slide
Action TabsThe action tab bar below opens slide panel(s) and has an optional internal/external link.
The action tab bar below opens slide panel(s) and has an optional internal/external link.
The ThemeKit Slide Tabs widget creates a horizontal navigation bar with tabs for opening slide panels and the option to add an internal/external link with new window option.
The z-index property in CSS controls the vertical stacking order of elements. Z-index only affects elements that have a position value.
When using the EverWeb Blank Responsive page template every item is enclosed in a <section> element so its stacking order can be adjusted by inserting a value in the Z-index control in the widget settings.
Relative Position
Elements inserted in the EverWeb responsive page stack vertically and the lower one will appear above one higher up if they overlap.
Fixed Position
Fixed position items are positioned relative to the viewport, which means it always stay "in view" in the same place even if the page is scrolled.
A fixed element does not leave a gap in the page where it would normally have been located but unfortinately it does in EverWeb.
Normally fixed items are inserted below the last relatively positioned item - normally the footer - when using a code editor.
To allow this when using EverWeb get rid of the default footer by setting its height to zero and use a widget to create the actual footer.
Now any fixed position items can be dragged down below the footer widget ot of the way.
Item Height
Items like the slide in panels have a control for setting the editing height sothat the content can be seen on the EverWeb design canvas.
After setup the editing height can be reduced and the content hidden.
On this page there are three fixed position items - the navigation, the show/hide footer bar and the sliide in panel.
The ThemeKit Nav Menu used on this page has both the action tab and navigation links in the same widget. The action tab always needs to be above the overlay with the links so has a z-index 1 higher than the overlay. This is added in the widget using CSS calc.
Since the navigation has a z-index of 101, the action tab will have 102 and the slide in panel needs to have a z-index of at least 103.