[4.0] Cassiopea: allow header to be sticky if desired

joomla · Jan 20, 2020 · a565fae · a565fae
1 parent eef023f
commit a565fae
Show file tree

Hide file tree

Showing 3 changed files with 31 additions and 1 deletion.
diff --git a/language/en-GB/tpl_cassiopeia.ini b/language/en-GB/tpl_cassiopeia.ini
@@ -8,5 +8,6 @@ TPL_CASSIOPEIA_FLUID="Fluid"
 TPL_CASSIOPEIA_FLUID_LABEL="Fluid Layout"
 TPL_CASSIOPEIA_LOGO_LABEL="Logo"
 TPL_CASSIOPEIA_STATIC="Static"
+TPL_CASSIOPEIA_STICKY_LABEL="Sticky Header"
 TPL_CASSIOPEIA_TOGGLE="Toggle Navigation"
 TPL_CASSIOPEIA_XML_DESCRIPTION="Continuing the space theme (Solarflare from 1.0, Milkyway from 1.5 and Protostar from 3.0), Cassiopeia is the Joomla 4 site template based on Bootstrap 4."
diff --git a/templates/cassiopeia/index.php b/templates/cassiopeia/index.php
@@ -74,6 +74,24 @@
 $wrapper = $this->params->get('fluidContainer') ? 'wrapper-fluid' : 'wrapper-static';
 
 $this->setMetaData('viewport', 'width=device-width, initial-scale=1');
+
+$stickyHeader = $this->params->get('stickyHeader') ? 'sticky-header' : '';
+
+// Stick the header
+if ($stickyHeader === 'sticky-header')
+{
+	$css = '
+		.sticky-header {
+			margin: 0 0 20px 0 !important;
+			position: -webkit-sticky !important;
+			position: sticky !important;
+			top: 0;
+		}
+	';
+
+	$this->addStyleDeclaration($css);
+}
+
 ?>
 <!DOCTYPE html>
 <html lang="<?php echo $this->language; ?>" dir="<?php echo $this->direction; ?>">
@@ -93,7 +111,7 @@
 	. $hasClass;
 	echo ($this->direction == 'rtl' ? ' rtl' : '');
 ?>">
-	<div class="grid-child container-header full-width">
+	<div class="grid-child container-header full-width <?php echo $stickyHeader; ?>">
 		<header class="header">
 			<nav class="grid-child navbar navbar-expand-lg">
 				<div class="navbar-brand">

diff --git a/templates/cassiopeia/templateDetails.xml b/templates/cassiopeia/templateDetails.xml
@@ -80,6 +80,17 @@
 					<option value="1">TPL_CASSIOPEIA_FLUID</option>
 					<option value="0">TPL_CASSIOPEIA_STATIC</option>
 				</field>
+
+				<field
+					name="stickyHeader"
+					type="radio"
+					class="switcher"
+					default="0"
+					label="TPL_CASSIOPEIA_STICKY_LABEL"
+				>
+					<option value="1">JYES</option>
+					<option value="0">JNO</option>
+				</field>
 			</fieldset>
 		</fields>
 	</config>