Wellcome Web Components

Header: Default 

<div class="header-wrapper stickable">
    <div id="header" class="site-header wt-grid-main">
        <div class="site-header__contents">
            <a class="site-header__logo wt-grid-left" href="/">
                <div class="site-header__logo__wrapper">
                    <img class="site-header__logo__wellcome png-to-svg" src="../../assets/images/new-logos/wellcome-logo.png" alt="Wellcome">
                    <img class="site-header__logo__w" src="../../assets/images/new-logos/wellcome-logo-w.svg" alt="Wellcome">
                    <img class="site-header__logo__mobile" src="../../assets/images/new-logos/wellcome-logo-mobile.svg" alt="Wellcome">
                </div>
            </a>
            <div class="nav-links">
                <a class="site-navigation-link" href="#site-navigation">menu</a>
                <a class="site-navigation-link" href="#site-search">search</a>
            </div>
            <div class="nav-large">
                <div class="nav site-nav" role="navigation">

                    Notice: Undefined index: navigation in /home/ubuntu/corporate/www/sites/all/themes/corp_base/node_modules/tpl-php/transformer.php(20) : eval()'d code on line 13 Call Stack: 0.0002 278728 1. {main}() /home/ubuntu/corporate/www/sites/all/themes/corp_base/node_modules/tpl-php/transformer.php:0
                    0.0006 287928 2. eval('?>
                    <div class="header-wrapper <?php print $variables['is_homepage'] ? 'homepage' : 'stickable'; ?>">
                        <div id="header" class="site-header wt-grid-main">
                            <div class="site-header__contents">
                                <a class="site-header__logo wt-grid-left" href="/">
                                    <?php
        print $variables['logo'];
      ?>
                                </a>
                                <div class="nav-links">
                                    <a class="site-navigation-link" href="#site-navigation">menu</a>
                                    <a class="site-navigation-link" href="#site-search">search</a>
                                </div>
                                <div class="nav-large">
                                    <div class="nav site-nav" role="navigation">
                                        <?php print $variables['navigation']; ?>
                                    </div>
                                </div>
                                <div class="search-enhanced wt-grid-right">
                                    <div class="site-search site-search--header">
                                        <label id="site-search__label" class="site-search__heading">Search</label>
                                        <?php print $variables['search']; ?>
                                    </div>
                                </div>
                            </div>
                            <div class="nav-small">
                                <div class="nav site-nav" role="navigation">
                                    <?php print $variables['hamburger']; ?>
                                    <?php print $variables['navigation']; ?>
                                    <a class="nav-small__overlay collapsible__switch--additional" aria-label="Close menu"></a>
                                </div>
                            </div>
                        </div>
                        <div class="nav-large wt-grid-full">
                            <?php print $variables['secondary_navigation']; ?>
                        </div>
                    </div>
                    ') /home/ubuntu/corporate/www/sites/all/themes/corp_base/node_modules/tpl-php/transformer.php:20

                </div>
            </div>
            <div class="search-enhanced wt-grid-right">
                <div class="site-search site-search--header">
                    <label id="site-search__label" class="site-search__heading">Search</label>
                </div>
            </div>
        </div>
        <div class="nav-small">
            <div class="nav site-nav" role="navigation">

                Notice: Undefined index: hamburger in /home/ubuntu/corporate/www/sites/all/themes/corp_base/node_modules/tpl-php/transformer.php(20) : eval()'d code on line 25 Call Stack: 0.0002 278728 1. {main}() /home/ubuntu/corporate/www/sites/all/themes/corp_base/node_modules/tpl-php/transformer.php:0
                0.0006 287928 2. eval('?>
                <div class="header-wrapper <?php print $variables['is_homepage'] ? 'homepage' : 'stickable'; ?>">
                    <div id="header" class="site-header wt-grid-main">
                        <div class="site-header__contents">
                            <a class="site-header__logo wt-grid-left" href="/">
                                <?php
        print $variables['logo'];
      ?>
                            </a>
                            <div class="nav-links">
                                <a class="site-navigation-link" href="#site-navigation">menu</a>
                                <a class="site-navigation-link" href="#site-search">search</a>
                            </div>
                            <div class="nav-large">
                                <div class="nav site-nav" role="navigation">
                                    <?php print $variables['navigation']; ?>
                                </div>
                            </div>
                            <div class="search-enhanced wt-grid-right">
                                <div class="site-search site-search--header">
                                    <label id="site-search__label" class="site-search__heading">Search</label>
                                    <?php print $variables['search']; ?>
                                </div>
                            </div>
                        </div>
                        <div class="nav-small">
                            <div class="nav site-nav" role="navigation">
                                <?php print $variables['hamburger']; ?>
                                <?php print $variables['navigation']; ?>
                                <a class="nav-small__overlay collapsible__switch--additional" aria-label="Close menu"></a>
                            </div>
                        </div>
                    </div>
                    <div class="nav-large wt-grid-full">
                        <?php print $variables['secondary_navigation']; ?>
                    </div>
                </div>
                ') /home/ubuntu/corporate/www/sites/all/themes/corp_base/node_modules/tpl-php/transformer.php:20 Notice: Undefined index: navigation in /home/ubuntu/corporate/www/sites/all/themes/corp_base/node_modules/tpl-php/transformer.php(20) : eval()'d code on line
                26 Call Stack: 0.0002 278728 1. {main}() /home/ubuntu/corporate/www/sites/all/themes/corp_base/node_modules/tpl-php/transformer.php:0 0.0006 287928 2. eval('?>
                <div class="header-wrapper <?php print $variables['is_homepage'] ? 'homepage' : 'stickable'; ?>">
                    <div id="header" class="site-header wt-grid-main">
                        <div class="site-header__contents">
                            <a class="site-header__logo wt-grid-left" href="/">
                                <?php
        print $variables['logo'];
      ?>
                            </a>
                            <div class="nav-links">
                                <a class="site-navigation-link" href="#site-navigation">menu</a>
                                <a class="site-navigation-link" href="#site-search">search</a>
                            </div>
                            <div class="nav-large">
                                <div class="nav site-nav" role="navigation">
                                    <?php print $variables['navigation']; ?>
                                </div>
                            </div>
                            <div class="search-enhanced wt-grid-right">
                                <div class="site-search site-search--header">
                                    <label id="site-search__label" class="site-search__heading">Search</label>
                                    <?php print $variables['search']; ?>
                                </div>
                            </div>
                        </div>
                        <div class="nav-small">
                            <div class="nav site-nav" role="navigation">
                                <?php print $variables['hamburger']; ?>
                                <?php print $variables['navigation']; ?>
                                <a class="nav-small__overlay collapsible__switch--additional" aria-label="Close menu"></a>
                            </div>
                        </div>
                    </div>
                    <div class="nav-large wt-grid-full">
                        <?php print $variables['secondary_navigation']; ?>
                    </div>
                </div>
                ') /home/ubuntu/corporate/www/sites/all/themes/corp_base/node_modules/tpl-php/transformer.php:20

                <a class="nav-small__overlay collapsible__switch--additional" aria-label="Close menu"></a>
            </div>
        </div>
    </div>
    <div class="nav-large wt-grid-full">
        Notice: Undefined index: secondary_navigation in /home/ubuntu/corporate/www/sites/all/themes/corp_base/node_modules/tpl-php/transformer.php(20) : eval()'d code on line 31 Call Stack: 0.0002 278728 1. {main}() /home/ubuntu/corporate/www/sites/all/themes/corp_base/node_modules/tpl-php/transformer.php:0
        0.0006 287928 2. eval('?>
        <div class="header-wrapper <?php print $variables['is_homepage'] ? 'homepage' : 'stickable'; ?>">
            <div id="header" class="site-header wt-grid-main">
                <div class="site-header__contents">
                    <a class="site-header__logo wt-grid-left" href="/">
                        <?php
        print $variables['logo'];
      ?>
                    </a>
                    <div class="nav-links">
                        <a class="site-navigation-link" href="#site-navigation">menu</a>
                        <a class="site-navigation-link" href="#site-search">search</a>
                    </div>
                    <div class="nav-large">
                        <div class="nav site-nav" role="navigation">
                            <?php print $variables['navigation']; ?>
                        </div>
                    </div>
                    <div class="search-enhanced wt-grid-right">
                        <div class="site-search site-search--header">
                            <label id="site-search__label" class="site-search__heading">Search</label>
                            <?php print $variables['search']; ?>
                        </div>
                    </div>
                </div>
                <div class="nav-small">
                    <div class="nav site-nav" role="navigation">
                        <?php print $variables['hamburger']; ?>
                        <?php print $variables['navigation']; ?>
                        <a class="nav-small__overlay collapsible__switch--additional" aria-label="Close menu"></a>
                    </div>
                </div>
            </div>
            <div class="nav-large wt-grid-full">
                <?php print $variables['secondary_navigation']; ?>
            </div>
        </div>
        ') /home/ubuntu/corporate/www/sites/all/themes/corp_base/node_modules/tpl-php/transformer.php:20

    </div>
</div>
  • Content: 
    /* stylelint-disable declaration-no-important */

.header-wrapper {
  background: $white;
  top: 0;
  transform: none;
  transition: transform $stickyHeadingTransLength;
  width: 100%;
  z-index: 4;

  .enhanced & {
    position: fixed;

    + .wt-grid-main,
    + .wrapper--full,
    + iframe + .wt-grid-main,
    + iframe + .wrapper--full {
      margin-top: $headerHeightSticky + $secondaryNavHeight !important;

      @include respond-to($grid-breakpoint-s) {
        margin-top: $headerHeightNormal + $secondaryNavHeight !important;
      }
    }

    + .wt-grid-full,
    + iframe + .wt-grid-full {
      padding-top: $headerHeightSticky + $grid-typo-spacing-xxs !important;

      @include respond-to($grid-breakpoint-s) {
        padding-top: $headerHeightNormal + $grid-typo-spacing-xxs !important;
      }
    }

    + .main {
      padding-top: $header-height-s;
      width: 100%;

      @include respond-to($grid-breakpoint-s) {
        padding-top: $header-height-l;
      }
    }

    + .wt-grid-main-top {
      margin-top: 0;
    }

    &.homepage {
      background: transparent;
      padding-bottom: $grid-typo-spacing-xl;
      position: absolute;
      z-index: auto;

      &:before {
        @include gradientBackgroundWithOffset(100%);
        @include rem(padding-bottom, $grid-typo-spacing-xl);

        content: '';
        height: $headerHeightNormal;
        position: absolute;
        top: 0;
        width: 100%;
        z-index: 1;
      }
    }

    @media print {
      position: static;
    }
  }

  @include respond-to($grid-breakpoint-s) {
    &.sticky {
      transform: translateY(-1 * $secondaryNavStickyOffset);
    }

    .enhanced .no-subnav &.sticky {
      transform: translateY(-1 * $secondaryNavStickyOffset - $grid-typo-spacing-xxs);
    }
  }

  @include respond-to($grid-breakpoint-s) {
    + .wt-grid-main,
    + .wrapper--full,
    + iframe + .wt-grid-main,
    + iframe + .wrapper--full {
      padding-top: $grid-typo-spacing-xl;
    }

    .no-subnav & + iframe + .wt-grid-main,
    .no-subnav & + iframe + .wrapper--full,
    .no-subnav & + iframe + .wt-grid-main,
    .no-subnav & + iframe + .wrapper--full {
      padding-top: $grid-typo-spacing-xl - $secondaryNavStickyOffset * 2;
    }

    + .wt-grid-main-top {
      padding-top: 0;
    }
  }
}

.site-header {
  border-bottom: $grid-typo-spacing-xxs solid $navBackgroundColour;
  outline: none;
  overflow: hidden;
  position: relative;

  &.menu-open {
    border: 0;
    height: auto;
    overflow: visible;
  }

  .enhanced .homepage & {
    background: transparent;
    border-bottom: 0;
    overflow: visible;
    z-index: 3;
  }

  @include respond-to($grid-breakpoint-s) {
    border-bottom: 0;
  }

  @media print {
    border-bottom: 0;
    margin: 0 0 0 $grid-content-padding;
    padding-top: 0;
  }
}

.site-header__contents {
  display: flex;
}

// need to subtract 1 from the breakpoint, as we want it to fall back to the grid styling rather than reapply it here
@media all and (max-width: $grid-breakpoint-ml - 1) {
  .site-header {
    width: 100%;
  }

  .header-wrapper > .nav-large .secondary-nav {
    width: 100%;
  }
}

.nav-links {
  text-align: center;
  // anchor links to search and menu for non javascript version
  @include respond-to($grid-breakpoint-s) {
    float: right;
  }

  .enhanced & {
    display: none;
  }
}
  • URL: /components/raw/header/_site-header.scss
  • Filesystem Path: ../../modules/custom/corp_markup/theme/sitewide/header.tpl.php/_site-header.scss
  • Size: 3.4 KB

Description

The sitewide header.

Content notes

UX notes

Design notes

Back-end notes

Front-end notes

{
  "logo": "\n<div class=\"site-header__logo__wrapper\">\n  <img class=\"site-header__logo__wellcome png-to-svg\" src=\"{{ path /assets/images/new-logos/wellcome-logo.png }}\" alt=\"Wellcome\">\n  <img class=\"site-header__logo__w\" src=\"{{ path /assets/images/new-logos/wellcome-logo-w.svg }}\" alt=\"Wellcome\">\n  <img class=\"site-header__logo__mobile\" src=\"{{ path /assets/images/new-logos/wellcome-logo-mobile.svg }}\" alt=\"Wellcome\">\n</div>\n",
  "search": null,
  "is_homepage": null
}