Skip to content

jQuery if, else, with media query

In some case, you need to have a jQuery function only at a specific site width, for example, if you want to add a margin dynamically to the site-header only at a specific media query. You can use jQuery for this, this snippet for example, fire the jQuery function only if the browser width is more than 950px.

jQuery(document).ready(function () {

if (document.documentElement.clientWidth < 950) {
// do nothing below 950px
}
else
jQuery('.header-widget').css('marginTop', jQuery('.site-header').outerHeight(true) );
});