title: Horizontal Bar across menu on all pages using css
body: <p>I need to design layout as show in image below.</p>
  <p>Basic Page layout will have a top banner section as show in black color which will show up if banner is their otherwise hide.</p>
  <p>Next I need to fill the page background with gray color and content area should be white.</p>
  <p>I need to run a horizontal banner across Navigation/ Menus as show in example below.</p>
  <p>I tried  but the horizontal bar which is in green color on fiddle is not showing up aligned to Menu. If I add <code>margin-top:40px</code> it create a space of between header and banner section. I tried using <code>z-index</code> that didn't work either.</p>
  <p>I would appreciate help in this regard based on pure CSS &amp; div containers.
  <img src="https://i.stack.imgur.com/3kAON.png" alt="enter image description here" /></p>
  <h2>DEMO</h2>
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>html, body {
      margin: 0;
      padding: 0
  }
  #contentWrapper {
      width: 500px;
      margin: 0 auto;
      background: #ccc;
      height: 300px;
      z-index:100;
      position:relative;
  }
  #BannerBar {
      height: 40px;
      background: blue;
  }
  #navBar {
      height: 20px;
      background: green;
      margin-top:30px;
  }
  #logowrapper
  {
      height:40px;
      width:100%;padding:10px;
  }
  #NavigationWrapper
  {
      width:100%;
      height:20px;
      background-color:green;
      text-align:center;
  }
  #footerBar {
      height: 40px;
      background: red;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div id="BannerBar"&gt;&lt;/div&gt;
  &lt;div id="navBar"&gt;&lt;/div&gt;
  
  &lt;div id="contentWrapper"&gt;
      &lt;div id="logowrapper"&gt;LOGO&lt;/div&gt;
      &lt;div id="NavigationWrapper"&gt;
          Home | About Us | News | Something
      &lt;/div&gt;
  &lt;/div&gt;
  
  &lt;div id="footerBar"&gt;&lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  <p>Link to <a href="https://jsfiddle.net/GDDA5/999/" rel="nofollow noreferrer">fiddle</a></p>