Header: Slim Inverted

Ready

HTML
View
Context
Assets
Info
Notes


        
        <header class="c-header c-header--slim c-header--inverse  u-zindex-5 u-py-base">
    <div class="o-container u-flex u-items-center u-height-full">

        <div class="u-none u-block@md" data-toggle-menu onclick="this.classList && 
			document.querySelectorAll('[data-toggle-menu]').forEach( function(oNode){ oNode.classList.toggle('is-active');}) ,
			document.querySelectorAll('[data-search]').forEach( function(oNode){ oNode.classList.remove('is-active');}) ,
			document.querySelectorAll('[data-menu]').forEach( function(oNode){ oNode.classList.toggle('is-open');}) ,
			document.querySelectorAll('[data-body-lock]').forEach( function(oNode){ oNode.classList.toggle('is-locked'); }) ,
			document.querySelectorAll('[data-item-navigation]').forEach( function(oNode){ oNode.classList.toggle('is-visible-from-tablet'); }),
			document.querySelectorAll('[data-search-bar]').forEach( function(oNode){ oNode.classList.add('is-hidden');})">

            <svg class="o-icon  o-icon--md c-navbar__controller u-cursor-pointer" data-toggle-menu-open>
                <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#icon-menu"></use>
            </svg>
            <svg class="o-icon  o-icon--md c-navbar__controller is-hidden u-cursor-pointer" data-toggle-menu-close>
                <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#icon-x"></use>
            </svg>
        </div>

        <div class="u-flex u-items-center u-ml-base@md">
            <a href="/">

                <style>
                    @font-face {
                        font-family: 'NovecentoNarrow';
                        src: url("/~shared/files/webfonts/NovecentoSansNarrow.woff") format("woff2"),
                            url("/~shared/files/webfonts/NovecentoSansNarrow.woff") format("woff");
                        font-style: normal;
                        font-display: swap;
                    }
                </style>

                <div class="c-brand c-brand__text u-uppercase u-no-underline c-brand--resize-small  c-brand--alternate">
                    <span class="c-brand__edition">agrigento</span><span class="c-brand__network">notizie</span>
                </div>

            </a>

        </div>

        <div class="u-ml-auto c-navbar__search u-none u-block@md" data-search onclick="this.classList && 
			document.querySelectorAll('[data-search]').forEach( function(oNode){ oNode.classList.toggle('is-active');}) ,
			document.querySelectorAll('[data-toggle-menu]').forEach( function(oNode){ oNode.classList.remove('is-active');}) ,
			document.querySelectorAll('[data-search-bar]').forEach( function(oNode){ oNode.classList.toggle('is-hidden');}),
			document.querySelectorAll('[data-menu]').forEach( function(oNode){ oNode.classList.remove('is-open');})">

            <svg class="o-icon  o-icon--md u-cursor-pointer" data-search-open>
                <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#icon-search"></use>
            </svg>
            <svg class="o-icon  o-icon--md c-navbar__controller is-hidden u-cursor-pointer" data-search-close>
                <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#icon-x"></use>
            </svg>
        </div>

        <div class="u-none@md u-ml-auto" data-toggle-menu onclick="this.classList && 
			document.querySelectorAll('[data-toggle-menu]').forEach( function(oNode){ oNode.classList.toggle('is-active');}) ,
			document.querySelectorAll('[data-search]').forEach( function(oNode){ oNode.classList.remove('is-active');}) ,
			document.querySelectorAll('[data-menu]').forEach( function(oNode){ oNode.classList.toggle('is-open');}) ,
			document.querySelectorAll('[data-body-lock]').forEach( function(oNode){ oNode.classList.toggle('is-locked'); }) ,
			document.querySelectorAll('[data-item-navigation]').forEach( function(oNode){ oNode.classList.toggle('is-visible-from-tablet'); }),
			document.querySelectorAll('[data-search-bar]').forEach( function(oNode){ oNode.classList.add('is-hidden');})">

            <svg class="o-icon  o-icon--md c-navbar__controller u-cursor-pointer" data-toggle-menu-open>
                <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#icon-menu"></use>
            </svg>
            <svg class="o-icon  o-icon--md c-navbar__controller is-hidden u-cursor-pointer" data-toggle-menu-close>
                <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#icon-x"></use>
            </svg>
        </div>

    </div>
    <div class="c-searchbar u-shadow-bottom u-z-upside u-size-full u-absolute u-px-base u-py-large  is-hidden " data-search-bar>
        <div class="o-container u-px-small@md">

            <div class="u-relative">
                <input class="u-size-full   " type="text" placeholder="Cerca nel sito">
                <button class="c-form-action c-btn c-btn--reset u-absolute u-cursor-pointer" type="submit">

                    <svg class="c-form-icon o-icon o-icon--md">
                        <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#icon-search"></use>
                    </svg>

                </button>
            </div>

        </div>
    </div>
</header>


        <header class="c-header c-header--slim {% if (header_inverse) %}c-header--inverse {% endif %} u-zindex-5 u-py-base">
	<div class="o-container u-flex u-items-center u-height-full">	
		
		<div class="u-none u-block@md" data-toggle-menu onclick="this.classList && 
			document.querySelectorAll('[data-toggle-menu]').forEach( function(oNode){ oNode.classList.toggle('is-active');}) ,
			document.querySelectorAll('[data-search]').forEach( function(oNode){ oNode.classList.remove('is-active');}) ,
			document.querySelectorAll('[data-menu]').forEach( function(oNode){ oNode.classList.toggle('is-open');}) ,
			document.querySelectorAll('[data-body-lock]').forEach( function(oNode){ oNode.classList.toggle('is-locked'); }) ,
			document.querySelectorAll('[data-item-navigation]').forEach( function(oNode){ oNode.classList.toggle('is-visible-from-tablet'); }),
			document.querySelectorAll('[data-search-bar]').forEach( function(oNode){ oNode.classList.add('is-hidden');})">

			<svg class="o-icon {% if not (header_inverse) %}o-icon--inverse{% endif %} o-icon--md c-navbar__controller u-cursor-pointer" data-toggle-menu-open >
				<use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#icon-menu"></use>
			</svg>
			<svg class="o-icon {% if not (header_inverse) %}o-icon--inverse{% endif %} o-icon--md c-navbar__controller is-hidden u-cursor-pointer" data-toggle-menu-close >
				<use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#icon-x"></use>
			</svg>
		</div>
		
		<div class="u-flex u-items-center u-ml-base@md">
			<a href="/">
				{% if not (header_inverse) %}
					{# {% render "@brand", {modifier: 'resize-small', inverse: true}, true %} #}
					{% render "@brand", {modifier:'resize-small', local: true, logo: false}, false %}
				{% else %}
					{% render "@brand", {modifier: 'resize-small', alternate: true, local: true, logo: false}, false %}
				{% endif %}
			</a>

			{% if channel %}
				<a class="c-header__channel u-ml-xsmall" href="#">
					{{ channel }}
				</a>
			{% endif %}
		</div>	

		<div class="u-ml-auto c-navbar__search u-none u-block@md" data-search onclick="this.classList && 
			document.querySelectorAll('[data-search]').forEach( function(oNode){ oNode.classList.toggle('is-active');}) ,
			document.querySelectorAll('[data-toggle-menu]').forEach( function(oNode){ oNode.classList.remove('is-active');}) ,
			document.querySelectorAll('[data-search-bar]').forEach( function(oNode){ oNode.classList.toggle('is-hidden');}),
			document.querySelectorAll('[data-menu]').forEach( function(oNode){ oNode.classList.remove('is-open');})">

			<svg class="o-icon  o-icon--md u-cursor-pointer" data-search-open >
				<use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#icon-search"></use>
			</svg>
			<svg class="o-icon  o-icon--md c-navbar__controller is-hidden u-cursor-pointer" data-search-close >
				<use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#icon-x"></use>
			</svg>
		</div>
		
		<div class="u-none@md u-ml-auto" data-toggle-menu onclick="this.classList && 
			document.querySelectorAll('[data-toggle-menu]').forEach( function(oNode){ oNode.classList.toggle('is-active');}) ,
			document.querySelectorAll('[data-search]').forEach( function(oNode){ oNode.classList.remove('is-active');}) ,
			document.querySelectorAll('[data-menu]').forEach( function(oNode){ oNode.classList.toggle('is-open');}) ,
			document.querySelectorAll('[data-body-lock]').forEach( function(oNode){ oNode.classList.toggle('is-locked'); }) ,
			document.querySelectorAll('[data-item-navigation]').forEach( function(oNode){ oNode.classList.toggle('is-visible-from-tablet'); }),
			document.querySelectorAll('[data-search-bar]').forEach( function(oNode){ oNode.classList.add('is-hidden');})">

			<svg class="o-icon {% if not (header_inverse) %}o-icon--inverse{% endif %} o-icon--md c-navbar__controller u-cursor-pointer" data-toggle-menu-open >
				<use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#icon-menu"></use>
			</svg>
			<svg class="o-icon {% if not (header_inverse) %}o-icon--inverse{% endif %} o-icon--md c-navbar__controller is-hidden u-cursor-pointer" data-toggle-menu-close >
				<use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#icon-x"></use>
			</svg>
		</div>

		{# <div class="u-none  u-flex@md u-items-center u-justify-center u-label-05 u-pl-medium u-cursor-pointer u-py-xsmall">
			{% if logged %}
				<div tabindex="1" class="c-dropdown c-dropdown--reset c-dropdown--user u-cursor-pointer u-relative u-flex u-items-center u-justify-center u-label-05">
					<img style=" width:2rem; height:2rem;" loading="lazy" decoding="async" referrerpolicy="no-referrer" class="avatar avatar-md u-radius-circle" src="//citynews.stgy.ovh/~shared/avatars/49015311842645/avatar_1.img" alt="Foto Profilo Utente" title="remat">
					
					<div class="c-dropdown__panel u-absolute u-right u-overflow-hidden u-p-medium o-bg-light u-shadow u-z-upside">
						<ul class="u-list-none u-m-none u-p-none">
							<li class="u-mb-small"><a class="u-nav-03 o-link-text" tabindex="-1" href="<?php echo esc_entities( $sf_user->getDirectLink() ); ?>">Il mio profilo</a></li>
							<li class="u-mb-small"><a class="u-nav-03 o-link-text" tabindex="-1" href="/user/contents/">I miei contenuti</a></li>
							<li class="u-mb-small"><a class="u-nav-03 o-link-text" tabindex="-1" href="/user/edit/basic/">Modifica profilo</a></li>
							<li class="u-mb-small"><a class="u-nav-03 o-link-text" tabindex="-1" href="/user/edit/privacy/">Privacy</a></li>
							<li class="u-mb-small">
								<form onsubmit="window.ga && ga( 'send', 'event', 'Community', 'Logout' ); return confirm( 'Sei sicuro di voler uscire dal sito?' );" action="/user/logout/" method="post">
									<button type="submit" class="c-btn c-btn--primary  u-label-04  u-cursor-pointer u-flex u-items-center u-label-04" value="Esci">
									Esci
									</button> 
								</form>
								
							</li>
						</ul>
					</div>
				</div>
			{% else %}
				Accedi 
			{% endif %}
		</div> #}

	</div>
	{% render "@searchbar", {open:false},true %}	
</header>


        
            
            {
  "channel": false,
  "navigation": [
    {
      "nav": null,
      "name": "Notizie",
      "channel": "/notizie/",
      "active": true,
      "list": [
        {
          "item": null,
          "name": "Politica"
        },
        {
          "item": null,
          "name": "Economia"
        },
        {
          "item": null,
          "name": "Europa"
        },
        {
          "item": null,
          "name": "Cronaca"
        },
        {
          "item": null,
          "name": "Mondo"
        },
        {
          "item": null,
          "name": "Ambiente"
        },
        {
          "item": null,
          "name": "Green"
        },
        {
          "item": null,
          "name": "Attualità"
        },
        {
          "item": null,
          "name": "Città"
        }
      ]
    },
    {
      "nav": null,
      "name": "Lifestyle",
      "channel": "/lifestyle/",
      "active": false,
      "list": [
        {
          "item": null,
          "name": "Benessere"
        },
        {
          "item": null,
          "name": "Casa"
        },
        {
          "item": null,
          "name": "Cucina"
        },
        {
          "item": null,
          "name": "Donna"
        },
        {
          "item": null,
          "name": "Gossip"
        },
        {
          "item": null,
          "name": "Salute"
        },
        {
          "item": null,
          "name": "Viaggi"
        },
        {
          "item": null,
          "name": "Spettacoli"
        },
        {
          "item": null,
          "name": "Motori"
        }
      ]
    },
    {
      "nav": null,
      "name": "Cultura",
      "channel": "/cultura/",
      "active": false,
      "list": [
        {
          "item": null,
          "name": "Cinena"
        },
        {
          "item": null,
          "name": "Eventi"
        },
        {
          "item": null,
          "name": "Formazione"
        },
        {
          "item": null,
          "name": "Scienze"
        }
      ]
    },
    {
      "nav": null,
      "name": "Opinioni",
      "channel": "/opinioni/",
      "active": false,
      "list": [
        {
          "item": null,
          "name": "Asso di denari"
        },
        {
          "item": null,
          "name": "Cronache marziane"
        },
        {
          "item": null,
          "name": "Curarsi mangiando"
        },
        {
          "item": null,
          "name": "Famiglia creativa"
        },
        {
          "item": null,
          "name": "FotoGrammi"
        }
      ]
    },
    {
      "nav": null,
      "name": "Altre sezioni",
      "active": false,
      "list": [
        {
          "item": null,
          "name": "Foto"
        },
        {
          "item": null,
          "name": "Video"
        },
        {
          "item": null,
          "name": "Best - Guida allo shopping"
        }
      ]
    }
  ],
  "header_inverse": true
}

File:

Content:


                                // Name:            Header
// Description:     Header of website
//
// Component:       `c-header`
//
// Variants:        `c-header--inverse`
// Variants:        `c-header--wide`
//
// Dependencies:    `settings/v7/colors.tokens`
//                  `settings/v7/colors.mode`
//                  `settings/v7/spacing.tokens`
//                  `settings/v7/typography.map`
//                  `tools/v7/typography`
//
// ========================================================================

// Variables
// ========================================================================

$header-navbar-line: $global-active-line;

// ========================================================================

.c-header {

  // Custom properties
  // ========================================================================

  --header-background: var(--theme-color);
  --nav-border: #{$ui-01};
  
  // ========================================================================
	
  background-color: var(--header-background);
  
  @include bp(md) {
    --nav-border: var(--theme-color);
    --header-background: var(--background-color-gray);
    @if $layout == amp {
      [data-theme="today"] & {
        --header-background: var(--theme-color);
      }
    }
  }

  @if $layout == wide  {
    position: fixed;
    z-index: var(--header-z-index);
  }

  // 
  // Inverse variant
  //

  &--inverse{
    --header-background: var(--background-color);
  }

  // 
  // Wide variant
  //

  &--wide-transparent {
    --header-z-index:99;
    z-index: var(--header-z-index);
    background-color: #{rgba($ui-06,.1)};
    body[data-model="sponsor"] & {
      --header-z-index: 999;
    }
  }

  // 
  // Header focus area
  //

  // Check if $amp IS NOT true
  @if $layout != amp  {
    &__focus {
      display: none;
      @include bp(lg) {
        display: block;
        margin-top: $margin-xsmall;
        margin-bottom: $margin-xsmall;
        padding: $padding-xsmall $padding-small;
        overflow: hidden;
      }
  
      // Set background and link colors depending on [data-theme]
  
      body[data-theme="today"] & {
        background-color: var(--theme-color-darker);
  
        .o-link-text {
          color: $link-01;
        }
      }
  
      // Set background and link colors depending on [data-theme]
  
      body:not([data-theme="today"]) & {
        background-color: var(--background-color);
  
        .o-link-text {
          color: var(--link-color-dark);
        }
      }
    }
  } 

  
  //
  // Header channel
  //

  &__channel {
    --channel-link: var($ui-04);
    color: var(--channel-link);
    text-decoration: none;
    @include type(title-07);
    @include bp(md){
      @include type(title-03);
    }

    // Hide channel title when header varianti is 'inverse'
    
    .c-header--inverse & {
      display: none;
    }
  }

  //
  // Header top section
  //

  &__top {
    position: relative;

    @include bp(md) {
      min-width: 60%;
    }

    // box-shadow: inset 0 -1px rgba($ui-01, .15);
    
    &::after {
      content: '';
      position: absolute;
      bottom: 0;
      margin: 0 calc(var(--outer-gutter) * -1);
      width: calc(100% + var(--outer-gutter) * 2);
      display: block;
      height: 1px;
      background-color: $ui-01-10;
      @include bp(md) {
        display: none
      }
    }

  }

}

// Navbar
// ========================================================================

.c-navbar {

  &__subscription {
    right: 2rem;
    top: .9rem;
    @include bp(sm) {
      top: 1.2rem;
    }
  }

  &__toggle {
    margin-left: auto;
    top: $padding-base;
    right: $padding-small;
    position: fixed;
    @include z(higher);
    @include bp(sm) {
      top: 1.25rem;
    }
    @include bp(md) {
      position: relative;
      top: auto;
      right: auto;
      margin-left: $margin-medium;
    }

  }

  &__toggle-shadow {
    border-radius: $global-radius;
    top: $padding-xsmall;
    right: $padding-xsmall;
    background-color: rgba(21,16,16,.55);
    @include z(upside);
    height: $margin-large;
    width: $margin-large;
  }

  &__search {
    .c-header:not(.c-header--slim) &{
      @include bp(md) {
        margin-left: $margin-small;
      }
    }
  }

  &__item {
    --item-link-color: #{$ui-01};
    color: var(--item-link-color);
    @include bp(md) {
      --item-link-color: #{$ui-02};
    }
    white-space: nowrap;
    text-decoration: $link-decoration;
    position: relative;
    padding: $padding-small 0;
    transition: box-shadow .3s ease-in;
    @include type(nav-04);
    @include bp(md) {
      @include type(nav-06);
    }

    & + & {
      margin-left: $margin-base;
    }

    &:hover,
    &.is-active {
      box-shadow: inset 0 -#{$header-navbar-line} var(--nav-border);
     
    }

    body[data-channel*="foto"] &,
    body[data-model*="video"] &,
    body[data-channel*="video"] &,
    [data-color-scheme*="dark"] &{
      --item-link-color: #{$ui-01};
    }
  }

  &__search,
  &__controller {
    
    color: $icon-inverse;
    
    .c-header--inverse & {
      color: $icon-color;
    }
    @include bp(md) {
      color: $icon-color;
      @if $layout == amp {
        [data-theme="today"] & {
          color: $ui-01;
        }
      }
    }
  }
}

[data-toggle-menu] {
  &.is-active {
    [data-toggle-menu-open] {
      display: none;
    }

    [data-toggle-menu-close] {
      display: block;
    }
  }
  
  [data-toggle-menu-open] {
    display: block;
  }

  [data-toggle-menu-close] {
    display: none;
  }
}

[data-search] {
  &.is-active {
    [data-search-open] {
      display: none;
    }

    [data-search-close] {
      display: block;
    }
  }

  [data-search-open] {
    display: block;
  }

  [data-search-close] {
    display: none;
  }
}

URL: /components/raw/header/header.scss
Filesystem Path: src/lib/components/header/header.scss
Size: 5.8 KB

Handle: @header--slim-inverted
Variants (5): Default , Slim , Slim Inverted , Wide , Local
Preview:
- With layout
- Component only
Filesystem Path: src/lib/components/header/header--slim.njk
References (2): @brand, @searchbar

The Header component as main element is present on all the pages of the project, this contains information on the existing header, on any focus in evidence, and on all pages navigable through the navigation bar.

The structure of the component, in detail, provides

the logo of the magazine
two possible highlights
a navigation bar
a menu
a button (hamburger icon) for opening and closing the menu
a button to activate the search (lens icon).

The component is completely responsive, based on the spatial resolution adopted on the device it presents or omits information, e.g. in the mobile version the two focuses are automatically hidden.

Templates

It comes along with 2 different templates:

hedaer.njk default layout;
header--slim.njk generally this version will be used in the internal pages of the websites of the publications.

Render color variation

The background color of the component varies according to the newspaper (blue for Today.it, yellow for the RomaToday.it header, etc …) through a global class set on body HTML node:

<body class="t-today" style="margin: 0; padding: 0">