This component is deprecated.

This component should not be used for new projects. Only the most severe security-related bugs will be fixed for this component, though existing implementations will continue to work. This page is here for existing users to refer to documentation.

o-header--theme-ic

The Investors Chronicle header. This component is a theme for o-header.

deprecated

Main header

Large header for the top of Investor's Chronicle pages

<header class="o-header" data-o-component="o-header" data-o-header--no-js="">
	<div class="o-header__row o-header__top">
		<div class="o-header__container">
			<div class="o-header__top-wrapper">
				<div class="o-header__top-column o-header__top-column--left">
					<a href="#o-header-drawer" class="o-header__top-link o-header__top-link--menu" aria-controls="o-header-drawer">
						<span class="o-header__top-link-label">Menu</span>
					</a>
					<a href="#o-header-search" class="o-header__top-link o-header__top-link--search" aria-controls="o-header-search-js">
						<span class="o-header__top-link-label">Search</span>
					</a>
				</div>
				<div class="o-header__top-column o-header__top-column--center">
					<a class="o-header__top-logo" href="/" title="Go to Investors Chronicle homepage">
						<span class="o-header__visually-hidden">Investors Chronicle</span>
					</a>
				</div>
				<div class="o-header__top-column o-header__top-column--right">
				</div>
			</div>
		</div>
	</div>

	<!-- To support both core and enhanced, duplicating the search row is necessary to avoid it flashing in enhanced -->
	<!-- Pick only one of the two <div> if you don't need to support both core and enhanced -->
	<div id="o-header-search" class="o-header__row o-header__search o--if-no-js" role="search">
		<div class="o-header__container">
			<form class="o-header__search-form" action="/search" role="search" aria-label="Site search">
				<label class="o-header__visually-hidden" for="o-header-search-term">Search&#x2026;</label>
				<input class="o-header__search-term" id="o-header-search-term" name="q" type="text" placeholder="Search&#x2026;">
				<button class="o-header__search-submit" type="submit">
					Search
				</button>
			</form>
		</div>
	</div>
	<div id="o-header-search-js" class="o-header__row o-header__search" role="search" data-o-header-search="">
		<div class="o-header__container">
			<form class="o-header__search-form" action="/search" role="search" aria-label="Site search">
				<label class="o-header__visually-hidden" for="o-header-search-term-js">Search&#x2026;</label>
				<input class="o-header__search-term" id="o-header-search-term-js" name="q" type="text" placeholder="Search&#x2026;">
				<button class="o-header__search-submit" type="submit">
					Search
				</button>
				<button class="o-header__search-close o--if-js" type="button" aria-controls="o-header-search-js">
					<span class="o-header__visually-hidden">Close</span>
				</button>
			</form>
		</div>
	</div>

	<nav id="o-header-nav-desktop" class="o-header__row o-header__nav o-header__nav--desktop" role="navigation" aria-label="Main navigation">
		<div class="o-header__container">
			<ul class="o-header__nav-list o-header__nav-list--left">
					<li class="o-header__nav-item">
						<a class="o-header__nav-link o-header__nav-link--primary" href="" aria-selected="" id="o-header-link-">Home</a>

					</li>
					<li class="o-header__nav-item">
						<a class="o-header__nav-link o-header__nav-link--primary" href="" aria-selected="" id="o-header-link-1" aria-controls="o-header-mega-1">Tips &amp; Ideas</a>

							<div class="o-header__mega" id="o-header-mega-1" role="group" aria-labelledby="o-header-link-1" data-o-header-mega="1">
								<div class="o-header__container o-header__container--mega">
									<div class="o-header__mega-wrapper">
										<div class="o-header__mega-column o-header__mega-column--subsections">
											<div class="o-header__mega-content">
												<a class="o-header__mega-link o-header__mega-link--large" href="#">Tips &amp; Ideas</a>
												<ul class="o-header__mega-list">
																<li class="o-header__mega-item">
																	<a class="o-header__mega-link" href="#" aria-selected="">All Tips &amp; Ideas</a>
																</li>
																<li class="o-header__mega-item">
																	<a class="o-header__mega-link" href="#" aria-selected="">Share Tips</a>
																</li>
																<li class="o-header__mega-item">
																	<a class="o-header__mega-link" href="#" aria-selected="">Fund Tips</a>
																</li>
																<li class="o-header__mega-item">
																	<a class="o-header__mega-link" href="#" aria-selected="">Trading Ideas</a>
																</li>
																<li class="o-header__mega-item">
																	<a class="o-header__mega-link" href="#" aria-selected="">Stock Screens</a>
																</li>
																<li class="o-header__mega-item">
																	<a class="o-header__mega-link" href="#" aria-selected="">Bargain Shares Portfolio</a>
																</li>
																<li class="o-header__mega-item">
																	<a class="o-header__mega-link" href="#" aria-selected="">John Baron&apos;s Investment Trust Portfolio</a>
																</li>
																<li class="o-header__mega-item">
																	<a class="o-header__mega-link" href="#" aria-selected="">Bearbull Income Fund Portfolio</a>
																</li>
																<li class="o-header__mega-item">
																	<a class="o-header__mega-link" href="#" aria-selected="">Private Investor&apos;s Diary Portfolio</a>
																</li>
																<li class="o-header__mega-item">
																	<a class="o-header__mega-link" href="#" aria-selected="">Tactical Asset Allocation Portfolio</a>
																</li>
																<li class="o-header__mega-item">
																	<a class="o-header__mega-link" href="#" aria-selected="">Chris Dillow&apos;s Benchmark Portfolio</a>
																</li>
												</ul>
											</div>
										</div>
									</div>
								</div>
							</div>

					</li>
					<li class="o-header__nav-item">
						<a class="o-header__nav-link o-header__nav-link--primary" href="" aria-selected="" id="o-header-link-2" aria-controls="o-header-mega-2">Shares</a>

							<div class="o-header__mega" id="o-header-mega-2" role="group" aria-labelledby="o-header-link-2" data-o-header-mega="2">
								<div class="o-header__container o-header__container--mega">
									<div class="o-header__mega-wrapper">
										<div class="o-header__mega-column o-header__mega-column--subsections">
											<div class="o-header__mega-content">
												<a class="o-header__mega-link o-header__mega-link--large" href="#">Shares</a>
												<ul class="o-header__mega-list">
																<li class="o-header__mega-item">
																	<a class="o-header__mega-link" href="#" aria-selected="">All Shares</a>
																</li>
																<li class="o-header__mega-item">
																	<a class="o-header__mega-link" href="#" aria-selected="">Company News</a>
																</li>
																<li class="o-header__mega-item">
																	<a class="o-header__mega-link" href="#" aria-selected="">Results</a>
																</li>
																<li class="o-header__mega-item">
																	<a class="o-header__mega-link" href="#" aria-selected="">Sector Focus</a>
																</li>
																<li class="o-header__mega-item">
																	<a class="o-header__mega-link" href="#" aria-selected="">Equities</a>
																</li>
																<li class="o-header__mega-item">
																	<a class="o-header__mega-link" href="#" aria-selected="">Director Deals</a>
																</li>
												</ul>
											</div>
										</div>
									</div>
								</div>
							</div>

					</li>
					<li class="o-header__nav-item">
						<a class="o-header__nav-link o-header__nav-link--primary" href="" aria-selected="" id="o-header-link-3" aria-controls="o-header-mega-3">Comment</a>

							<div class="o-header__mega" id="o-header-mega-3" role="group" aria-labelledby="o-header-link-3" data-o-header-mega="3">
								<div class="o-header__container o-header__container--mega">
									<div class="o-header__mega-wrapper">
										<div class="o-header__mega-column o-header__mega-column--subsections">
											<div class="o-header__mega-content">
												<a class="o-header__mega-link o-header__mega-link--large" href="#">Comment</a>
												<ul class="o-header__mega-list">
																<li class="o-header__mega-item">
																	<a class="o-header__mega-link" href="#" aria-selected="">All Comment</a>
																</li>
																<li class="o-header__mega-item">
																	<a class="o-header__mega-link" href="#" aria-selected="">The Editor</a>
																</li>
																<li class="o-header__mega-item">
																	<a class="o-header__mega-link" href="#" aria-selected="">Simon Thompson</a>
																</li>
																<li class="o-header__mega-item">
																	<a class="o-header__mega-link" href="#" aria-selected="">The Trader</a>
																</li>
																<li class="o-header__mega-item">
																	<a class="o-header__mega-link" href="#" aria-selected="">Mr Bearbull</a>
																</li>
																<li class="o-header__mega-item">
																	<a class="o-header__mega-link" href="#" aria-selected="">Chris Dillow</a>
																</li>
																<li class="o-header__mega-item">
																	<a class="o-header__mega-link" href="#" aria-selected="">Taking Stock</a>
																</li>
																<li class="o-header__mega-item">
																	<a class="o-header__mega-link" href="#" aria-selected="">Property Matters</a>
																</li>
																<li class="o-header__mega-item">
																	<a class="o-header__mega-link" href="#" aria-selected="">PF Matters</a>
																</li>
																<li class="o-header__mega-item">
																	<a class="o-header__mega-link" href="#" aria-selected="">Paul Jackson</a>
																</li>
																<li class="o-header__mega-item">
																	<a class="o-header__mega-link" href="#" aria-selected="">Markets and Your Money</a>
																</li>
												</ul>
											</div>
										</div>
									</div>
								</div>
							</div>

					</li>
					<li class="o-header__nav-item">
						<a class="o-header__nav-link o-header__nav-link--primary" href="" aria-selected="true" id="o-header-link-4" aria-controls="o-header-mega-4">Market Data</a>

							<div class="o-header__mega" id="o-header-mega-4" role="group" aria-labelledby="o-header-link-4" data-o-header-mega="4">
								<div class="o-header__container o-header__container--mega">
									<div class="o-header__mega-wrapper">
										<div class="o-header__mega-column o-header__mega-column--subsections">
											<div class="o-header__mega-content">
												<a class="o-header__mega-link o-header__mega-link--large" href="#">Market Data</a>
												<ul class="o-header__mega-list">
																<li class="o-header__mega-item">
																	<a class="o-header__mega-link" href="#" aria-selected="">All Market Data</a>
																</li>
																<li class="o-header__mega-item">
																	<a class="o-header__mega-link" href="#" aria-selected="">Equities</a>
																</li>
																<li class="o-header__mega-item">
																	<a class="o-header__mega-link" href="#" aria-selected="">Portfolio</a>
																</li>
																<li class="o-header__mega-item">
																	<a class="o-header__mega-link" href="#" aria-selected="">Funds Data</a>
																</li>
																<li class="o-header__mega-item">
																	<a class="o-header__mega-link" href="#" aria-selected="">Commodities</a>
																</li>
																<li class="o-header__mega-item">
																	<a class="o-header__mega-link" href="#" aria-selected="">Bonds</a>
																</li>
																<li class="o-header__mega-item">
																	<a class="o-header__mega-link" href="#" aria-selected="">UK Corporate Bonds &amp; PIBS</a>
																</li>
																<li class="o-header__mega-item">
																	<a class="o-header__mega-link" href="#" aria-selected="">Forex</a>
																</li>
																<li class="o-header__mega-item">
																	<a class="o-header__mega-link" href="#" aria-selected="">Economic Calendar</a>
																</li>
																<li class="o-header__mega-item">
																	<a class="o-header__mega-link" href="#" aria-selected="">World Markets</a>
																</li>
												</ul>
											</div>
										</div>
									</div>
								</div>
							</div>

					</li>
					<li class="o-header__nav-item">
						<a class="o-header__nav-link o-header__nav-link--primary" href="" aria-selected="" id="o-header-link-5" aria-controls="o-header-mega-5">Managing Your Money</a>

							<div class="o-header__mega" id="o-header-mega-5" role="group" aria-labelledby="o-header-link-5" data-o-header-mega="5">
								<div class="o-header__container o-header__container--mega">
									<div class="o-header__mega-wrapper">
										<div class="o-header__mega-column o-header__mega-column--subsections">
											<div class="o-header__mega-content">
												<a class="o-header__mega-link o-header__mega-link--large" href="#">Managing Your Money</a>
												<ul class="o-header__mega-list">
																<li class="o-header__mega-item">
																	<a class="o-header__mega-link" href="#" aria-selected="">All Managing Your Money</a>
																</li>
																<li class="o-header__mega-item">
																	<a class="o-header__mega-link" href="#" aria-selected="">Portfolio Clinic</a>
																</li>
																<li class="o-header__mega-item">
																	<a class="o-header__mega-link" href="#" aria-selected="">Asset Allocation</a>
																</li>
																<li class="o-header__mega-item">
																	<a class="o-header__mega-link" href="#" aria-selected="">Tax</a>
																</li>
																<li class="o-header__mega-item">
																	<a class="o-header__mega-link" href="#" aria-selected="">Pensions</a>
																</li>
																<li class="o-header__mega-item">
																	<a class="o-header__mega-link" href="#" aria-selected="">Risk</a>
																</li>
																<li class="o-header__mega-item">
																	<a class="o-header__mega-link" href="#" aria-selected="">Property</a>
																</li>
																<li class="o-header__mega-item">
																	<a class="o-header__mega-link" href="#" aria-selected="">Investing for Income</a>
																</li>
																<li class="o-header__mega-item">
																	<a class="o-header__mega-link" href="#" aria-selected="">Investing for Growth</a>
																</li>
																<li class="o-header__mega-item">
																	<a class="o-header__mega-link" href="#" aria-selected="">Tools &amp; Calculators</a>
																</li>
												</ul>
											</div>
										</div>
									</div>
								</div>
							</div>

					</li>
					<li class="o-header__nav-item">
						<a class="o-header__nav-link o-header__nav-link--primary" href="" aria-selected="" id="o-header-link-6" aria-controls="o-header-mega-6">Funds and ETFs</a>

							<div class="o-header__mega" id="o-header-mega-6" role="group" aria-labelledby="o-header-link-6" data-o-header-mega="6">
								<div class="o-header__container o-header__container--mega">
									<div class="o-header__mega-wrapper">
										<div class="o-header__mega-column o-header__mega-column--subsections">
											<div class="o-header__mega-content">
												<a class="o-header__mega-link o-header__mega-link--large" href="#">Funds and ETFs</a>
												<ul class="o-header__mega-list">
																<li class="o-header__mega-item">
																	<a class="o-header__mega-link" href="#" aria-selected="">All Funds &amp; ETFs</a>
																</li>
																<li class="o-header__mega-item">
																	<a class="o-header__mega-link" href="#" aria-selected="">Funds News</a>
																</li>
																<li class="o-header__mega-item">
																	<a class="o-header__mega-link" href="#" aria-selected="">Top 100 Funds</a>
																</li>
																<li class="o-header__mega-item">
																	<a class="o-header__mega-link" href="#" aria-selected="">Top 50 ETFs</a>
																</li>
																<li class="o-header__mega-item">
																	<a class="o-header__mega-link" href="#" aria-selected="">The Big Theme</a>
																</li>
																<li class="o-header__mega-item">
																	<a class="o-header__mega-link" href="#" aria-selected="">The Interview</a>
																</li>
																<li class="o-header__mega-item">
																	<a class="o-header__mega-link" href="#" aria-selected="">Investment Trusts</a>
																</li>
																<li class="o-header__mega-item">
																	<a class="o-header__mega-link" href="#" aria-selected="">ETFs</a>
																</li>
																<li class="o-header__mega-item">
																	<a class="o-header__mega-link" href="#" aria-selected="">Unit Trusts</a>
																</li>
																<li class="o-header__mega-item">
																	<a class="o-header__mega-link" href="#" aria-selected="">ISA Funds</a>
																</li>
																<li class="o-header__mega-item">
																	<a class="o-header__mega-link" href="#" aria-selected="">Funds Data</a>
																</li>
												</ul>
											</div>
										</div>
									</div>
								</div>
							</div>

					</li>
					<li class="o-header__nav-item">
						<a class="o-header__nav-link o-header__nav-link--primary" href="" aria-selected="" id="o-header-link-7">Investment Guides</a>

					</li>
					<li class="o-header__nav-item">
						<a class="o-header__nav-link o-header__nav-link--primary" href="" aria-selected="" id="o-header-link-8">Alpha</a>

					</li>
			</ul>
			<ul class="o-header__nav-list o-header__nav-list--right">
                <li class="o-header__nav-item">
                    <a class="o-header__nav-link o-header__nav-link--utility o-overlay-trigger js-login-form" id="desktop-signin" href="#">Sign In</a>
                </li>
                <li class="o-header__nav-item">
                    <a class="o-header__nav-link o-header__nav-link--utility" href="#">Subscribe</a>
                </li>
			</ul>
		</div>
	</nav>
</header>

<div class="o-header__subnav" role="navigation" aria-label="Sub navigation" data-o-header-subnav="">
	<div class="o-header__container">
		<div class="o-header__subnav-wrap-outside">
			<div class="o-header__subnav-wrap-inside" data-o-header-subnav-wrapper="">
				<div class="o-header__subnav-content">
					<ol class="o-header__subnav-list o-header__subnav-list--breadcrumb" aria-label="Breadcrumb">
						<li class="o-header__subnav-item">
							<a class="o-header__subnav-link" href="#">
								Market Data
							</a>
						</li>
					</ol>

					<ul class="o-header__subnav-list o-header__subnav-list--children" aria-label="Subsections">
						<li class="o-header__subnav-item">
							<a class="o-header__subnav-link" href="#">
								All Market Data
							</a>
						</li>
						<li class="o-header__subnav-item">
							<a class="o-header__subnav-link" href="#">
								Equities
							</a>
						</li>
						<li class="o-header__subnav-item">
							<a class="o-header__subnav-link" href="#">
								Portfolio
							</a>
						</li>
						<li class="o-header__subnav-item">
							<a class="o-header__subnav-link" href="#">
								Funds Data
							</a>
						</li>
						<li class="o-header__subnav-item">
							<a class="o-header__subnav-link" href="#">
								Commodities
							</a>
						</li>
						<li class="o-header__subnav-item">
							<a class="o-header__subnav-link" href="#">
								Bonds
							</a>
						</li>
						<li class="o-header__subnav-item">
							<a class="o-header__subnav-link" href="#">
								UK Corporate Bonds &amp; PIBS
							</a>
						</li>
						<li class="o-header__subnav-item">
							<a class="o-header__subnav-link" href="#">
								Forex
							</a>
						</li>
						<li class="o-header__subnav-item">
							<a class="o-header__subnav-link" href="#">
								Economic Calendar
							</a>
						</li>
						<li class="o-header__subnav-item">
							<a class="o-header__subnav-link" href="#">
								World Markets
							</a>
						</li>
					</ul>
				</div>
			</div>
			<button class="o-header__subnav-button o-header__subnav-button--left" aria-hidden="true" disabled title="srcoll list left"></button>
			<button class="o-header__subnav-button o-header__subnav-button--right" aria-hidden="true" disabled title="srcoll list right"></button>
		</div>
	</div>
</div>


<!-- Drawer -->
<div class="o-header__drawer" id="o-header-drawer" data-o-header-drawer="" data-o-header-drawer--no-js="">
	<div class="o-header__drawer-inner">

		<div class="o-header__drawer-tools">
			<a class="o-header__drawer-tools-logo" href="/">
				<span class="o-header__visually-hidden">Investors Chronicle</span>
			</a>
			<button type="button" class="o-header__drawer-tools-close" aria-controls="o-header-drawer">
				<span class="o-header__visually-hidden">Close</span>
			</button>
		</div>

		<div class="o-header__drawer-search">
			<form class="o-header__drawer-search-form" action="/search" role="search" aria-label="Site search">
				<label class="o-header__visually-hidden" for="o-header-drawer-search-term">Search&#x2026;</label>
				<input class="o-header__drawer-search-term" id="o-header-drawer-search-term" name="q" type="text" autocomplete="off" autocorrect="off" autocapitalize="off" spellcheck="false" placeholder="Search&#x2026;">
				<button class="o-header__drawer-search-submit" type="submit">
					<span class="o-header__visually-hidden">Search</span>
				</button>
			</form>
		</div>
		<nav class="o-header__drawer-menu o-header__drawer-menu--primary" role="navigation" aria-label="Primary navigation">
			<ul class="o-header__drawer-menu-list">
					<li class="o-header__drawer-menu-item">
						<div class="o-header__drawer-menu-toggle-wrapper">
							<a class="o-header__drawer-menu-link o-header__drawer-menu-link o-header__drawer-menu-link--unselected" href="#">Home</a>
						</div>
					</li>
					<li class="o-header__drawer-menu-item">
						<div class="o-header__drawer-menu-toggle-wrapper">
								<button class="o-header__drawer-menu-toggle o-header__drawer-menu-toggle--unselected" aria-controls="o-header-drawer-child-1">
									Show more  links
								</button>
							<a class="o-header__drawer-menu-link o-header__drawer-menu-link--parent o-header__drawer-menu-link--unselected" href="#">Tips &amp; Ideas</a>
						</div>
							<ul class="o-header__drawer-menu-list o-header__drawer-menu-list--child" id="o-header-drawer-child-1">
									<li class="o-header__drawer-menu-item">
										<a class="o-header__drawer-menu-link o-header__drawer-menu-link--child o-header__drawer-menu-link--unselected" href="#" aria-label="Go to All Tips &amp; Ideas">All Tips &amp; Ideas</a>
									</li>
									<li class="o-header__drawer-menu-item">
										<a class="o-header__drawer-menu-link o-header__drawer-menu-link--child o-header__drawer-menu-link--unselected" href="#" aria-label="Go to Share Tips">Share Tips</a>
									</li>
									<li class="o-header__drawer-menu-item">
										<a class="o-header__drawer-menu-link o-header__drawer-menu-link--child o-header__drawer-menu-link--unselected" href="#" aria-label="Go to Fund Tips">Fund Tips</a>
									</li>
									<li class="o-header__drawer-menu-item">
										<a class="o-header__drawer-menu-link o-header__drawer-menu-link--child o-header__drawer-menu-link--unselected" href="#" aria-label="Go to Trading Ideas">Trading Ideas</a>
									</li>
									<li class="o-header__drawer-menu-item">
										<a class="o-header__drawer-menu-link o-header__drawer-menu-link--child o-header__drawer-menu-link--unselected" href="#" aria-label="Go to Stock Screens">Stock Screens</a>
									</li>
									<li class="o-header__drawer-menu-item">
										<a class="o-header__drawer-menu-link o-header__drawer-menu-link--child o-header__drawer-menu-link--unselected" href="#" aria-label="Go to Bargain Shares Portfolio">Bargain Shares Portfolio</a>
									</li>
									<li class="o-header__drawer-menu-item">
										<a class="o-header__drawer-menu-link o-header__drawer-menu-link--child o-header__drawer-menu-link--unselected" href="#" aria-label="Go to John Baron&apos;s Investment Trust Portfolio">John Baron&apos;s Investment Trust Portfolio</a>
									</li>
									<li class="o-header__drawer-menu-item">
										<a class="o-header__drawer-menu-link o-header__drawer-menu-link--child o-header__drawer-menu-link--unselected" href="#" aria-label="Go to Bearbull Income Fund Portfolio">Bearbull Income Fund Portfolio</a>
									</li>
									<li class="o-header__drawer-menu-item">
										<a class="o-header__drawer-menu-link o-header__drawer-menu-link--child o-header__drawer-menu-link--unselected" href="#" aria-label="Go to Private Investor&apos;s Diary Portfolio">Private Investor&apos;s Diary Portfolio</a>
									</li>
									<li class="o-header__drawer-menu-item">
										<a class="o-header__drawer-menu-link o-header__drawer-menu-link--child o-header__drawer-menu-link--unselected" href="#" aria-label="Go to Tactical Asset Allocation Portfolio">Tactical Asset Allocation Portfolio</a>
									</li>
									<li class="o-header__drawer-menu-item">
										<a class="o-header__drawer-menu-link o-header__drawer-menu-link--child o-header__drawer-menu-link--unselected" href="#" aria-label="Go to Chris Dillow&apos;s Benchmark Portfolio">Chris Dillow&apos;s Benchmark Portfolio</a>
									</li>
							</ul>
					</li>
					<li class="o-header__drawer-menu-item">
						<div class="o-header__drawer-menu-toggle-wrapper">
								<button class="o-header__drawer-menu-toggle o-header__drawer-menu-toggle--unselected" aria-controls="o-header-drawer-child-2">
									Show more  links
								</button>
							<a class="o-header__drawer-menu-link o-header__drawer-menu-link--parent o-header__drawer-menu-link--unselected" href="#">Shares</a>
						</div>
							<ul class="o-header__drawer-menu-list o-header__drawer-menu-list--child" id="o-header-drawer-child-2">
									<li class="o-header__drawer-menu-item">
										<a class="o-header__drawer-menu-link o-header__drawer-menu-link--child o-header__drawer-menu-link--unselected" href="#" aria-label="Go to All Shares">All Shares</a>
									</li>
									<li class="o-header__drawer-menu-item">
										<a class="o-header__drawer-menu-link o-header__drawer-menu-link--child o-header__drawer-menu-link--unselected" href="#" aria-label="Go to Company News">Company News</a>
									</li>
									<li class="o-header__drawer-menu-item">
										<a class="o-header__drawer-menu-link o-header__drawer-menu-link--child o-header__drawer-menu-link--unselected" href="#" aria-label="Go to Results">Results</a>
									</li>
									<li class="o-header__drawer-menu-item">
										<a class="o-header__drawer-menu-link o-header__drawer-menu-link--child o-header__drawer-menu-link--unselected" href="#" aria-label="Go to Sector Focus">Sector Focus</a>
									</li>
									<li class="o-header__drawer-menu-item">
										<a class="o-header__drawer-menu-link o-header__drawer-menu-link--child o-header__drawer-menu-link--unselected" href="#" aria-label="Go to Equities">Equities</a>
									</li>
									<li class="o-header__drawer-menu-item">
										<a class="o-header__drawer-menu-link o-header__drawer-menu-link--child o-header__drawer-menu-link--unselected" href="#" aria-label="Go to Director Deals">Director Deals</a>
									</li>
							</ul>
					</li>
					<li class="o-header__drawer-menu-item">
						<div class="o-header__drawer-menu-toggle-wrapper">
								<button class="o-header__drawer-menu-toggle o-header__drawer-menu-toggle--unselected" aria-controls="o-header-drawer-child-3">
									Show more  links
								</button>
							<a class="o-header__drawer-menu-link o-header__drawer-menu-link--parent o-header__drawer-menu-link--unselected" href="#">Comment</a>
						</div>
							<ul class="o-header__drawer-menu-list o-header__drawer-menu-list--child" id="o-header-drawer-child-3">
									<li class="o-header__drawer-menu-item">
										<a class="o-header__drawer-menu-link o-header__drawer-menu-link--child o-header__drawer-menu-link--unselected" href="#" aria-label="Go to All Comment">All Comment</a>
									</li>
									<li class="o-header__drawer-menu-item">
										<a class="o-header__drawer-menu-link o-header__drawer-menu-link--child o-header__drawer-menu-link--unselected" href="#" aria-label="Go to The Editor">The Editor</a>
									</li>
									<li class="o-header__drawer-menu-item">
										<a class="o-header__drawer-menu-link o-header__drawer-menu-link--child o-header__drawer-menu-link--unselected" href="#" aria-label="Go to Simon Thompson">Simon Thompson</a>
									</li>
									<li class="o-header__drawer-menu-item">
										<a class="o-header__drawer-menu-link o-header__drawer-menu-link--child o-header__drawer-menu-link--unselected" href="#" aria-label="Go to The Trader">The Trader</a>
									</li>
									<li class="o-header__drawer-menu-item">
										<a class="o-header__drawer-menu-link o-header__drawer-menu-link--child o-header__drawer-menu-link--unselected" href="#" aria-label="Go to Mr Bearbull">Mr Bearbull</a>
									</li>
									<li class="o-header__drawer-menu-item">
										<a class="o-header__drawer-menu-link o-header__drawer-menu-link--child o-header__drawer-menu-link--unselected" href="#" aria-label="Go to Chris Dillow">Chris Dillow</a>
									</li>
									<li class="o-header__drawer-menu-item">
										<a class="o-header__drawer-menu-link o-header__drawer-menu-link--child o-header__drawer-menu-link--unselected" href="#" aria-label="Go to Taking Stock">Taking Stock</a>
									</li>
									<li class="o-header__drawer-menu-item">
										<a class="o-header__drawer-menu-link o-header__drawer-menu-link--child o-header__drawer-menu-link--unselected" href="#" aria-label="Go to Property Matters">Property Matters</a>
									</li>
									<li class="o-header__drawer-menu-item">
										<a class="o-header__drawer-menu-link o-header__drawer-menu-link--child o-header__drawer-menu-link--unselected" href="#" aria-label="Go to PF Matters">PF Matters</a>
									</li>
									<li class="o-header__drawer-menu-item">
										<a class="o-header__drawer-menu-link o-header__drawer-menu-link--child o-header__drawer-menu-link--unselected" href="#" aria-label="Go to Paul Jackson">Paul Jackson</a>
									</li>
									<li class="o-header__drawer-menu-item">
										<a class="o-header__drawer-menu-link o-header__drawer-menu-link--child o-header__drawer-menu-link--unselected" href="#" aria-label="Go to Markets and Your Money">Markets and Your Money</a>
									</li>
							</ul>
					</li>
					<li class="o-header__drawer-menu-item">
						<div class="o-header__drawer-menu-toggle-wrapper">
								<button class="o-header__drawer-menu-toggle o-header__drawer-menu-toggle--unselected" aria-controls="o-header-drawer-child-4">
									Show more  links
								</button>
							<a class="o-header__drawer-menu-link o-header__drawer-menu-link--parent o-header__drawer-menu-link--unselected" href="#">Market Data</a>
						</div>
							<ul class="o-header__drawer-menu-list o-header__drawer-menu-list--child" id="o-header-drawer-child-4">
									<li class="o-header__drawer-menu-item">
										<a class="o-header__drawer-menu-link o-header__drawer-menu-link--child o-header__drawer-menu-link--unselected" href="#" aria-label="Go to All Market Data">All Market Data</a>
									</li>
									<li class="o-header__drawer-menu-item">
										<a class="o-header__drawer-menu-link o-header__drawer-menu-link--child o-header__drawer-menu-link--unselected" href="#" aria-label="Go to Equities">Equities</a>
									</li>
									<li class="o-header__drawer-menu-item">
										<a class="o-header__drawer-menu-link o-header__drawer-menu-link--child o-header__drawer-menu-link--unselected" href="#" aria-label="Go to Portfolio">Portfolio</a>
									</li>
									<li class="o-header__drawer-menu-item">
										<a class="o-header__drawer-menu-link o-header__drawer-menu-link--child o-header__drawer-menu-link--unselected" href="#" aria-label="Go to Funds Data">Funds Data</a>
									</li>
									<li class="o-header__drawer-menu-item">
										<a class="o-header__drawer-menu-link o-header__drawer-menu-link--child o-header__drawer-menu-link--unselected" href="#" aria-label="Go to Commodities">Commodities</a>
									</li>
									<li class="o-header__drawer-menu-item">
										<a class="o-header__drawer-menu-link o-header__drawer-menu-link--child o-header__drawer-menu-link--unselected" href="#" aria-label="Go to Bonds">Bonds</a>
									</li>
									<li class="o-header__drawer-menu-item">
										<a class="o-header__drawer-menu-link o-header__drawer-menu-link--child o-header__drawer-menu-link--unselected" href="#" aria-label="Go to UK Corporate Bonds &amp; PIBS">UK Corporate Bonds &amp; PIBS</a>
									</li>
									<li class="o-header__drawer-menu-item">
										<a class="o-header__drawer-menu-link o-header__drawer-menu-link--child o-header__drawer-menu-link--unselected" href="#" aria-label="Go to Forex">Forex</a>
									</li>
									<li class="o-header__drawer-menu-item">
										<a class="o-header__drawer-menu-link o-header__drawer-menu-link--child o-header__drawer-menu-link--unselected" href="#" aria-label="Go to Economic Calendar">Economic Calendar</a>
									</li>
									<li class="o-header__drawer-menu-item">
										<a class="o-header__drawer-menu-link o-header__drawer-menu-link--child o-header__drawer-menu-link--unselected" href="#" aria-label="Go to World Markets">World Markets</a>
									</li>
							</ul>
					</li>
					<li class="o-header__drawer-menu-item">
						<div class="o-header__drawer-menu-toggle-wrapper">
								<button class="o-header__drawer-menu-toggle o-header__drawer-menu-toggle--unselected" aria-controls="o-header-drawer-child-5">
									Show more  links
								</button>
							<a class="o-header__drawer-menu-link o-header__drawer-menu-link--parent o-header__drawer-menu-link--unselected" href="#">Managing Your Money</a>
						</div>
							<ul class="o-header__drawer-menu-list o-header__drawer-menu-list--child" id="o-header-drawer-child-5">
									<li class="o-header__drawer-menu-item">
										<a class="o-header__drawer-menu-link o-header__drawer-menu-link--child o-header__drawer-menu-link--unselected" href="#" aria-label="Go to All Managing Your Money">All Managing Your Money</a>
									</li>
									<li class="o-header__drawer-menu-item">
										<a class="o-header__drawer-menu-link o-header__drawer-menu-link--child o-header__drawer-menu-link--unselected" href="#" aria-label="Go to Portfolio Clinic">Portfolio Clinic</a>
									</li>
									<li class="o-header__drawer-menu-item">
										<a class="o-header__drawer-menu-link o-header__drawer-menu-link--child o-header__drawer-menu-link--unselected" href="#" aria-label="Go to Asset Allocation">Asset Allocation</a>
									</li>
									<li class="o-header__drawer-menu-item">
										<a class="o-header__drawer-menu-link o-header__drawer-menu-link--child o-header__drawer-menu-link--unselected" href="#" aria-label="Go to Tax">Tax</a>
									</li>
									<li class="o-header__drawer-menu-item">
										<a class="o-header__drawer-menu-link o-header__drawer-menu-link--child o-header__drawer-menu-link--unselected" href="#" aria-label="Go to Pensions">Pensions</a>
									</li>
									<li class="o-header__drawer-menu-item">
										<a class="o-header__drawer-menu-link o-header__drawer-menu-link--child o-header__drawer-menu-link--unselected" href="#" aria-label="Go to Risk">Risk</a>
									</li>
									<li class="o-header__drawer-menu-item">
										<a class="o-header__drawer-menu-link o-header__drawer-menu-link--child o-header__drawer-menu-link--unselected" href="#" aria-label="Go to Property">Property</a>
									</li>
									<li class="o-header__drawer-menu-item">
										<a class="o-header__drawer-menu-link o-header__drawer-menu-link--child o-header__drawer-menu-link--unselected" href="#" aria-label="Go to Investing for Income">Investing for Income</a>
									</li>
									<li class="o-header__drawer-menu-item">
										<a class="o-header__drawer-menu-link o-header__drawer-menu-link--child o-header__drawer-menu-link--unselected" href="#" aria-label="Go to Investing for Growth">Investing for Growth</a>
									</li>
									<li class="o-header__drawer-menu-item">
										<a class="o-header__drawer-menu-link o-header__drawer-menu-link--child o-header__drawer-menu-link--unselected" href="#" aria-label="Go to Tools &amp; Calculators">Tools &amp; Calculators</a>
									</li>
							</ul>
					</li>
					<li class="o-header__drawer-menu-item">
						<div class="o-header__drawer-menu-toggle-wrapper">
								<button class="o-header__drawer-menu-toggle o-header__drawer-menu-toggle--unselected" aria-controls="o-header-drawer-child-6">
									Show more  links
								</button>
							<a class="o-header__drawer-menu-link o-header__drawer-menu-link--parent o-header__drawer-menu-link--unselected" href="#">Funds and ETFs</a>
						</div>
							<ul class="o-header__drawer-menu-list o-header__drawer-menu-list--child" id="o-header-drawer-child-6">
									<li class="o-header__drawer-menu-item">
										<a class="o-header__drawer-menu-link o-header__drawer-menu-link--child o-header__drawer-menu-link--unselected" href="#" aria-label="Go to All Funds &amp; ETFs">All Funds &amp; ETFs</a>
									</li>
									<li class="o-header__drawer-menu-item">
										<a class="o-header__drawer-menu-link o-header__drawer-menu-link--child o-header__drawer-menu-link--unselected" href="#" aria-label="Go to Funds News">Funds News</a>
									</li>
									<li class="o-header__drawer-menu-item">
										<a class="o-header__drawer-menu-link o-header__drawer-menu-link--child o-header__drawer-menu-link--unselected" href="#" aria-label="Go to Top 100 Funds">Top 100 Funds</a>
									</li>
									<li class="o-header__drawer-menu-item">
										<a class="o-header__drawer-menu-link o-header__drawer-menu-link--child o-header__drawer-menu-link--unselected" href="#" aria-label="Go to Top 50 ETFs">Top 50 ETFs</a>
									</li>
									<li class="o-header__drawer-menu-item">
										<a class="o-header__drawer-menu-link o-header__drawer-menu-link--child o-header__drawer-menu-link--unselected" href="#" aria-label="Go to The Big Theme">The Big Theme</a>
									</li>
									<li class="o-header__drawer-menu-item">
										<a class="o-header__drawer-menu-link o-header__drawer-menu-link--child o-header__drawer-menu-link--unselected" href="#" aria-label="Go to The Interview">The Interview</a>
									</li>
									<li class="o-header__drawer-menu-item">
										<a class="o-header__drawer-menu-link o-header__drawer-menu-link--child o-header__drawer-menu-link--unselected" href="#" aria-label="Go to Investment Trusts">Investment Trusts</a>
									</li>
									<li class="o-header__drawer-menu-item">
										<a class="o-header__drawer-menu-link o-header__drawer-menu-link--child o-header__drawer-menu-link--unselected" href="#" aria-label="Go to ETFs">ETFs</a>
									</li>
									<li class="o-header__drawer-menu-item">
										<a class="o-header__drawer-menu-link o-header__drawer-menu-link--child o-header__drawer-menu-link--unselected" href="#" aria-label="Go to Unit Trusts">Unit Trusts</a>
									</li>
									<li class="o-header__drawer-menu-item">
										<a class="o-header__drawer-menu-link o-header__drawer-menu-link--child o-header__drawer-menu-link--unselected" href="#" aria-label="Go to ISA Funds">ISA Funds</a>
									</li>
									<li class="o-header__drawer-menu-item">
										<a class="o-header__drawer-menu-link o-header__drawer-menu-link--child o-header__drawer-menu-link--unselected" href="#" aria-label="Go to Funds Data">Funds Data</a>
									</li>
							</ul>
					</li>
					<li class="o-header__drawer-menu-item">
						<div class="o-header__drawer-menu-toggle-wrapper">
							<a class="o-header__drawer-menu-link o-header__drawer-menu-link o-header__drawer-menu-link--unselected" href="#">Investment Guides</a>
						</div>
					</li>
					<li class="o-header__drawer-menu-item">
						<div class="o-header__drawer-menu-toggle-wrapper">
							<a class="o-header__drawer-menu-link o-header__drawer-menu-link o-header__drawer-menu-link--unselected" href="#">Alpha</a>
						</div>
					</li>
			</ul>
		</nav>
		<nav class="o-header__drawer-menu o-header__drawer-menu--user" role="navigation" aria-label="User navigation">
			<ul class="o-header__drawer-menu-list">
				<li class="o-header__drawer-menu-item">
					<a class="o-header__drawer-menu-link" href="#">Subscribe</a>
				</li>
				<li class="o-header__drawer-menu-item">
					<a class="o-header__drawer-menu-link o-overlay-trigger js-login-form" id="mobile-signin" href="">Sign In</a>
				</li>
			</ul>
		</nav>
	</div>
</div>

Slimline sticky header

This header appears when scrolling down the page

<header class="o-header o-header--simple o-header--sticky o--if-js" aria-hidden="true" role="presentation" data-o-component="o-header" data-o-header--sticky="">
	<div class="o-header__row o-header__top">
		<div class="o-header__container">
			<div class="o-header__top-wrapper">
				<div class="o-header__top-column o-header__top-column--left">
					<a href="#o-header-drawer" class="o-header__top-link o-header__top-link--menu" aria-controls="o-header-drawer" tabindex="-1">
						<span class="o-header__top-link-label">Menu</span>
					</a>
					<a href="#o-header-search-sticky" class="o-header__top-link o-header__top-link--search" aria-controls="o-header-search-sticky" tabindex="-1">
						<span class="o-header__top-link-label">Search</span>
					</a>
				</div>
				<div class="o-header__top-column o-header__top-column--center">
					<!-- takeover content will show at the L breakpoint and hide all following siblings -->
					<div class="o-header__top-takeover">
						<div class="o-header__nav">
							<ul class="o-header__nav-list o-header__nav-list--left">
									<li class="o-header__nav-item">
										<a class="o-header__nav-link o-header__nav-link--primary" href="#" aria-selected="" tabindex="-1">Home</a>
									</li>
									<li class="o-header__nav-item">
										<a class="o-header__nav-link o-header__nav-link--primary" href="#" aria-selected="" tabindex="-1">Tips &amp; Ideas</a>
									</li>
									<li class="o-header__nav-item">
										<a class="o-header__nav-link o-header__nav-link--primary" href="#" aria-selected="" tabindex="-1">Shares</a>
									</li>
									<li class="o-header__nav-item">
										<a class="o-header__nav-link o-header__nav-link--primary" href="#" aria-selected="" tabindex="-1">Comment</a>
									</li>
									<li class="o-header__nav-item">
										<a class="o-header__nav-link o-header__nav-link--primary" href="#" aria-selected="" tabindex="-1">Market Data</a>
									</li>
									<li class="o-header__nav-item">
										<a class="o-header__nav-link o-header__nav-link--primary" href="#" aria-selected="" tabindex="-1">Managing Your Money</a>
									</li>
									<li class="o-header__nav-item">
										<a class="o-header__nav-link o-header__nav-link--primary" href="#" aria-selected="" tabindex="-1">Funds and ETFs</a>
									</li>
									<li class="o-header__nav-item">
										<a class="o-header__nav-link o-header__nav-link--primary" href="#" aria-selected="" tabindex="-1">Investment Guides</a>
									</li>
									<li class="o-header__nav-item">
										<a class="o-header__nav-link o-header__nav-link--primary" href="#" aria-selected="" tabindex="-1">Alpha</a>
									</li>
							</ul>
						</div>
					</div>
					<a class="o-header__top-logo" href="/" title="Go to the Investors Chronicle homepage" tabindex="-1">
						<span class="o-header__visually-hidden">Investors Chronicle</span>
					</a>
				</div>
				<div class="o-header__top-column o-header__top-column--right">
				</div>
			</div>
		</div>
	</div>

	<div id="o-header-search-sticky" class="o-header__row o-header__search o--if-js" role="search" data-o-header-search="">
		<div class="o-header__container">
			<form class="o-header__search-form" action="/search" role="search" aria-label="Site search">
				<label class="o-header__visually-hidden" for="o-header-search-term-js">Search the <abbr title="Investors Chronicle">IC</abbr></label>
				<input class="o-header__search-term" id="o-header-search-term-js" name="q" type="text" placeholder="Search">
				<button class="o-header__search-submit" type="submit">
					Search
				</button>
				<button class="o-header__search-close" type="button" aria-controls="o-header-search-sticky">
					<span class="o-header__visually-hidden">Close</span>
				</button>
			</form>
		</div>
	</div>

</header>
<!-- Add drawer HTML in here -->
Bower Dependencies
o-header ^6.12.0
o-assets ^3.0.2
o-grid ^4.3.0
GitHub Repository

Quickstart

Build Service

Add the following to your <script> and <link> tags.

o-header--theme-ic@^1.0.1

How do I do that?

For more information see the Origami build service.

Manual Build Process

Run the following command in the root directory of your project, to add this dependency to your bower.json file:

bower install --save "o-header--theme-ic"@"^1.0.1"

For more information see the Origami build process.