WordPress Admin Bar - markhowellsmead/helpers GitHub Wiki

Breakpoints

• 0 - 600px: Mobile. 46px high, scrolls with the page
• 601-782px: Phablet. 46px high, fixed
• 783px: Regular. 32px high, fixed

Fixed toolbar

Use the following SCSS and JavaScript if you have a toolbar which needs to respect the WordPress admin bar position.

SCSS

.admin-bar {
    .fixed-toolbar {
        top: 46px;
        @include breakpoint(783px) {
            top: 32px;
        }
    }
    html.with--scrolloffset & {
        .fixed-toolbar {
            top: 0;
            @include breakpoint(601px) {
                top: 46px;
            }
            @include breakpoint(783px) {
                top: 32px;
            }
       }
    }
}

JavaScript

// Track window scroll position and apply CSS class to HTML element
var trackScrollPosition = function() {
	if ($(window).scrollTop() > 0) {
		$('html').addClass('with--scrolloffset');
	} else {
		$('html').removeClass('with--scrolloffset');
	}
};

$(document).on('ready.scrollpos', trackScrollPosition);
$(window).on('load.scrollpos scroll.scrollpos', trackScrollPosition);

Hero element

.hero {
	height: 100vh;
	.admin-bar & {
		height: calc(100vh - #{rem-calc(46px)});
		@include breakpoint(783px) {
			height: calc(100vh - #{rem-calc(32px)});
		}
	}
}