adding to sitewide area


All other areas in my site I can add blocks to except for one which i'm confused about. The Add To Sitewide Header Nav area shown below when hovering over does not allow the option to click on , almost like the javascript is not working. I dont see the class ccm-menu-hotspot-active when i hover over to add a block.
Can anyone help

Code is when in edit mode
<div id="navigation">
    <div class="container">
      <div class="row">
        <div class="col-md-8">
          <nav class="navbar" role="navigation"> 
            <!-- Brand and toggle get grouped for better mobile display -->
            <div class="navbar-header">
              <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-ex1-collapse"> <span class="sr-only">Toggle navigation</span> Menu </button>
            <!-- Collect the nav links, forms, and other content for toggling -->
            <div class="collapse navbar-collapse navbar-ex1-collapse">
              <div id="a48" cID="1" handle="Header Nav" class="ccm-global-area"></div>
   <script type="text/javascript">
   ccm_areaMenuObj48 = new Object();
   ccm_areaMenuObj48.type = "AREA";

View Replies: View Best Answer
cherrycake replied on at Permalink Best Answer Reply
have you made sure it's not a css z-index issue? as in, it's not picking up on you hovering over it since an element underneath it has a higher z-index?
Responsive replied on at Permalink Reply
Found the problem as z-index in case it helps anyone :)

.navbar {
min-height: 40px;
margin-bottom: 0px;
z-index: 500;

change to z-index: 1;