Header search bar

[penpadstudio]

[Android63]

Duplicate of #19

[cehwitham]

Let's use this issue to split out the search bar from #19

[Android63]

For some reason, there's a 3-pixel vertical misalignment between the logo and the search bar (the logo sits lower), as seen in this screenshot: I can eliminate this gap by removing align-items: flex-end; from .c-page-header__inner but, that could have unwanted side-effects. The header markup is as follows:

<header id="jsPageHeader" class="c-page-header" role="banner">
        <div class="o-wrapper c-page-header__inner">

                <!-- Logo -->
                <a href="http://nightingalewp.dev/" class="custom-logo-link" rel="home" itemprop="url"><img width="245" height="72" src="http://nightingalewp.dev/wp-content/uploads/2017/08/NHS_LA_Logo_Blue.png" class="custom-logo" alt="NHS Leadership Academy logo" itemprop="logo" srcset="http://nightingalewp.dev/wp-content/uploads/2017/08/NHS_LA_Logo_Blue.png 245w, http://nightingalewp.dev/wp-content/uploads/2017/08/NHS_LA_Logo_Blue@2x.png 490w" sizes="(max-width: 245px) 100vw, 245px"></a>
                <div class="o-layout c-page-header__controls">

                    <!-- Search box -->
                    <div class="c-form-input">
                        <div class="o-layout--right"><section class="widget widget_search"><form role="search" method="get" class="search-form" action="/">
<input type="search" class="search-field" placeholder="Search" value="" name="s">
<input type="submit" class="search-submit c-sprite  c-sprite--magnifying-glass-rev" value="Search">
</form></section></div><!-- .o-layout--right -->                    </div><!-- .o-layout--item -->

                    <!-- Main menu -->
                    <button class="c-nav-trigger" id="jsNavTrigger" aria-label="menu" data-expands="#jsNav">☰</button>
                    <nav class="c-nav-primary" id="primaryNav" role="navigation">
                        <ul id="jsNav" class="c-nav-primary__list"><li class="c-nav-primary__item" data-nav-index="1"><a href="http://nightingalewp.dev/home/" class="c-nav-primary__link">Home</a></li><!-- .c-nav-primary__item --><li class="c-nav-primary__item" data-nav-index="2"><a href="http://nightingalewp.dev/about/" class="c-nav-primary__link">About</a></li><!-- .c-nav-primary__item --><li class="c-nav-primary__item" data-nav-index="3"><a href="http://nightingalewp.dev/sample-page/" class="c-nav-primary__link">Sample Page</a></li><!-- .c-nav-primary__item --><li class="c-nav-primary__item" data-nav-index="4"><button class="c-nav-primary__link" data-expands="sub-menu-4" data-popup="" role="button" aria-expanded="false" aria-haspopup="true">Parent Page</button></li><li class="c-nav-primary__item" data-nav-index="5"><button class="c-nav-primary__link" data-expands="sub-menu-5" data-popup="" role="button" aria-expanded="false" aria-haspopup="true">Blog</button></li><!-- .c-nav-primary__item --><li class="c-nav-primary__item" data-nav-index="6"><a class="c-btn c-btn--submit c-btn--natural" href="http://nightingalewp.dev/wp-login.php?redirect_to=index.php">Log in</a></li></ul>                   </nav><!-- #site-navigation -->

                </div><!-- .c-page-header__controls -->

        </div><!-- .o-wrapper .c-page-header__inner-->

    <nav class="c-nav-primary__sub jsNavSub" id="sub-menu-4" role="group" aria-label="sub menu" style="display: none;"><div class="o-wrapper"><div class="o-layout"><div class="o-layout__item  u-6/12@lg"><h4 class="u-margin-bottom-small">This is a new sub nav area</h4><p class="u-margin-bottom-small"><small>Menu short description that introduces the user to the list within this dropdown menu.</small></p><p class="u-margin-bottom-small"><a href="/" class="c-btn  c-btn--primary  c-btn--full">Button</a></p></div><!-- .o-layout__item --><div class="o-layout__item  u-6/12@lg"><ul class="c-nav-primary__sub-links"><li class="c-nav-primary__item"><a href="http://nightingalewp.dev/parent-page/child-page-01/" class="c-nav-primary__link">Child Page 01</a></li><!-- .c-nav-primary__item --><li class="c-nav-primary__item"><a href="http://nightingalewp.dev/parent-page/child-page-02/" class="c-nav-primary__link">Child Page 02</a></li><!-- .c-nav-primary__item --></ul></div><!-- .o-layout__item --></div><!-- .o-layout --></div><!-- .o-wrapper --></nav><nav class="c-nav-primary__sub jsNavSub" id="sub-menu-5" role="group" aria-label="sub menu" style="display: none;"><div class="o-wrapper"><div class="o-layout"><div class="o-layout__item  u-6/12@lg"><h4 class="u-margin-bottom-small">Test Header</h4><p class="u-margin-bottom-small"><small>Some test text</small></p><p class="u-margin-bottom-small"><a href="/" class="c-btn  c-btn--primary  c-btn--full">Test Button</a></p></div><!-- .o-layout__item --><div class="o-layout__item  u-6/12@lg"><ul class="c-nav-primary__sub-links"><li class="c-nav-primary__item"><a href="http://nightingalewp.dev/parent-page/child-page-03/" class="c-nav-primary__link">Child Page 03</a></li><!-- .c-nav-primary__item --><li class="c-nav-primary__item"><a href="http://nightingalewp.dev/parent-page/child-page-04/" class="c-nav-primary__link">Child Page 04</a></li><!-- .c-nav-primary__item --><li class="c-nav-primary__item"><a href="http://nightingalewp.dev/parent-page/child-page-05/" class="c-nav-primary__link">Child Page 05</a></li><!-- .c-nav-primary__item --></ul></div><!-- .o-layout__item --></div><!-- .o-layout --></div><!-- .o-wrapper --></nav></header>

Any suggestions @cehwitham?

[Android63]

Search bar styling should be in Nightingale framework, so this issue is on hold until that is done. This PR references: https://github.com/NHSLeadership/nightingale/pull/180

[Android63]

Awaiting https://github.com/NHSLeadership/nightingale/pull/185

[Android63]

Since NHSLeadership/nightingale#185 has now been merged, this issue is unblocked.