<header class="page-header">
<div class="notification uk-background-muted uk-text-center uk-h4 uk-margin-remove">
<div class="uk-container">
Notification text here
</div>
</div>
<nav uk-sticky>
<div class="uk-background-secondary uk-light uk-padding uk-padding-remove-horizontal uk-h3 uk-margin-remove">
<div class="uk-container uk-container-expand">
<div class="uk-flex uk-flex-between">
<a class="uk-logo" href="#">LOGO</a>
<button class="uk-button uk-button-default">MENU</button>
</div>
</div>
</div>
<div class="uk-background-muted uk-padding-small uk-padding-remove-horizontal uk-text-center uk-h4 uk-margin-remove uk-visible@m">
<div class="uk-container">
<form class="uk-search uk-search-default">
<a href="" uk-search-icon></a>
<input class="uk-search-input" type="search" placeholder="Search">
</form>
</div>
</div>
</nav>
</header>
<section class="uk-background-cover" uk-height-viewport="offset-top: true" style="background-image: url(https://assets.codepen.io/210284/climber.jpg);"></section>
<section class="uk-margin-large-bottom">
<div class="uk-container uk-margin-medium-top">
<h2>View all posts</h2>
</div>
<div class="post-filters uk-background-secondary uk-light uk-padding uk-padding-remove-horizontal uk-h4">
<div class="uk-container">
<form class="post-filters-form uk-flex uk-flex-middle uk-flex-between">
<div class="post-filters-form-inner uk-flex-1">
<button class="uk-button uk-button-default" type="button">TOGGLE FILTERS</button>
<div class="post-filters-dropdown" uk-dropdown="mode: click; boundary: .post-filters-form; pos: bottom-justify">ALL FILTERS HERE</div>
</div>
<button class="uk-button uk-button-default" type="submit">APPLY FILTERS</button>
</form>
</div>
</div>
<div class="uk-container uk-margin-large">
<div class="uk-child-width-1-2@s uk-child-width-1-3@m" uk-grid>
<div class="uk-flex">
<article class="uk-card uk-card-secondary uk-card-body uk-width-1-1">
<h3 class="uk-text-center">#1</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
</article>
</div>
<div class="uk-flex">
<article class="uk-card uk-card-secondary uk-card-body uk-width-1-1">
<h3 class="uk-text-center">#2</h3>
<p>Aenean feugiat enim iaculis nisl semper, eget tempor risus accumsan.</p>
</article>
</div>
<div class="uk-flex">
<article class="uk-card uk-card-secondary uk-card-body uk-width-1-1">
<h3 class="uk-text-center">#3</h3>
<p>Mauris sit amet mauris consequat, rutrum nunc et, ornare enim.</p>
</article>
</div>
<div class="uk-flex">
<article class="uk-card uk-card-secondary uk-card-body uk-width-1-1">
<h3 class="uk-text-center">#4</h3>
<p>In vestibulum orci sit amet diam pellentesque sagittis.</p>
</article>
</div>
<div class="uk-flex">
<article class="uk-card uk-card-secondary uk-card-body uk-width-1-1">
<h3 class="uk-text-center">#5</h3>
<p>Nunc faucibus diam a risus gravida sodales.</p>
</article>
</div>
<div class="uk-flex">
<article class="uk-card uk-card-secondary uk-card-body uk-width-1-1">
<h3 class="uk-text-center">#6</h3>
<p>Mauris sit amet mauris consequat, rutrum nunc et, ornare enim.</p>
</article>
</div>
<div class="uk-flex">
<article class="uk-card uk-card-secondary uk-card-body uk-width-1-1">
<h3 class="uk-text-centerr">#7</h3>
<p>Nunc faucibus diam a risus gravida sodales.</p>
</article>
</div>
<div class="uk-flex">
<article class="uk-card uk-card-secondary uk-card-body uk-width-1-1">
<h3 class="uk-text-center">#8</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
</article>
</div>
<div class="uk-flex">
<article class="uk-card uk-card-secondary uk-card-body uk-width-1-1">
<h3 class="uk-text-center">#9</h3>
<p>In vestibulum orci sit amet diam pellentesque sagittis.</p>
</article>
</div>
<div class="uk-flex">
<article class="uk-card uk-card-secondary uk-card-body uk-width-1-1">
<h3 class="uk-text-center">#10</h3>
<p>Cras vestibulum ligula quis purus laoreet, et sodales purus vestibulum.</p>
</article>
</div>
<div class="uk-flex">
<article class="uk-card uk-card-secondary uk-card-body uk-width-1-1">
<h3 class="uk-text-center">#11</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
</article>
</div>
<div class="uk-flex">
<article class="uk-card uk-card-secondary uk-card-body uk-width-1-1">
<h3 class="uk-text-center">#12</h3>
<p>Cras vestibulum ligula quis purus laoreet, et sodales purus vestibulum.</p>
</article>
</div>
<div class="uk-flex">
<article class="uk-card uk-card-secondary uk-card-body uk-width-1-1">
<h3 class="uk-text-center">#13</h3>
<p>Sed consectetur sapien at mi dapibus vulputate.</p>
</article>
</div>
<div class="uk-flex">
<article class="uk-card uk-card-secondary uk-card-body uk-width-1-1">
<h3 class="uk-text-center">#14</h3>
<p>Cras vestibulum ligula quis purus laoreet, et sodales purus vestibulum.</p>
</article>
</div>
<div class="uk-flex">
<article class="uk-card uk-card-secondary uk-card-body uk-width-1-1">
<h3 class="uk-text-center">#15</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
</article>
</div>
</div>
<div class="uk-flex uk-flex-center uk-margin-medium-top">
<button class="uk-button uk-button-default">Load more posts</button>
</div>
</div>
</section>
<footer class="page-footer">
<span>made by </span>
<a href="https://georgemartsoukos.com/" target="_blank">
<img width="24" height="24" src="https://assets.codepen.io/162656/george-martsoukos-small-logo.svg" alt="George Martsoukos logo">
</a>
</footer>
.notification {
padding: 5px 0;
}
.page-footer {
position: fixed;
right: 0;
bottom: 50px;
display: flex;
align-items: center;
padding: 5px;
z-index: 1;
color: black;
background: rgba(255, 255, 255, 0.65);
}
.page-footer a {
display: flex;
margin-left: 4px;
}
const pageHeader = document.querySelector(".page-header");
const nav = pageHeader.querySelector("nav");
const mqMedium = window.matchMedia("(min-width: 960px)");
const postFiltersForm = ".post-filters-form";
const postFiltersFormInner = ".post-filters-form-inner";
const postFilters = UIkit.sticky(".post-filters", {
offset: nav.offsetHeight
});
const dropdown = UIkit.dropdown(".post-filters-dropdown");
if (mqMedium.matches) {
dropdown.boundary = postFiltersFormInner;
}
window.addEventListener("resize", function () {
postFilters.offset = nav.offsetHeight;
if (mqMedium.matches) {
dropdown.boundary = postFiltersFormInner;
} else {
dropdown.boundary = postFiltersForm;
}
});
