Offset Header for When Logged-in and Logged-Out

Working with fixed headers and absolute-positioned drop-down menus can be difficult to adjust with CSS alone.

Use the following snippet to update your offset automatically based on screen size.

var viewportWidth = jQuery(window).width();
if (viewportWidth <= 600) {
     if(jQuery('.logged-in').length>0) {
          jQuery('.mobile_menu').css("top", function() { return jQuery('#masthead').outerHeight() + jQuery('html #wpadminbar').outerHeight() });
     } else {
         jQuery('.mobile_menu').css("top", function() { return jQuery('#masthead').outerHeight() });
     }
}

Leave a Reply

katherine as a flat graphic icon

About Me

I’m an African / Ojibwe First Nations Web Developer living in Winnipeg, Manitoba.

Visit the Tips and Blog to see what I’m working on.