- The menu and logo stick, but the background doesn’t follow—it stays behind.
- The header is supposed to be transparent on load but shows up white instead.
Here’s the CSS and JS I’m using:
In Additional CSS
/* Sticky Header */ .ast-main-header-wrap { position: fixed; width: 100%; top: 0; left: 0; z-index: 999; background-color: transparent; transition: background-color 0.3s ease, box-shadow 0.3s ease; } .site-content { padding-top: 100px; } .ast-main-header-wrap.scrolled { background-color: rgba(255, 255, 255, 0.9); box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1); }
JS in Insert Headers and Footers:
document.addEventListener("DOMContentLoaded", function() { var header = document.querySelector(".ast-main-header-wrap"); window.addEventListener("scroll", function() { if (window.scrollY > 50) { header.classList.add("scrolled"); } else { header.classList.remove("scrolled"); } }); });
Any idea what I’m doing wrong? Thanks! 
I’m facing an issue with the sticky header on my WordPress site using the Astra theme. I’ve added custom CSS and JavaScript to make the header sticky and change the background color when scrolling, but I’m running into a couple of problems:
- The header logo and menu stick to the top when scrolling, but the background doesn’t stick—it stays behind, making the menu and logo appear with no background.
- Even though I want the header to be transparent initially and have a background color only on scroll, the background still appears white on load.
Here’s the custom CSS I’ve applied:
css
/* Make the header sticky */ .ast-main-header-wrap { position: fixed; width: 100%; top: 0; left: 0; z-index: 999; transition: background-color 0.3s ease, box-shadow 0.3s ease; } /* Add padding to the body to avoid content overlap */ .site-content { padding-top: 100px; /* Adjust based on your header's height */ } /* Default transparent background */ .ast-main-header-wrap { background-color: transparent; } /* Background color and shadow when scrolling */ .ast-main-header-wrap.scrolled { background-color: rgba(255, 255, 255, 0.9); /* Adjust this as needed */ box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1); /* Add shadow for visibility */ }
The JavaScript in the Insert Headers and Footers plugin:
javascript
document.addEventListener("DOMContentLoaded", function() { var header = document.querySelector(".ast-main-header-wrap"); window.addEventListener("scroll", function() { if (window.scrollY > 50) { header.classList.add("scrolled"); } else { header.classList.remove("scrolled"); } }); });
I’m not sure if I’m targeting the correct class for the entire header or if I’m missing something. Any advice on how to fix this so that the header behaves as expected (transparent on load and sticky with background color on scroll)?
Thanks for your help!
]]>The customize section in the header section is no longer there and the header section of my page is suddenly gone. This happened after wordpress went into maintenance. Can you provide support on the subject?
]]><?php
if(is_page(shop))
{
get_header('header-shop');
}
else
{
get_header();
}
wp_head();
?>However, I am having trouble isolating the element within the header.php file to change the button widget at the right of the header and replacing it with the woocomerce cart widget code. I am at my wits end already and any sort of help and advice would be greatly appreciated, thanks!!
]]><?php
if(is_page(shop))
{
get_header('header-shop');
}
else
{
get_header();
}
wp_head();
?>However, I am having trouble isolating the element within the header.php file to change the button widget at the right of the header and replacing it with the woocomerce cart widget code. I am at my wits end already and any sort of help and advice would be greatly appreciated, thanks!!
]]>I need to change my WordPress logo in the header. I have tried all the tips and techniques to change it but noting helps. I have changes the site identity, header and event inserted the logo in theme options but nothing worked. The theme I am using is Crown and have downloaded from Envato Elements. Since my subscription of one year has been expired with Envato I can not ask them for the help
I am also sharing my header.php code here
<?php
/**
* The header for our theme
*
* @since 1.0
* @version 1.0
*/
?>
<?php if (!crown_has_request_pagination_ajax()): ?><!DOCTYPE html>
<html <?php language_attributes(); ?>>
<head>
<meta charset="<?php bloginfo( 'charset' ); ?>">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="profile" href="https://gmpg.org/xfn/11">
<?php wp_head(); ?>
</head>
<body <?php body_class(); ?>>
<?php
do_action('crown_before_page_wrapper');
$site_wrapper_classes = apply_filters('crown_site_wrapper_classes', array('site-wrapper'));
?>
<!-- Open Wrapper -->
<div id="site-wrapper" class="<?php echo esc_attr(join(' ', $site_wrapper_classes))?>">
<?php
/**
* @hooked crown_template_header - 10
*/
do_action('crown_before_page_wrapper_content');
?>
<?php endif; ?>
<?php $wrapper_content_classes = apply_filters('crown_wrapper_content_classes', array('wrapper-content', 'clearfix')); ?>
<div id="wrapper_content" class="<?php echo esc_attr(join(' ', $wrapper_content_classes))?>">
<?php
/**
* @hooked crown_template_wrapper_start - 10
*/
do_action('crown_main_wrapper_content_start');
?>
i have marketplace website and the problem is that if a vendor signed in the black wordpress header shows!!
and i contacted the theme creators and they said its not because their theme!
then i contacted DOKAN plugin support team they said that i should to deactivate each plug in to see what cause the issue but nothing happened so please i need help im a way behind my schedule to the lunch date!
I already checked if this was happening for page builder,
But it’s not.
I can’t understand the reason.
Please Help!
]]>Thanks for your help in advance.
]]>