This pattern is the single, most important way to indicate to your visitors that they are browsing WFP’s online property. Below, you will find most commonly used patterns for your masthead.
Masthead patterns will vary slightly, depending on your use case, whether the website, but generally follow the same basic style.
Internal
When you are building a website or an application that works on your local network (e.g.: on Intranet), you can implement a simplified version of the WFP masthead.
It has been designed specifically for use with Intranet sites and apps, which don’t require any extensive branding, since its users are already familiar with the WFP.
Internal masthead features a simple navigation, which works on both smaller and bigger screens. To implement it correctly, use the examples below.
Preview
Markup
<header class="wfp-masthead-internal">
<div class="wfp-grid wfp-wrapper">
<div class="wfp-u-3-5 wfp-u-md-1-3 masthead--container">
<h1 class="masthead--title">
<a href="#" class="masthead--logo">Site Title</a>
</h1>
</div>
<div class="wfp-u-2-5 wfp-u-md-2-3 masthead--nav">
<button class="masthead--toggle pure-button small" id="js-nav-trigger">Menu</button>
<nav class="masthead--menu" id="js-nav">
<ul class="menu--group">
<li class="menu--item"><a href="#" class="menu--link active">Navlink #1</a></li>
<li class="menu--item"><a href="#" class="menu--link">Navlink #2</a></li>
<li class="menu--item"><a href="#" class="menu--link">Navlink #3</a></li>
</ul>
</nav>
</div>
</div>
</header>Masthead Position
You can also set masthead component to stay fixed to the top of your page, by adding space-around-narrow class to your body tag (for extra spacing), and class fixed to masthead-internal element.
To ensure the navigation works correctly, download and add the following Javascript library to the bottom of your page, before the closing body tag.
<script src="/js/lib/responsive-nav.min.js"></script>
<script>
var nav = responsiveNav("#js-nav", {
customToggle: "js-nav-trigger",
navClass: "masthead--menu",
openPos: "fixed", // `absolute`, or `fixed`
closedPos: "static"
});
</script>