Issue with sticky menu - html

Question

I have a sticky menu on my wordpress site which is just a header with css position fixed but it's overlaying over the top of each of my sections. You can see what I mean if you view the test site here
if you click on the menu icon and click on a section it will navigate to each section but I need the sticky menu to rest above each section instead of it overlaying at the top.
In my header.php I have
<div id="header-wrap">
<div class="poweredby">POWERED BY bluesource<p class="mobile-phone">0845 319 2100</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 I have
.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;
}

Answer 1

This code will do it
$('#header-wrap ul li a').click(function(){
href=$(this).attr('href');
$('html, body').animate({
scrollTop: $(href).offset().top-98 // since the height of your nav is 98px
}, 500);
});
For external links
$(document).ready(function(){
var urlHash = window.location.href.split("#")[1];
$('html,body').animate({
scrollTop: $('#' + urlHash).offset().top-98
}, 500);
});

Answer 2

This should do the job. I increased the position right so you get the white bar along the side, I applied an important tag otherwise it gets overwritten.
nav#site-navigation {
top: 98px;
}
.cbp-spmenu-right.menu-open {
right: 23px !important;
}