How do I change position of a "fixed" element/header to go below Admin toolbar when in Admin view? New to JS / CSS

How do I change / control the position of a sticky navigation bar to go below Admin toolbar when in Admin mode?

Site uses: 


Subtheme of Omega / Commerce Kickstart
Through subtheming, I have two sticky "zones": (1) user (contains login/checkout); (2) menu-super (main menu)
User zone is sticky and came as part of the Commerce Kickstart theme and works in both regular user and admin mode.
My new "Menu-Super" works in regular user mode, but disappears behind the admin toolbar when viewing as an admin. (less than ideal.)


In the js file, I found the following: 

// Handle user toolbar when user is admin and have admin toolbar enabled.
  Drupal.behaviors.commerce_kickstart_theme_custom_toolbar = {
    attach: function(context, settings) {
      if ($('body').hasClass('toolbar')) {
        $(window, context).resize(function() {
          var toolbarHeight = $('div#toolbar').height();
          $('.zone-user-wrapper').css('top', toolbarHeight + 'px');
        });
      }
    }
  }

I tried repurposing this code to handle my new zone, but no dice. When I clear cache, I can see the zone built and then pop up under the admin bar. What am I missing here?

Drupal.behaviors.commerce_kickstart_theme_custom_toolbar = {
    attach: function(context, settings) {
      if ($('body').hasClass('toolbar')) {
        $(window, context).resize(function() {
          var toolbarHeight = $('div#toolbar').height();
          var zoneuserHeight = $('div#toolbar').height()+ $('div#zone-user').height();
          $('.zone-menu-super-wrapper').css('top', zoneuserHeight + 'px');
        });
      }
    }
  }

where the css file specifies

User Zone (Working)

.zone-user-wrapper {
  background-color: #666666;
  height: 32px;
  width: 100%; }

Super Menu Zone (Not working)

.zone-menu-super-wrapper {
  background-color: #9E4934; /*Monkey brown*/
  height: 36px;
  width: 100%; 
  position: fixed;
  top: 32px;
  z-index: 99;}
In drupal you need to use jquery like this

(function ($) {
 $( document ).ready(function() {

      // custom code here

     });
  });
}(jQuery));


So try:

(function ($) {
  $( document ).ready(function() {
      Drupal.behaviors.commerce_kickstart_theme_custom_toolbar = {
        attach: function(context, settings) {
          if ($('body').hasClass('toolbar')) {
            $(window, context).resize(function() {
              var toolbarHeight = $('div#toolbar').height();
              $('.zone-user-wrapper').css('top', toolbarHeight + 'px');
            });
          }
        }
      }
    });
  });
}(jQuery));


If that doesn't work, all you have to do is check if the toolbar div class or id exists.

if ($('#toolbar').length &gt; 0) {
    // dostuff
}


So if there is a wrapper that wraps everything on your site except the admin toolbar. that would be more ideal to use. So all you do is move everything down by 10 or so pixels

Using CSS with jQuery

(function ($) {
 $( document ).ready(function() {
          if ($('#toolbar').length &gt; 0) {
           $('.zone-user-wrapper').css({"position": "relative", "top": "10px"})
           }
     });
  });
}(jQuery));