Offset Header for When Logged-in and Logged-Out

May 22, 2019

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