My Wordpress site has a sticky menu implemented using CSS position: fixed in the header section. However, this sticky menu is overlaying over each of my website sections. To see what I mean, visit the test site here.
If you click on the menu icon and navigate to a specific section, you'll notice that the sticky menu remains at the top, overlapping the content. What I actually need is for the sticky menu to stay above each section instead of covering them.
In my header.php file, the code looks like this:
<div id="header-wrap">
<div class="poweredby">POWERED BY bluesource<p class="mobile-phone"><a href="tel: +44 0845 319 2100">0845 319 2100</a></p></div>
<div class="headerphone">0845 319 2100</div>
<button class="toggle-menu menu-right push-body"><i class="fa fa-bars"></i></button>
<!-- Right menu element-->
<?php if ( has_nav_menu( 'primary' ) || has_nav_menu( 'social' ) ) : ?>
<?php if ( has_nav_menu( 'primary' ) ) : ?>
<nav id="site-navigation" class="cbp-spmenu cbp-spmenu-vertical cbp-spmenu-right" role="navigation" aria-label="<?php esc_attr_e( 'Primary Menu', 'twentysixteen' ); ?>">
<?php
wp_nav_menu( array(
'theme_location' => 'primary',
'menu_class' => 'primary-menu',
) );
?>
</nav>
<?php endif; ?>
<?php endif; ?>
</div><!-- end header wrap -->
In my stylesheet, the relevant CSS code can be found below:
.site-header {
background: #333 none repeat scroll 0 0;
height: 98px;
padding: 27px 0;
text-align: right;
}
.site-header-main {
text-align: right;
right: 0;
display: block;
padding-right: 27px;
}
#header-wrap {
background: #333;
position: fixed;
top: 0;
z-index: 100;
height: 98px;
padding-top: 27px;
padding-right: 27px;
opacity: 0.9;
}