ETR Component Library

Global Header: Default 

<header class="site-header sticky top-0 z-50 bg-white shadow">
    <div class="container mx-auto mx-auto py-4 flex justify-between items-center">
        <div class="site-header__logo">
            <h1 class="text-xl">ETR Component Library</h1>
        </div>
        <div class="site-header__nav hidden lg:block">
            <ul class="flex">
                <li class=""><a class="px-4 py-2 text-sm hover:text-primary transition" href="">Who We Are</a></li>
                <li class="ml-2"><a class="px-4 py-2 text-sm hover:text-primary transition" href="">What We Do</a></li>
                <li class="ml-2"><a class="px-4 py-2 text-sm hover:text-primary transition" href="">Resources</a></li>
                <li class="ml-2"><a class="px-4 py-2 text-sm hover:text-primary transition" href="">Get in Touch</a></li>
            </ul>
        </div>
        <div class="site-header__utility hidden lg:block">
            <ul class="flex">
                <li class=""><a class="px-4 py-2 uppercase text-xs tracking-wider hover:text-primary transition" href="">Sign In</a></li>
                <li class="ml-2"><a class="px-4 py-2 uppercase text-xs tracking-wider hover:text-primary transition" href="">Search</a></li>
            </ul>
        </div>
        <ul class="block lg:hidden">
            <li class=""><a class="px-4 py-2 uppercase text-xs tracking-wider hover:text-primary transition" href="">Menu</a></li>
        </ul>
    </div>
</header>
 
<header class="site-header sticky top-0 z-50 bg-white shadow">
{{#with breakingNewsBar}}
	{{> @breaking-news-bar}}
{{/with}}
		<div class="container mx-auto mx-auto py-4 flex justify-between items-center">
      <div class="site-header__logo">
        <h1 class="text-xl">ETR Component Library</h1>
      </div>
			<div class="site-header__nav hidden lg:block">
				{{> @navigation}}
			</div>
			<div class="site-header__utility hidden lg:block">
				{{> @nav-utilities}}
			</div>
    <ul class="block lg:hidden">
      <li class=""><a class="px-4 py-2 uppercase text-xs tracking-wider hover:text-primary transition" href="">Menu</a></li>
    </ul>
		</div>
</header>
 
/* No context defined for this component. */
  • Content: 
    p {
  font-size: 14px;
  font-family: 'IBM Plex Sans', sans-serif;
  font-weight: 500;
}

.mobile {
  width: 320px;
  height: 568px;
  background-color: blue;
  position: relative;
  overflow: scroll;
}

.nav-wrapper {
  width: 100%;
  height: 60px;
  background-color: white;
  border-bottom: 1px;
  border-style: none none solid none;
  border-color: #EAEAEA;
  display: flex;
  justify-content: space-between;
  position: absolute;
  z-index: 2;

}


.nav-expand {
  width: 100%;
  height: 60px;
  background-color: white;
  transform: scaleY(0);
  transform-origin: top;
  z-index: 0;


}

@keyframes expand-down {
  0%{transform: scaleY(0);}
  100%{transform: scaleY(9.467);}
}

/* Nav Line Item Begin */

.nav-items-wrapper {
  width: 100%;
  height: 100%;
  margin-top: 60px;
  position: absolute;
  z-index: 1;

}

.nav-item {
  width: 100%;
  height: 60px;
  /* background: pink; */
  border-bottom: 1px;
  border-style: none none solid none;
  border-color: #EAEAEA;
  display: flex;
  justify-content: center;
  align-items: center;
  opacity: 0;


}

@keyframes fade-in {
  0%{opacity:0;}
  100%{opacity:1;}
}

.nav-item-title-wrapper1 {
  width: 75%;
  height: 100%;
  /* background-color: cadetblue; */
  padding-left: 32px;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  opacity: 0;
  transform: translateX(-15px);



}

@keyframes translate-fade-in {
  0%{opacity: 0; transform: translateX(-15px)}
  100%{opacity: 1; transform: translateX(0px)}
}


.nav-item-title-wrapper2 {
  width: 75%;
  height: 100%;
  /* background-color: cadetblue; */
  padding-left: 32px;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  opacity: 0;
  transform: translateX(-15px);



}

.nav-item-title-wrapper3 {
  width: 75%;
  height: 100%;
  /* background-color: cadetblue; */
  padding-left: 32px;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  opacity: 0;
  transform: translateX(-15px);



}

.nav-item-title-wrapper4 {
  width: 75%;
  height: 100%;
  /* background-color: cadetblue; */
  padding-left: 32px;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  opacity: 0;
  transform: translateX(-15px);



}


.nav-item-title {
  font-size: 18px;
  line-height: 0;
}



.dropdown-icon-wrapper {
  width: 25%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  opacity: 0;
  transform: translateX(-25px);



}

.dropdown-icon-wrapper3 {
  width: 25%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  opacity: 0;
  transform: translateX(-25px);



}

.dropdown-icon {
  width: 20px;
  height: 20px;
}


/* Nav Line Item End */


/* Contact Info Begin */


.contact-wrapper {
  width: 100%;
  height: 364px;
  display: flex;
  align-items: center;
  flex-direction: column;
  opacity: 0;

}

@keyframes fade-in {
  0%{opacity:0;}
  100%{opacity:1;}
}


.hamburger-wrapper {
  width: 60px;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}

.hamburger-wrapper.hamburger-wrapper--open .line-top {
  animation-name: move-down-rotate;
  animation-duration: .5s;
  transition-timing-function: ease-in;
  animation-fill-mode: forwards;
  transform: translateY(0) rotate(0deg);
}

.hamburger-wrapper.hamburger-wrapper--open .line-middle {
  animation-name: fade;
  animation-duration: .1s;
  animation-fill-mode: forwards;
}

.hamburger-wrapper.hamburger-wrapper--open .line-bottom {
  animation-name: move-up-rotate;
  animation-duration: .5s;
  transition-timing-function: ease-in;
  animation-fill-mode: forwards;
  transform: translateY(0);
  transform: rotate(0deg);
  transform-origin: center center;
}

.nav-expand.nav-expand--open {
  animation: expand-down .23s ease-out forwards;
}

.nav-item.nav-item--open {
  animation: fade-in .20s ease-in .20s forwards;
}

.nav-item-title-wrapper1.title1--open {
  animation: translate-fade-in .25s ease-in .15s forwards;
}

.nav-item-title-wrapper2.title2--open{
  animation: translate-fade-in .25s ease-in .25s forwards;
}

.nav-item-title-wrapper3.title3--open{
  animation: translate-fade-in .25s ease-in .35s forwards;
}

.nav-item-title-wrapper4.title4--open {
  animation: translate-fade-in .25s ease-in .45s forwards;
}

.dropdown-icon-wrapper.dropdown-icon1-open  {
  animation: translate-fade-in .25s ease-in .15s forwards;
}

.dropdown-icon-wrapper3.dropdown-icon3-open   {
  animation: translate-fade-in .25s ease-in .35s forwards;
}

.contact-wrapper.contact--open  {
  animation: fade-in .35s ease-in .5s forwards;
}

.lines-wrapper {
  width: 20px;
  height: 15px;
}

.line-top {
  width: 20px;
  height: 1px;
  background-color: black;

}

@keyframes move-down-rotate {
  0% {transform: translateY(0) rotate(0deg);}
  35% {transform: translateY(6px) rotate(0deg);}
  100% {transform: translateY(6px) rotate(45deg);}
}


.line-middle {
  width: 20px;
  height: 1px;
  background-color: black;
  margin-top: 5px;
  opacity: 1;

}

@keyframes fade {
  0% {opacity: 1;}
  100% {opacity: 0;}
}

.line-bottom {
  width: 20px;
  height: 1px;
  background-color: black;
  margin-top: 6px;
}

@keyframes move-up-rotate {
  0% {transform: translateY(0) rotate(0deg);}
  35% {transform: translateY(-7px) rotate(0deg);}
  100% {transform: translateY(-7px) rotate(-45deg);}

}

/* Hamburger End*/
  • URL: /components/raw/global-header/global-header.scss
  • Filesystem Path: components/05-layout-components/01-global-header-components/global-header/global-header.scss
  • Size: 5.3 KB

There are no notes for this item.