<nav class="main-menu" role="navigation" aria-label="Main Navigation" aria-labelledby="mainmenulabel">
    <div class="container">

        <div class="site-search site-search--mobile-only">
            <form action="/search" method="post" class="site-search__form--visible">
                <input name="searchTerm" type="text" id="searchTerm" class="site-search__query" placeholder="Search site">
                <button type="submit" role="button" class="site-search__submit">
		    	<img class="search-icon" src="/assets/icons/search_grey.svg" onerror="this.src='/assets/icons/search_gret.png';this.onerror=null;">
		    </button>
            </form>
        </div>
        <h2 id="mainmenulabel" class="main-menu__heading">Main Menu</h2>
        <ul class="main-menu__list">
            <li class="main-menu__item ">
                <a href="#" class="main-menu__link js-menu-level1">key products</a>
                <div class="sub-nav">
                    <div class="grid__column" data-gridspan="12">
                        <ul class="grid__row sub-nav__list">
                            <li class="sub-nav__item" data-gridspan="12 M6 L3">
                                <a class="sub-nav__anchor" href="#" title="All Products">All Products</a>
                            </li>
                            <li class="sub-nav__item" data-gridspan="12 M6 L3">
                                <a class="sub-nav__anchor" href="#" title="Orthopaedic Reconstruction">Orthopaedic Reconstruction</a>
                            </li>
                            <li class="sub-nav__item" data-gridspan="12 M6 L3">
                                <a class="sub-nav__anchor" href="#" title="Sports Medicine">Sports Medicine</a>
                            </li>
                            <li class="sub-nav__item" data-gridspan="12 M6 L3">
                                <a class="sub-nav__anchor" href="#" title="Gynaecology">Gynaecology</a>
                            </li>
                            <li class="sub-nav__item" data-gridspan="12 M6 L3">
                                <a class="sub-nav__anchor" href="#" title="Advanced Wound Management">Advanced Wound Management</a>
                            </li>
                            <li class="sub-nav__item" data-gridspan="12 M6 L3">
                                <a class="sub-nav__anchor" href="#" title="Trauma &amp; Extremities">Trauma &amp; Extremities</a>
                            </li>
                            <li class="sub-nav__item" data-gridspan="12 M6 L3">
                                <a class="sub-nav__anchor" href="#" title="Ear, Nose and Throat">Ear, Nose and Throat</a>
                            </li>
                        </ul>
                    </div>
                </div>
            </li>
            <li class="main-menu__item ">
                <a href="#" class="main-menu__link js-menu-level1">about us</a>
            </li>
            <li class="main-menu__item ">
                <a href="#" class="main-menu__link js-menu-level1">resources</a>
            </li>
            <li class="main-menu__item ">
                <a href="#" class="main-menu__link js-menu-level1">clinical evidence</a>
            </li>
            <li class="main-menu__item  main-menu__item--contact">
                <a href="#" class="main-menu__link js-menu-level1">contact us</a>
            </li>
        </ul>

        <div class="site-search site-search--desktop-only">
            <button type="submit" role="button" class="site-search__trigger js-search-form-trigger">
	    	<img class="search-icon" src="/assets/icons/search_grey.svg" onerror="this.src='/assets/icons/search-grey.png';this.onerror=null;">
	    </button>
            <form action="/search" method="post" class="site-search__form">
                <input name="searchTerm" type="text" id="searchTerm" class="site-search__query" placeholder="Search site">
                <button type="submit" role="button" class="site-search__submit btn btn--primary">Search</button>
            </form>
        </div>
    </div>
</nav>
<nav class="main-menu" role="navigation" aria-label="Main Navigation" aria-labelledby="mainmenulabel">
<div class="container">
	{{> @site-search--mobile-only}}
	<h2 id="mainmenulabel" class="main-menu__heading">Main Menu</h2>
	<ul class="main-menu__list">
		{{#each listItems}}
		<li class="main-menu__item {{#if class}} main-menu__item--{{class}}{{/if}}">
		<a href="{{ this.link }}" class="main-menu__link js-menu-level1">{{ this.title }}</a>
		{{#if @first}}
			{{ render '@sub-navigation' }}
		{{/if}}
		</li>
  		{{/each}}
	</ul>
	{{> @site-search}}
	</div>	
</nav>
{
    "listItems": [
        {
            "title": "key products",
            "link": "#"
        },
        {
            "title": "about us",
            "link": "#"
        },
        {
            "title": "resources",
            "link": "#"
        },
        {
            "title": "clinical evidence",
            "link": "#"
        },
        {
            "title": "contact us",
            "link": "#",
            "class": "contact"
        }
    ]
}
.main-menu {
	display: none;
	@include clearfix();
	@include mq($from: med) {
		display: block;
		border-bottom: 1px solid $grey--superlight;
	}
}
.main-menu--active {
	display: block;
	//add max height
}
.main-menu__heading {
	display: none;

}
.main-menu__list {
	margin-top: 1em;

	position: relative;
	@include clearfix();
	@include mq($from: med) {
		width: 90%;
		width: calc(100% - 50px);
		display: block;
		float:left;
	}
}
.main-menu__item {
	@include mq($from: med) {
		#{$padding-right}: 1.2em;
		float: flip(left, right);
	}
	@include mq($from: large) {
		#{$padding-right}: 2em;
	}
}
.main-menu__link {
	text-decoration: none;
	display: block;
	@include rem2px(font-size, 1.8);
	color: $black;
	padding-bottom: 0.75em;
	&:hover {
		text-decoration: underline;
	}
	@include mq($until: med) {
		background: url('/assets/icons/arrow-down-orange.png') no-repeat top right;
	    background-image: url('/assets/icons/arrow-down-orange.svg'), none;
	    background-repeat: no-repeat;
	    background-position: top right;
	    padding-right: 2.5em;
	    background-size: 18px;
	}
}
.main-menu__link--active {
}
.main-menu__item--contact {
	@include mq($from: med) {
		float: flip(right, left);
		#{$padding-right}: 2em;
		.main-menu__link {
			color: #fd7300;
		}
	}
}
.mobile-menu__button {
	margin-left: 16px;
	margin-top: 3px;
	display: inline-block;
	appearance: none;
	background: $white;
	border: 0;
	float:flip(right,left);
	&:focus,
	&:active {
		outline: 0;
	}
	.menu-icon {
		display: block;
	}
	@include mq($from: med) {
		display: none;
	}
}
$(document).ready(function() {
	//prototype code refactor into objet literal
	var $level1Trigger = $('.js-menu-level1');
	$(document).on('click', $level1Trigger, function(e) {
		//e.preventDefault();
		if(!$(e.target).parents('.main-menu__list').has(e.target).length) {
			$level1Trigger.removeClass('main-menu__link--active');
			$level1Trigger.parent().siblings().children('.main-menu__link').removeClass('main-menu__link--active');
			$level1Trigger.parent().siblings().children('.sub-nav').removeClass('sub-nav--active');
			$level1Trigger.next('.sub-nav').removeClass('sub-nav--active');
		} else {
			$level1Trigger.addClass('main-menu__link--active');
			$level1Trigger.parent().siblings().children('.main-menu__link').removeClass('main-menu__link--active');
			$level1Trigger.parent().siblings().children('.sub-nav').removeClass('sub-nav--active');
			$level1Trigger.next('.sub-nav').addClass('sub-nav--active');
		}
		
	});
	$('.js-mobile-nav-trigger').on('click', function() {
		$('.main-menu').toggleClass('main-menu--active');
	});
});

There are no notes for this item.