I am trying to achieve a shade effect on my website header, however, the box-shadow property doesn't work. I think this may be because the header is saved as a separate header.php file and my banner image below it is part of the index.php file, so the shade won't cast over the image properly. How do I solve this issue?
UPDATE: Sorry, I forgot to add my code.
header.php
<!DOCTYPE html>
<html <?php language_attributes(); ?>>
<head>
<title>...</title>
<meta charset="<?php bloginfo( 'charset' ); ?>">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="profile" href="http://gmpg.org/xfn/11">
<?php wp_head(); ?>
</head>
<body <?php body_class(); ?>>
<div id="page" class="site">
<a class="skip-link screen-reader-text" href="#content"><?php esc_html_e( 'Skip to content', '...' ); ?></a>
<header>
<div class="wrapper">
<img class="logo" src="<?php echo(get_template_directory_uri()); ?>..." alt="...">
<nav role="navigation" class="navbar navbar-default">
<div class="container-fluid">
<div class="nav navbar-nav">
<?php wp_nav_menu( array( 'theme_location' => 'menu-1', 'menu_id' => 'primary-menu' ) ); ?>
</div>
</div>
</nav><!-- #site-navigation -->
</div><!-- .wrapper -->
</header><!-- .header -->
<div id="shader">
</div>
<div id="content" class="site-content">
front-page.php
<?php get_header(); ?>
<div id="primary" class="content-area">
<main id="main" class="site-main" role="main">
<!--CONTENT START-->
<div id="banner"> <!--continues...-->
style.css
#shader{
position: relative;
bottom: 10px;
width: 100%;
height: 10px;
background-color: white;
box-shadow: 0px 10px 10px #c0c0c0;
}
#banner{
background-image: url("https://www.metoffice.gov.uk/binaries/content/gallery/mohippo/images/migrated-image/c/cirrus_clouds.jpg");<!--example image-->
background-repeat: no-repeat;
background-size: 100%;
}
