Changes to script.js and moved backend code to /includes/classes/backend.php

This commit is contained in:
Jeremy Rangel
2024-12-23 02:50:12 -08:00
parent f3fbe0fa32
commit 1ccc6f0031
5 changed files with 382 additions and 311 deletions

View File

@ -10,7 +10,8 @@ include get_template_directory() . '/includes/classes/blocks.php';
new Lcp_Blocks();
// Include backend php
include get_template_directory() . '/includes/classes/backend.php';
function lcp_block_theme_setup() {
@ -96,22 +97,6 @@ function lcp_custom_svgs_sanitize($input) {
}
// Existing function to render the theme settings page
function render_lcp_theme_settings_page() {
?>
<div class="wrap">
<h1>Theme Settings</h1>
<form method="post" action="options.php">
<?php
// Output necessary settings fields for WordPress to save
settings_fields('lcp_theme_settings_group');
do_settings_sections('lcp_theme_settings_page'); // This outputs all the fields defined by add_settings_field
?>
<?php submit_button(); ?>
</form>
</div>
<?php
}
// Callback function to render the meta box
function render_key_points_meta_box($post) {
@ -179,278 +164,12 @@ add_action('save_post', 'save_key_points_meta_box');
/* BACKEND PAGES */
// Create backend pages
function lcp_backend_pages() {
// Separator
// Theme Settings page
add_menu_page(
'Local Content Pro', // Page title
'Local Content Pro', // Menu title
'manage_options', // Capability required to access this menu
'local-content-pro', // Menu slug
'render_lcp_theme_settings_page', // Function to render the page
'dashicons-admin-generic', // Icon for the menu
25 // Position
);
// Register the Custom Code settings page
add_menu_page(
'Custom Code Inserter', // Page title
'Code Inserter', // Menu title
'manage_options', // Capability required - admin only
'lcp-code-inserter', // Menu slug
'custom-code-inserter', // Callback function
'', // Icon
25
);
}
add_action( 'admin_menu', 'lcp_backend_pages' );
// Function to render the theme settings page
// Function to render the theme settings page
function lcp_register_custom_svg_settings() {
// Register the settings group and option for custom SVGs
register_setting(
'lcp_theme_settings_group', // Settings group
'lcp_custom_svgs', // Option name
'lcp_custom_svgs_sanitize' // Sanitization function
);
// Add a section to organize the settings
add_settings_section(
'lcp_custom_svgs_section', // Section ID
'Custom SVGs', // Section title
'', // Section callback (optional)
'lcp_theme_settings_page' // Page where to show this section
);
// Add the custom SVGs field
add_settings_field(
'lcp_custom_svgs', // Field ID
'Add Custom SVGs', // Field title
'lcp_custom_svgs_field', // Field callback function
'lcp_theme_settings_page', // Page where this field appears
'lcp_custom_svgs_section' // Section where this field belongs
);
}
add_action('admin_init', 'lcp_register_custom_svg_settings');
// Callback to display the custom SVGs field
function lcp_custom_svgs_field() {
// Retrieve current custom SVGs
$custom_svgs = get_option( 'lcp_custom_svgs', array() );
?>
<div id="svg-repeater-container">
<?php
// Loop through each SVG and display its name and path
if (!empty($custom_svgs)) {
foreach ($custom_svgs as $svg) {
?>
<div class="repeater-row">
<input type="text" name="lcp_custom_svgs[][name]" value="<?php echo esc_attr($svg['name']); ?>" placeholder="SVG Name" />
<textarea name="lcp_custom_svgs[][path]" placeholder="SVG Path"><?php echo esc_textarea($svg['path']); ?></textarea>
<button type="button" class="remove-row">Remove</button>
</div>
<?php
}
}
?>
</div>
<button type="button" id="add-svg-row">Add SVG</button>
<?php
}
// Function to register settings for the theme
function lcp_register_settings() {
// Register the settings group and the option for lcp_theme_settings
register_setting(
'lcp_theme_settings_group', // Settings group
'lcp_theme_settings', // Option name
'lcp_theme_settings_sanitize' // Sanitization callback (optional)
);
// Add a section to organize the settings
add_settings_section(
'lcp_theme_settings_section', // Section ID
'Custom Code Settings', // Section title
'', // Section callback (optional)
'lcp_theme_settings_page' // Page where to show this section
);
// Add the field for the 'Enable Key Points Meta' checkbox
add_settings_field(
'enable_key_points_meta', // Field ID
'Enable Key Points Meta', // Field title
'lcp_enable_key_points_meta_field', // Field callback function
'lcp_theme_settings_page', // Page where this field appears
'lcp_theme_settings_section' // Section where this field belongs
);
}
add_action('admin_init', 'lcp_register_settings');
// Function to output the checkbox for 'Enable Key Points Meta'
function lcp_enable_key_points_meta_field() {
// Retrieve current value for 'enable_key_points_meta'
$options = get_option( 'lcp_theme_settings', array() );
$checked = isset( $options['enable_key_points_meta'] ) ? $options['enable_key_points_meta'] : false;
// Output the checkbox
echo '<input type="checkbox" name="lcp_theme_settings[enable_key_points_meta]" value="1" ' . checked( $checked, 1, false ) . ' />';
}
// Optional: Sanitization callback function
function lcp_theme_settings_sanitize( $input ) {
// Ensure that only the expected values are saved (e.g., bool for the checkbox)
if ( isset( $input['enable_key_points_meta'] ) ) {
$input['enable_key_points_meta'] = (bool) $input['enable_key_points_meta']; // Convert to boolean
}
return $input;
}
// The callback function to display the custom code inserterpage content
function lcp_custom_code_inserter_page() {
// Get the stored options from wp_options
$custom_code = get_option( 'custom_code_options', array() );
?>
<div class="wrap">
<h1>Custom Code Settings</h1>
<form method="post" action="options.php">
<?php settings_fields( 'custom_code_group' );
if (defined('LCP_DISABLE_CODE_INSERTER') && LCP_DISABLE_CODE_INSERTER === true) {
echo "<h2 style=\"margin:10px 5px\"> LCP Custom Code Inserter is currently disabled. </h2>
<h3 style=\"margin:5px 5px\"> You can add and modify code snippets, but they will not be in effect. </h3> ";
}
?>
<table class="form-table">
<tr valign="top">
<th scope="row">CSS in Header</th>
<td><textarea name="custom_code_options[css_header]" rows="10" cols="50"><?php echo esc_textarea( isset( $custom_code['css_header'] ) ? $custom_code['css_header'] : '' ); ?></textarea></td>
</tr>
<tr valign="top">
<th scope="row">JavaScript in Header</th>
<td><textarea name="custom_code_options[js_header]" rows="10" cols="50"><?php echo esc_textarea( isset( $custom_code['js_header'] ) ? $custom_code['js_header'] : '' ); ?></textarea></td>
</tr>
<tr valign="top">
<th scope="row">JavaScript in Footer</th>
<td><textarea name="custom_code_options[js_footer]" rows="10" cols="50"><?php echo esc_textarea( isset( $custom_code['js_footer'] ) ? $custom_code['js_footer'] : '' ); ?></textarea></td>
</tr>
</table>
<?php submit_button(); ?>
</form>
</div>
<?php
}
// Register a custom code setting in wp_options to store the custom code snippets
function lcp_custom_code_settings_init() {
register_setting( 'custom_code_group', 'custom_code_options', 'sanitize_custom_code' );
}
add_action( 'admin_init', 'lcp_custom_code_settings_init' );
// Sanitize the custom code input before saving it
function sanitize_custom_code( $input ) {
// Sanitize each field
if ( isset( $input['js_header'] ) ) {
$input['js_header'] = sanitize_textarea_field( $input['js_header'] );
}
if ( isset( $input['js_footer'] ) ) {
$input['js_footer'] = sanitize_textarea_field( $input['js_footer'] );
}
if ( isset( $input['css_header'] ) ) {
$input['css_header'] = sanitize_textarea_field( $input['css_header'] );
}
if ( isset( $input['css_footer'] ) ) {
$input['css_footer'] = sanitize_textarea_field( $input['css_footer'] );
}
return $input;
}
function lcp_custom_code_output($hook) {
// Disable the custom code inserter if wp_env is set
if (defined('LCP_DISABLE_CODE_INSERTER') && LCP_DISABLE_CODE_INSERTER === true) {
// Retrieve the custom code options
$custom_code = get_option( 'custom_code_options', array() );
// Prevent execution in the admin area
if ( is_admin() ) return;
// Check if the hook is for the header
if ($hook == "header") {
// Check and output JS for header
if ( isset( $custom_code['js_header'] ) && ! empty( $custom_code['js_header'] ) ) {
echo '<script type="text/javascript">' . $custom_code['js_header'] . '</script>';
}
// Check and output CSS for header
if ( isset( $custom_code['css_header'] ) && ! empty( $custom_code['css_header'] ) ) {
echo '<style type="text/css">' . $custom_code['css_header'] . '</style>';
}
}
// Check if the hook is for the footer
if ($hook == "footer") {
// Check and output JS for footer
if ( isset( $custom_code['js_footer'] ) && ! empty( $custom_code['js_footer'] ) ) {
echo '<script type="text/javascript">' . $custom_code['js_footer'] . '</script>';
}
}
}
}
// Attach to wp_head and wp_footer, passing the location as a parameter
add_action( 'wp_head', function() {
lcp_custom_code_output('header');
});
add_action( 'wp_footer', function() {
lcp_custom_code_output('footer');
});
// Hook into wp_footer to add the login form in the footer
function add_login_form_to_footer() {
?>
<div class="lcp-popup lcp-login-form" id="lcp-login-form">
<div class="lcp-popup-inner">
<h2><?php esc_html_e( 'Login', 'your-theme' ); ?></h2>
<!-- WordPress Login Form -->
<?php wp_login_form(); ?>
<!-- Optionally add a link to register or reset password -->
<p>
<a href="<?php echo esc_url( wp_registration_url() ); ?>"><?php esc_html_e( 'Register', 'your-theme' ); ?></a> |
<a href="<?php echo esc_url( wp_lostpassword_url() ); ?>"><?php esc_html_e( 'Forgot Password?', 'your-theme' ); ?></a>
</p>
</div>
</div>
<?php
}
add_action( 'wp_footer', 'add_login_form_to_footer' );

View File

@ -0,0 +1,329 @@
<?php
// Create backend pages
function lcp_backend_pages() {
// Separator
// Theme Settings page
add_menu_page(
'Local Content Pro', // Page title
'Local Content Pro', // Menu title
'manage_options', // Capability required to access this menu
'local-content-pro', // Menu slug
'render_lcp_theme_settings_page', // Function to render the page
'dashicons-admin-generic', // Icon for the menu
25 // Position
);
// Register the Custom Code settings page
add_menu_page(
'Custom Code Inserter', // Page title
'Code Inserter', // Menu title
'manage_options', // Capability required - admin only
'lcp-code-inserter', // Menu slug
'custom-code-inserter', // Callback function
'', // Icon
25
);
}
add_action( 'admin_menu', 'lcp_backend_pages' );
// Function to render the theme settings page
// Function to render the theme settings page
function lcp_register_custom_svg_settings() {
// Register the settings group and option for custom SVGs
register_setting(
'lcp_theme_settings_group', // Settings group
'lcp_custom_svgs', // Option name
'lcp_custom_svgs_sanitize' // Sanitization function
);
// Add a section to organize the settings
add_settings_section(
'lcp_custom_svgs_section', // Section ID
'Custom SVGs', // Section title
'', // Section callback (optional)
'lcp_theme_settings_page' // Page where to show this section
);
// Add the custom SVGs field
add_settings_field(
'lcp_custom_svgs', // Field ID
'Add Custom SVGs', // Field title
'lcp_custom_svgs_field', // Field callback function
'lcp_theme_settings_page', // Page where this field appears
'lcp_custom_svgs_section' // Section where this field belongs
);
}
add_action('admin_init', 'lcp_register_custom_svg_settings');
// Callback to display the custom SVGs field
function lcp_custom_svgs_field() {
// Retrieve current custom SVGs
$custom_svgs = get_option( 'lcp_custom_svgs', array() );
?>
<div id="svg-repeater-container">
<?php
// Loop through each SVG and display its name and path
if (!empty($custom_svgs)) {
foreach ($custom_svgs as $svg) {
?>
<div class="repeater-row">
<input type="text" name="lcp_custom_svgs[][name]" value="<?php echo esc_attr($svg['name']); ?>" placeholder="SVG Name" />
<textarea name="lcp_custom_svgs[][path]" placeholder="SVG Path"><?php echo esc_textarea($svg['path']); ?></textarea>
<button type="button" class="remove-row">Remove</button>
</div>
<?php
}
}
?>
</div>
<button type="button" id="add-svg-row">Add SVG</button>
<?php
}
// Function to register settings for the theme
function lcp_register_settings() {
// Register the settings group and the option for lcp_theme_settings
register_setting(
'lcp_theme_settings_group', // Settings group
'lcp_theme_settings', // Option name
'lcp_theme_settings_sanitize' // Sanitization callback (optional)
);
// Add a section to organize the settings
add_settings_section(
'lcp_theme_settings_section', // Section ID
'Custom Code Settings', // Section title
'', // Section callback (optional)
'lcp_theme_settings_page' // Page where to show this section
);
// Add the field for the 'Enable Key Points Meta' checkbox
add_settings_field(
'enable_key_points_meta', // Field ID
'Enable Key Points Meta', // Field title
'lcp_enable_key_points_meta_field', // Field callback function
'lcp_theme_settings_page', // Page where this field appears
'lcp_theme_settings_section' // Section where this field belongs
);
// Add fields for custom breakpoints
add_settings_field(
'mobile_breakpoint', // Field ID
'Mobile Breakpoint (px)', // Field title
'lcp_mobile_breakpoint_field', // Field callback function
'lcp_theme_settings_page', // Page where this field appears
'lcp_theme_settings_section' // Section where this field belongs
);
add_settings_field(
'tablet_breakpoint', // Field ID
'Tablet Breakpoint (px)', // Field title
'lcp_tablet_breakpoint_field', // Field callback function
'lcp_theme_settings_page', // Page where this field appears
'lcp_theme_settings_section' // Section where this field belongs
);
}
add_action('admin_init', 'lcp_register_settings');
// Callback function for the 'Mobile Breakpoint' field
function lcp_mobile_breakpoint_field() {
$options = get_option('lcp_theme_settings');
$mobile_breakpoint = isset($options['mobile_breakpoint']) ? $options['mobile_breakpoint'] : 768;
echo '<input type="number" id="mobile_breakpoint" name="lcp_theme_settings[mobile_breakpoint]" value="' . esc_attr($mobile_breakpoint) . '" class="small-text" />';
}
// Callback function for the 'Tablet Breakpoint' field
function lcp_tablet_breakpoint_field() {
$options = get_option('lcp_theme_settings');
$tablet_breakpoint = isset($options['tablet_breakpoint']) ? $options['tablet_breakpoint'] : 1024;
echo '<input type="number" id="tablet_breakpoint" name="lcp_theme_settings[tablet_breakpoint]" value="' . esc_attr($tablet_breakpoint) . '" class="small-text" />';
}
function lcp_theme_settings_sanitize($input) {
// Sanitize mobile breakpoint
$input['mobile_breakpoint'] = isset($input['mobile_breakpoint']) ? absint($input['mobile_breakpoint']) : 768;
// Sanitize tablet breakpoint
$input['tablet_breakpoint'] = isset($input['tablet_breakpoint']) ? absint($input['tablet_breakpoint']) : 1024;
return $input;
}
// Inject breakpoints to frontned
function lcp_inject_breakpoints_to_frontend() {
// Get the breakpoints from the settings
$options = get_option('lcp_theme_settings');
$mobile_breakpoint = isset($options['mobile_breakpoint']) ? $options['mobile_breakpoint'] : 768;
$tablet_breakpoint = isset($options['tablet_breakpoint']) ? $options['tablet_breakpoint'] : 1024;
// Inject the CSS variables into the head of the document
echo "<style>
:root {
--mobile-breakpoint: {$mobile_breakpoint}px;
--tablet-breakpoint: {$tablet_breakpoint}px;
}
</style>";
}
add_action('wp_head', 'lcp_inject_breakpoints_to_frontend');
// Function to output the checkbox for 'Enable Key Points Meta'
function lcp_enable_key_points_meta_field() {
// Retrieve current value for 'enable_key_points_meta'
$options = get_option( 'lcp_theme_settings', array() );
$checked = isset( $options['enable_key_points_meta'] ) ? $options['enable_key_points_meta'] : false;
// Output the checkbox
echo '<input type="checkbox" name="lcp_theme_settings[enable_key_points_meta]" value="1" ' . checked( $checked, 1, false ) . ' />';
}
// The callback function to display the custom code inserterpage content
function lcp_custom_code_inserter_page() {
// Get the stored options from wp_options
$custom_code = get_option( 'custom_code_options', array() );
?>
<div class="wrap">
<h1>Custom Code Settings</h1>
<form method="post" action="options.php">
<?php settings_fields( 'custom_code_group' );
if (defined('LCP_DISABLE_CODE_INSERTER') && LCP_DISABLE_CODE_INSERTER === true) {
echo "<h2 style=\"margin:10px 5px\"> LCP Custom Code Inserter is currently disabled. </h2>
<h3 style=\"margin:5px 5px\"> You can add and modify code snippets, but they will not be in effect. </h3> ";
}
?>
<table class="form-table">
<tr valign="top">
<th scope="row">CSS in Header</th>
<td><textarea name="custom_code_options[css_header]" rows="10" cols="50"><?php echo esc_textarea( isset( $custom_code['css_header'] ) ? $custom_code['css_header'] : '' ); ?></textarea></td>
</tr>
<tr valign="top">
<th scope="row">JavaScript in Header</th>
<td><textarea name="custom_code_options[js_header]" rows="10" cols="50"><?php echo esc_textarea( isset( $custom_code['js_header'] ) ? $custom_code['js_header'] : '' ); ?></textarea></td>
</tr>
<tr valign="top">
<th scope="row">JavaScript in Footer</th>
<td><textarea name="custom_code_options[js_footer]" rows="10" cols="50"><?php echo esc_textarea( isset( $custom_code['js_footer'] ) ? $custom_code['js_footer'] : '' ); ?></textarea></td>
</tr>
</table>
<?php submit_button(); ?>
</form>
</div>
<?php
}
// Register a custom code setting in wp_options to store the custom code snippets
function lcp_custom_code_settings_init() {
register_setting( 'custom_code_group', 'custom_code_options', 'sanitize_custom_code' );
}
add_action( 'admin_init', 'lcp_custom_code_settings_init' );
// Sanitize the custom code input before saving it
function sanitize_custom_code( $input ) {
// Sanitize each field
if ( isset( $input['js_header'] ) ) {
$input['js_header'] = sanitize_textarea_field( $input['js_header'] );
}
if ( isset( $input['js_footer'] ) ) {
$input['js_footer'] = sanitize_textarea_field( $input['js_footer'] );
}
if ( isset( $input['css_header'] ) ) {
$input['css_header'] = sanitize_textarea_field( $input['css_header'] );
}
if ( isset( $input['css_footer'] ) ) {
$input['css_footer'] = sanitize_textarea_field( $input['css_footer'] );
}
return $input;
}
function lcp_custom_code_output($hook) {
// Disable the custom code inserter if wp_env is set
if (defined('LCP_DISABLE_CODE_INSERTER') && LCP_DISABLE_CODE_INSERTER === true) {
// Retrieve the custom code options
$custom_code = get_option( 'custom_code_options', array() );
// Prevent execution in the admin area
if ( is_admin() ) return;
// Check if the hook is for the header
if ($hook == "header") {
// Check and output JS for header
if ( isset( $custom_code['js_header'] ) && ! empty( $custom_code['js_header'] ) ) {
echo '<script type="text/javascript">' . $custom_code['js_header'] . '</script>';
}
// Check and output CSS for header
if ( isset( $custom_code['css_header'] ) && ! empty( $custom_code['css_header'] ) ) {
echo '<style type="text/css">' . $custom_code['css_header'] . '</style>';
}
}
// Check if the hook is for the footer
if ($hook == "footer") {
// Check and output JS for footer
if ( isset( $custom_code['js_footer'] ) && ! empty( $custom_code['js_footer'] ) ) {
echo '<script type="text/javascript">' . $custom_code['js_footer'] . '</script>';
}
}
}
}
// Attach to wp_head and wp_footer, passing the location as a parameter
add_action( 'wp_head', function() {
lcp_custom_code_output('header');
});
add_action( 'wp_footer', function() {
lcp_custom_code_output('footer');
});
function render_lcp_theme_settings_page() {
?>
<div class="wrap">
<h1>Theme Settings</h1>
<form method="post" action="options.php">
<?php
// Output necessary settings fields for WordPress to save
settings_fields('lcp_theme_settings_group');
do_settings_sections('lcp_theme_settings_page'); // This outputs all the fields defined by add_settings_field
?>
<?php submit_button(); ?>
</form>
</div>
<?php
}

View File

@ -1,13 +1,6 @@
<?php
class Lcp_Blocks {
private $template_directory;

View File

@ -6,11 +6,28 @@ document.addEventListener('DOMContentLoaded', function () {
// Ensure elements exist before proceeding
if (!header || !sideContent) return;
// Check if the header has the 'lcp-sticky' and 'lcp-sticky-on-scroll' class
const isSticky = header.classList.contains('lcp-sticky');
const isStickyOnScroll = header.classList.contains('lcp-sticky-on-scroll');
// Measure the height of the header once the DOM is loaded
const headerHeight = header.offsetHeight;
let fullHeaderHeight;
// Set the height of #lcp-sidecontent to 100vh minus the header height
sideContent.style.height = `calc(100vh - ${headerHeight}px)`;
// If the admin-bar is present, the fullHeaderHeight is the headerHeight + 32px
if (document.body.classList.contains('admin-bar')) {
const adminBarHeight = document.getElementById('wpadminbar').offsetHeight;
fullHeaderHeight = headerHeight + adminBarHeight;
} else {
fullHeaderHeight = headerHeight;
}
// Set the initial height of #lcp-sidecontent based on whether the header is sticky or not
if (isSticky) {
sideContent.style.height = `calc(100vh - ${headerHeight}px)`;
} else {
sideContent.style.height = `100vh`;
}
// Function to handle the scroll event
function handleScroll() {
@ -18,13 +35,36 @@ document.addEventListener('DOMContentLoaded', function () {
// Check if the page has scrolled past the height of the header
if (scrolled >= headerHeight) {
// Add the 'lcp-fixed' class and set 'top' to 0
// Add the 'lcp-fixed' class and set 'top' to 0 for side content
sideContent.classList.add('lcp-fixed');
sideContent.style.top = '0';
// If the header has 'lcp-sticky-on-scroll', adjust height of side content to be 100vh - fullHeaderHeight
if (isStickyOnScroll) {
sideContent.style.height = `calc(100vh - ${fullHeaderHeight}px)`;
// Add 'lcp-fixed' to the header
header.classList.add('lcp-fixed');
// Set the 'top' of the sideContent to the height of the header
sideContent.style.top = `${fullHeaderHeight}px`;
} else if (isSticky) {
// If the header is sticky but not 'sticky-on-scroll', keep the side content height adjusted
sideContent.style.height = `calc(100vh - ${fullHeaderHeight}px)`;
} else {
// Set side content height to 100vh when not sticky
sideContent.style.height = '100vh';
}
} else {
// Remove the 'lcp-fixed' class if scrolled back above the header
// Remove the 'lcp-fixed' class from side content and header if scrolled back above the header
sideContent.classList.remove('lcp-fixed');
sideContent.style.top = ''; // Reset the 'top' style
// Reset height to 100vh when not fixed
sideContent.style.height = isSticky ? `calc(100vh - ${headerHeight}px)` : '100vh';
// If header has the 'lcp-sticky-on-scroll' class, remove 'lcp-fixed' from the header
if (isStickyOnScroll) {
header.classList.remove('lcp-fixed');
}
}
}
@ -39,10 +79,6 @@ document.addEventListener('DOMContentLoaded', function () {
const sidecontent = document.getElementById("lcp-sidecontent");
const innerContent = document.getElementById("lcp-sidecontent-inner");
const scrollTrack = document.getElementById("lcp-scroll-track");

View File

@ -62,7 +62,7 @@ Version: 1.0
z-index: 3;
}
#lcp-header-container.lcp-sticky-on-scroll.lcp-stuck {
#lcp-header-container.lcp-sticky-on-scroll.lcp-fixed {
position: fixed;
top: 32px; /* Adjusted for admin bar, if present */
left: 0;
@ -76,14 +76,8 @@ Version: 1.0
top: 32px; /* Adjust for admin bar visibility */
}
#lcp-header-container.lcp-sticky-on-scroll {
position: absolute;
top: 0;
left: 0;
right: 0;
}
#lcp-header-container.lcp-sticky-on-scroll.lcp-stuck {
#lcp-header-container.lcp-sticky-on-scroll.lcp-fixed {
position: fixed;
top: 32px; /* Adjusted if admin bar is visible */
}