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

Question

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:

1. Subtheme of Omega / Commerce Kickstart
2. Through subtheming, I have two sticky "zones": (1) user (contains login/checkout); (2) menu-super (main menu)
3. User zone is sticky and came as part of the Commerce Kickstart theme and works in both regular user and admin mode.
4. 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;}

Answer 1

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 > 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 > 0) {
           $('.zone-user-wrapper').css({"position": "relative", "top": "10px"})
           }
     });
  });
}(jQuery));

Answer 2

The new js I added is within the function callout with the other code that came with Kickstart. The js code that I provided for 'zone-user-wrapper' works. I created a second zone / region ("menu-super") that sits below the "user" zone and want it to be handled in the same way. When I try to add identical code for the second zone, nothing happens.

highlight the second zone / region and right mouse click and select inspect element. double check that the div wrapper is indeed .zone-menu-super-wrapper perhaps you have the wrong name?

you don't need 2 separate codes just add the

var zoneuserHeight = $('div#toolbar').height()+ $('div#zone-user').height();

and

 $('.zone-menu-super-wrapper').css('top', zoneuserHeight + 'px');

lines to your first code

   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-user-wrapper').css('top', toolbarHeight + 'px');
              $('.zone-menu-super-wrapper').css('top', zoneuserHeight + 'px');
            });
          }
        }
      }

Also, make sure that your .zone-menu-super-wrapper has position: relative; or position: absolute; otherwise the top: zoneuserHeight won't work.

Example: Does Not Work
Example: Works

PS:

perhaps this line

var zoneuserHeight = $('div#toolbar').height() + $('div#zone-user').height();

needs to be

var zoneuserHeight = $('div#toolbar').height() + $('div#zone-user-wrapper').height();