1

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;}

  • Are you using the contrib admin_menu or the normal admin toolbar from Drupal 7? This can be fixed with CSS but the answer depends on which one you are actually using – burnsjeremy Nov 9 '15 at 1:41
  • @burnsjeremy: I am using the admin menu that comes with Commerce Kickstart. It is a customized menu that comes as part of that distribution. – keb805 Nov 9 '15 at 3:08
0

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));
  • Thanks for trying to point me in the right direction. Please let me clarify. – keb805 Nov 9 '15 at 1:06
  • 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. – keb805 Nov 9 '15 at 1:16
  • 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? – No Sssweat Nov 9 '15 at 1:22
0

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();
  • Nearly there - I added in the code you recommended. It does not work without changing the zone-menu-super {position: relative}, as you stated. However, that negates my ability to keep this zone as sticky. I need both "zone-user" and "zone-menu-super" to be sticky. Out of the box from Commerce Kickstart, "zone-user" is sticky, but I don't see the position call out in the global.css for that zone. In order to make my new zone sticky, I added in position: fixed;, but ran into this issue with the admin menu. What am I missing here? PS absolute does not work :) – keb805 Nov 9 '15 at 3:07
  • "I added in position: fixed; but ran into this issue with the admin menu". so you made .zone-menu-super { position: fixed; } so whats the issue with admin menu? – No Sssweat Nov 9 '15 at 3:24
  • When in the admin view, the new "zone-menu-super" disappears. As the page loads, I see it build, but then it disappears behind the admin menu. However, the Commerce-created "zone-user" does not behave this way. – keb805 Nov 15 '15 at 20:38

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.