Navigation - Overlay

VIEWPORTS Full Width 1366px 1024px 768px 480px 320px
BMI - Products BMI - Insights BMI - Company
Products

Explore knowledge that cuts through the noise, with award-winning data, research, and tools.

Know what you need but can't find it?

Insights

Our latest articles and views on
industries, regions, and topics.

About Fitch Solutions

Get to know the business behind the products. Meet some of our key people and explore our credentials.

Code

HTML CSS SCSS JS 
<div id="navigation__products" class="navigation__overlay overlay-content-wrapper active" style="display: block;">
  <div class="wrapper--1">
    <span class="overlay__close">
      <i class="fas fa-times"></i>
    </span>
    <div class="grid__wrapper grid--column-11 grid--row-1">
      <div class="grid grid--span-3 grid--as-top ta--left">
        <div class="grid__content">
          <div class="heading--1">Products</div>
          <p> Explore knowledge that cuts through <br>the noise, with award-winning data, <br>research, and tools. </p>
        </div>
      </div>
      <div class="grid grid--span-8 grid--as-top ta--left">
        <div class="grid__content">
          <div class="column__five">
            <div class="column" style="padding: 0 1.2rem;">
              <ul class="menu menu-level--1">
                <li class="navigation__group-sub--full">
                  <a href="/products/country-risk-and-industry-research">Country Risk <br>&amp; Industry Research </a>
                  <div class="navigation--border"></div>
                </li>
                <li class="navigation__group-sub--full">
                  <a href="/products/country-risk">Country Risk</a>
                </li>
                <li class="navigation__group-sub--full">
                  <a href="/products/industry-research">Industry Research</a>
                </li>
                <li class="navigation__group-sub--full">
                  <a href="/products/operational-risk">Operational Risk</a>
                </li>
                <li class="navigation__group-sub--full">
                  <a href="/products/custom-research">Advisory</a>
                </li>
              </ul>
            </div>
            <div class="column" style="padding: 0 1.2rem;">
              <ul class="menu menu-level--1">
                <li class="navigation__group-sub--full">
                  <a href="/products/ratings-data-and-research">Fitch Ratings <br>Data &amp; Research </a>
                  <div class="navigation--border"></div>
                </li>
                <li class="navigation__group-sub--full">
                  <a href="/products/credit-ratings">Fitch Credit Ratings Data</a>
                </li>
                <li class="navigation__group-sub--full">
                  <a href="/products/credit-research">Fitch Ratings Credit Research</a>
                </li>
                <li class="navigation__group-sub--full">
                  <a href="/products/fitch-ratings-esg-relevance-scores-data">Fitch Ratings ESG Relevance Scores Data</a>
                </li>
              </ul>
            </div>
            <div class="column" style="padding: 0 1.2rem;">
              <ul class="menu menu-level--1">
                <li class="navigation__group-sub--full">
                  <a href="/products/fundamental-data-analytics">Fundamental Data <br>&amp; Analytics </a>
                  <div class="navigation--border"></div>
                </li>
                <li class="navigation__group-sub--full">
                  <a href="/products/bank-scorecard">Bank Scorecard</a>
                </li>
                <li class="navigation__group-sub--full">
                  <a href="/products/basel-iii-scra-data">Basel III - SCRA Data</a>
                </li>
                <li class="navigation__group-sub--full">
                  <a href="/products/cds-implied-credit-scores">CDS Implied Credit Scores</a>
                </li>
                <li class="navigation__group-sub--full">
                  <a href="/products/financial-implied-credit-scores">Financial Implied Credit Scores</a>
                </li>
                <li class="navigation__group-sub--full">
                  <a href="/products/fitch-connect-news">Fitch Connect News</a>
                </li>
                <li class="navigation__group-sub--full">
                  <a href="/products/fundamental-data">Fundamental Data</a>
                </li>
              </ul>
            </div>
            <div class="column" style="padding: 0 1.2rem;">
              <ul class="menu menu-level--1">
                <li class="navigation__group-sub--full">
                  <a href="/products/leveraged-finance-intelligence">Leveraged Finance <br>Intelligence </a>
                  <div class="navigation--border"></div>
                </li>
                <li class="navigation__group-sub--full">
                  <a href="/products/covenant-review">Covenant Review</a>
                </li>
                <li class="navigation__group-sub--full">
                  <a href="/products/levfin-insights">LevFin Insights</a>
                </li>
                <li class="navigation__group-sub--full">
                  <a href="/products/pacermonitor">PacerMonitor</a>
                </li>
              </ul>
            </div>
            <div class="column" style="padding: 0 1.2rem;">
              <ul class="menu menu-level--1">
                <li class="navigation__group-sub--full">
                  <a href="https://know.creditsights.com/" target="creditsights">CreditSights</a>
                  <br>&nbsp; <div class="navigation--border"></div>
                </li>
                <li class="navigation__group-sub--full">
                  <a href="https://know.creditsights.com/research/" target="creditsights">Research</a>
                </li>
                <li class="navigation__group-sub--full">
                  <a href="https://know.creditsights.com/risk/" target="creditsights">Risk Products</a>
                </li>
              </ul>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

 

.js-nav-toggle {
  display: none;
}

.menu-level--0 {
  margin-bottom: 0;
  vertical-align: sub;
  display: inline-block;
}

.menu-level--1 {
  position: relative;
  width: 100%;
  min-height: 29.5rem;
  margin-top: 1.8rem;
}

.menu-level--1 a {
  color: var(--inverted-text-color);
}

.menu-level--2 {
  position: absolute;
  top: 0;
  left: 144px;
  width: calc(100% - 144px);
  display: none;
}

.menu-level--2 > li {
  margin-bottom: 16px;
  padding: 0 24px;
}

ul.menu-level--2 {
  column-count: 3;
}

ul.menu-level--2 > li {
  margin-bottom: 16px;
  padding: 0 24px;
}

.navigation__teaser {
  min-height: 11rem;
  margin-bottom: 1.2rem;
  padding-left: 4.8rem;
}

.navigation__teaser.column__two .column--1 {
  position: relative;
  width: 25.4%;
  padding: 0;
  border-radius: 5px 0 0 5px;
  overflow: hidden;
}

.navigation__teaser.column__two .column--1 .image-wrapper {
  height: 100%;
}

.navigation__teaser.column__two .column--1 .image-wrapper img {
  height: 100%;
  margin-bottom: 0;
  -o-object-fit: cover;
  object-fit: cover;
}

.navigation__teaser.column__two .column--2 {
  position: relative;
  width: 55.97%;
  padding: 1.2rem;
  background: #f5f5f5;
  border-radius: 0 5px 5px 0;
  overflow: hidden;
}

.navigation__teaser--title a {
  color: var(--text-color) !important;
}

.navigation__teaser--title a:hover {
  text-decoration: none !important;
}

.navigation__group {
  position: relative;
  padding: 0 var(--spacing-1);
  font-size: 14px;
  font-weight: 900;
  text-transform: uppercase;
  float: left;
}

.navigation__group > a,
.navigation__group > span {
  color: var(--color);
  cursor: pointer;
  transition: all 360ms ease;
}

.navigation__group > a:hover, .navigation__group > a:focus,
.navigation__group > span:hover,
.navigation__group > span:focus {
  color: #ababab;
}

.navigation__group > a.active,
.navigation__group > span.active {
  padding-bottom: 4px;
  border-bottom: 3px solid;
}

.navigation__group-sub {
  width: 144px;
  margin-bottom: 1.8rem;
}

.navigation__group-sub--full {
  width: 100%;
  margin-bottom: 1.8rem;
}

.navigation__group-sub > span {
  padding-bottom: 4px;
  border-bottom: 3px solid transparent;
  font-weight: 400;
  line-height: 1.2;
  text-transform: uppercase;
  display: inline-block;
  cursor: pointer;
}

.navigation__group-sub > span.active {
  padding-bottom: 4px;
  border-bottom: 3px solid;
}

.navigation__group-sub > a {
  text-transform: uppercase;
}

.navigation__group-sub > a.active {
  text-decoration: underline;
}

.navigation__group-sub .map__list .map__list-item {
  font-size: 1.6rem;
  font-weight: 400;
  margin-bottom: 16px;
  padding: 0 24px;
}

.navigation__group-sub .map__list .map__list-item:hover:before, .navigation__group-sub .map__list .map__list-item.list-dash:before, .navigation__group-sub .map__list .map__list-item.active:before {
  display: none;
}

.navigation__group-sub .list-dash a {
  text-decoration: underline;
}

.navigation__overlay {
  position: absolute;
  top: 16rem;
  left: 50%;
  width: 100vw;
  max-width: 136.8rem;
  color: var(--inverted-text-color);
  transform: translate(-50%, 0);
  transition: width 350ms ease, margin-left 350ms ease;
}

.navigation__overlay .overlay__close {
  position: absolute;
  top: -1.8rem;
  right: 3.4rem;
  color: #fff;
  cursor: pointer;
  background: none;
  height: 0;
  width: 0;
}

.navigation__overlay .overlay__close i {
  font-size: 2.4rem;
}

.toolbar-horizontal .navigation__overlay {
  padding-top: 130px;
}

#navigation__products .menu-level--1 li:first-of-type, #navigation__reportsstore .menu-level--1 li:first-of-type {
  text-transform: uppercase;
}

#navigation__products .menu-level--1 li:first-of-type .navigation--border, #navigation__reportsstore .menu-level--1 li:first-of-type .navigation--border {
  border-bottom: 2px solid;
  padding: 0 0 1.8rem 0;
  width: 6rem;
}

.overlay__navigation {
  position: static;
}

.overlay__navigation.overlay__close {
  width: initial;
  height: initial;
  background: none;
  font-size: var(--font-size-2);
  border-radius: 0;
  cursor: pointer;
  color: inherit;
}

.header--inverted .navigation__group {
  color: var(--inverted-text-color);
}

.header--inverted .navigation__group > a,
.header--inverted .navigation__group > span {
  color: inherit;
}

.header--inverted .navigation__group > a:hover,
.header--inverted .navigation__group > span:hover {
  color: #ababab;
}

/* iPad Pro Portrait - iPad Landscape */
@media only screen and (max-width: 1024px) {
  .js-nav-toggle {
    position: absolute;
    width: var(--spacing-2);
    height: var(--spacing-2);
    cursor: pointer;
    z-index: 20;
    display: block;
  }
  .nav-line {
    position: absolute;
    top: 50%;
    left: 50%;
    width: var(--spacing-2);
    height: 0.4rem;
    transform: translate(-50%, -50%);
    background: var(--text-color);
    border-radius: 10rem;
    transition: all 350ms ease;
    display: block;
  }
  .header--inverted .nav-line,
  .nav--active .nav-line {
    transition: background-color 360ms ease;
    background: var(--inverted-text-color);
  }
  .nav-line--1 {
    margin-top: -0.8rem;
  }
  .nav-line--3 {
    margin-top: 0.8rem;
  }
  .nav--active .nav-line {
    margin: 0 0 0 -1.5rem;
    background: var(--inverted-text-color);
  }
  .nav--active .nav-line--1 {
    transform: rotate(45deg);
  }
  .nav--active .nav-line--2 {
    display: none;
  }
  .nav--active .nav-line--3 {
    transform: rotate(-45deg);
  }
  #block-fitch-solutions-main-menu {
    position: absolute;
    top: 11.6rem;
    left: 0;
    width: 100vw;
    display: none;
    z-index: 10;
  }
  #block-fitch-solutions-main-menu .navigation__group {
    color: var(--inverted-text-color);
  }
  #block-fitch-solutions-main-menu.active {
    display: block;
  }
  .menu-level--0 {
    width: 100%;
    text-align: center;
  }
  .menu-level--1 {
    margin-bottom: 0;
  }
  .navigation__group {
    float: none;
    display: inline-block;
  }
  .navigation__group > a,
  .navigation__group > span {
    transition: color 360ms ease;
    color: var(--inverted-text-color);
    display: block;
  }
  .navigation__group > a:hover, .navigation__group > a:focus, .navigation__group > a.active,
  .navigation__group > span:hover,
  .navigation__group > span:focus,
  .navigation__group > span.active {
    color: var(--inverted-text-color);
  }
  .navigation__group-sub > a,
  .navigation__group-sub > span {
    transition: color 360ms ease;
    color: var(--inverted-text-color);
  }
  .navigation__overlay {
    top: 18rem;
  }
  .navigation__overlay .grid--span-3 {
    -ms-grid-column: span 3;
    grid-column: span 3;
  }
  .navigation__overlay .grid--span-2 {
    -ms-grid-column: span 3;
    grid-column: span 3;
  }
  .navigation__overlay .grid--span-8 {
    -ms-grid-column: span 12;
    grid-column: span 12;
  }
  .navigation__overlay .overlay__close {
    display: none;
  }
  .navigation__overlay .menu-level--2 .grid--column-11 {
    -ms-grid-columns: (1fr)[11];
    grid-template-columns: repeat(11, 1fr);
  }
  .navigation__overlay .menu-level--2 .grid--span-3 {
    -ms-grid-column: span 3;
    grid-column: span 3;
  }
  .navigation__overlay .menu-level--2 .grid--span-8 {
    -ms-grid-column: span 8;
    grid-column: span 8;
  }
}

/* iPad Portrait  */
@media only screen and (max-width: 768px) {
  .navigation__overlay .grid--span-3 {
    -ms-grid-column: span 12;
    grid-column: span 12;
  }
  .navigation__overlay .grid--span-2 {
    -ms-grid-column: span 6;
    grid-column: span 6;
  }
  .navigation__overlay .menu-level--1 {
    min-height: 0;
    margin-top: 0;
  }
  .navigation__overlay .menu-level--2 .grid--column-11 {
    -ms-grid-columns: (1fr)[11];
    grid-template-columns: repeat(11, 1fr);
  }
  .navigation__overlay .menu-level--2 .grid--span-3 {
    -ms-grid-column: span 4;
    grid-column: span 4;
  }
  .navigation__overlay .menu-level--2 .grid--span-8 {
    -ms-grid-column: span 7;
    grid-column: span 7;
  }
}

/* iPhone 6 onwards */
@media only screen and (max-width: 480px) {
  .menu-level--1 {
    margin-top: 0;
  }
  .navigation__group > span {
    padding-bottom: 7px;
  }
  .navigation__group-sub {
    width: 100%;
    margin-bottom: 0;
    padding: 0 0rem 2.4rem;
  }
  .navigation__overlay {
    top: 21rem;
  }
  .navigation__overlay .grid--span-3 {
    display: none;
  }
  .navigation__overlay .grid--span-2 {
    -ms-grid-column: span 12;
    grid-column: span 12;
  }
  .navigation__overlay .active--all {
    display: none;
  }
  .navigation__overlay span.active + .menu-level--2 {
    max-height: 30vh;
    margin: 1.2rem 0 2.4rem;
    border-bottom: .1rem solid #fff;
  }
  .navigation__overlay .menu-level--2 {
    position: static;
    width: 100%;
    column-count: auto;
    border-left: none;
    overflow-y: scroll;
    transition: all .35s ease;
  }
  .navigation__overlay .menu-level--2 .grid--column-11 {
    -ms-grid-columns: (1fr)[11];
    grid-template-columns: repeat(11, 1fr);
  }
  .navigation__overlay .menu-level--2 .grid--span-3 {
    display: block;
    -ms-grid-column: span 12;
    grid-column: span 12;
  }
  .navigation__overlay ul.menu-level--2 > li {
    padding: 0;
  }
  .navigation__group-sub .map__list .map__list-item {
    padding: 0;
  }
}

 

@import '../abstracts/_mixins';

.js-nav-toggle {
	display: none;
}

.menu-level {
	&--0 {
		margin-bottom: 0;
		vertical-align: sub;
		display: inline-block;
	}
	&--1 {
		position: relative;
		width: 100%;
		min-height: 29.5rem;
		margin-top: 1.8rem;

		a {
			color: var(--inverted-text-color);
		}
	}
	&--2 {
		position: absolute;
		top: 0;
		left: 144px;
		width: calc(100% - 144px);
		// border-left: 1px solid;
		display: none;

		> li {
		margin-bottom: 16px;
		padding: 0 24px;
		}
	}
}

ul.menu-level--2 {
	column-count: 3;

	> li {
		margin-bottom: 16px;
		padding: 0 24px;
	}
}

.navigation {

	&__teaser {
		min-height: 11rem;
		margin-bottom: 1.2rem;
		padding-left: 4.8rem;
	
		&.column__two {
	
			.column--1 {
				position: relative;
				width: 25.4%;
				padding: 0;
				border-radius: 5px 0 0 5px;
				overflow: hidden;

				.image-wrapper {
					height: 100%;
					
					img {
						height: 100%;
						margin-bottom: 0;
						object-fit: cover;
					}
				}
	
			}
			.column--2 {
				position: relative;
				width: 55.97%;
				padding: 1.2rem;
				background: #f5f5f5;
				border-radius: 0 5px 5px 0;
				overflow: hidden;	
			}	
		}
	
		&--title a {
			color: var(--text-color) !important;
			
			&:hover {
				text-decoration: none !important;
			}
		}
	}

	&__group {
	  position: relative;
	  padding: 0 var(--spacing-1);
	  font-size: 14px;
	  font-weight: 900;
	  text-transform: uppercase;
	  float: left;
  
	  & > a,
	  & > span {
		color: var(--color);
		cursor: pointer;
		transition: all 360ms ease;
  
		&:hover,
		&:focus {
		  color: #ababab;
		}
		&.active {
			padding-bottom: 4px;
			border-bottom: 3px solid;
		}
	  }
	}
	&__group-sub {	
		width: 144px;
		margin-bottom: 1.8rem;
		
		&--full {
			width: 100%;
			margin-bottom: 1.8rem;
		}
  
		& > span {
		  padding-bottom: 4px;
		  border-bottom: 3px solid transparent;
		  font-weight: 400;
		  line-height: 1.2;
		  text-transform: uppercase;
		  display: inline-block;
		  cursor: pointer;
  
		  &.active {
			padding-bottom: 4px;
			border-bottom: 3px solid;
		  }
		}

		& > a {
			text-transform: uppercase;

			&.active {
				text-decoration: underline;
			}
		}

		.map__list .map__list-item {
			font-size: 1.6rem;
    		font-weight: 400;
			margin-bottom: 16px;
    		padding: 0 24px;
		}
		.map__list .map__list-item:hover:before, .map__list .map__list-item.list-dash:before, .map__list .map__list-item.active:before {
			display: none;
		}

		.list-dash a {
			text-decoration: underline;
		}
			

	}

 	&__overlay {
		position: absolute;
		top: 16rem;
		left: 50%;
		width: 100vw;
		max-width: 136.8rem;
		color: var(--inverted-text-color);
		transform: translate(-50%, 0);
		transition: width 350ms ease, margin-left 350ms ease;

		.overlay__close {
			position: absolute;
			top: -1.8rem;
			right: 3.4rem;
			color: #fff;
			cursor: pointer;
			background: none;
			height: 0;
			width: 0;

			i {
				font-size: 2.4rem;
			}
		}

		// &-close {
		// position: absolute;
		// top: 13rem;
		// right: 2.4rem;
		// color: var(--inverted-text-color);
		// cursor: pointer;

		// 	i {
		// 		font-size: 2.4rem;
		// 	}
		// }
  	}
}

.toolbar-horizontal .navigation__overlay {
	padding-top: 130px;
}

#navigation__products .menu-level--1 li:first-of-type, #navigation__reportsstore .menu-level--1 li:first-of-type {
	text-transform: uppercase;
	
	.navigation--border {
		border-bottom: 2px solid;
		padding: 0 0 1.8rem 0;
		width: 6rem;
	}
}

.overlay__navigation {
	position: static;
  
	&.overlay__close {
	  width: initial;
	  height: initial;
	  background: none;
	  font-size: var(--font-size-2);
	  border-radius: 0;
	  cursor: pointer;
	  color: inherit;
	}
  }
  
  .header--inverted {
	.navigation__group {
	  color: var(--inverted-text-color);
	  > a,
	  > span {
		color: inherit;
  
		&:hover {
		  color: #ababab;
		}
	  }
	}
  }

@include mq-2 {
	.js-nav-toggle {
	    position: absolute;
	    width: var(--spacing-2);
	    height: var(--spacing-2);
	    cursor: pointer;
	    z-index: 20;
	    display: block;
	}
	
	.nav-line {
	  position: absolute;
	  top: 50%;
	  left: 50%;
	  width: var(--spacing-2);
	  height: 0.4rem;
	  transform: translate(-50%, -50%);
	  background: var(--text-color);
      border-radius: 10rem;
	  transition: all 350ms ease;
	  display: block;
	}
	.header--inverted .nav-line,
  	.nav--active .nav-line {
		transition: background-color 360ms ease;
		background: var(--inverted-text-color);
  	}
	
	.nav-line--1 {
	  margin-top: -0.8rem;
	}	
	.nav-line--3 {
	  margin-top: 0.8rem;
	}	
	.nav--active .nav-line {
	  margin: 0 0 0 -1.5rem;
	  background: var(--inverted-text-color);
	}	
	.nav--active .nav-line--1 {
		transform: rotate(45deg);
	}	
	.nav--active .nav-line--2 {
		display: none;
	}
	.nav--active .nav-line--3 {
		transform: rotate(-45deg);
	}	
	
	#block-fitch-solutions-main-menu {	
	    position: absolute;
		top: 11.6rem;
		left: 0;
		width: 100vw;
		display: none;
		z-index: 10;

		.navigation__group {
			color: var(--inverted-text-color);
		}
	  
		&.active {
			display: block;
		}
	}
	.menu-level {
		&--0 {
			width: 100%;
			text-align: center;
		}
		&--1 {
			margin-bottom: 0;
		}
	}
	.navigation__group {
		float: none;
    	display: inline-block;
			
		& > a,
		& > span {	
			// padding: 1.2rem 0;
			transition: color 360ms ease;
			color: var(--inverted-text-color);
			display: block;
									
			&:hover,
			&:focus,			
			&.active {
        		color: var(--inverted-text-color);
			}			
		}	
	}		
	.navigation__group-sub {
		// width: 100%;
		// padding: 0;
		// text-align: center;
		    
		> a,
		> span {
		    transition: color 360ms ease;
      		color: var(--inverted-text-color);
		}
	}
	.navigation__overlay {
		top: 18rem;

		.grid--span-3 {
			grid-column: span 3;
		}
		.grid--span-2 {
			grid-column: span 3;
		}
		.grid--span-8 {
			grid-column: span 12;
		}

		.overlay__close {
			display: none;
		}

		// .active--all {
		// 	display: none;
		// }

		.menu-level--2 {
			.grid--column-11 {
				grid-template-columns: repeat(11,1fr);
			}
			.grid--span-3 {
				grid-column: span 3;
			}
			.grid--span-8 {
				grid-column: span 8;
			}
		}
	}

}

@include mq-3 {

	.navigation__overlay {
		.grid--span-3 {
			grid-column: span 12;
		}
		.grid--span-2 {
			grid-column: span 6;
		}
		// .active--all {
		// 	display: none;
		// }

		.menu-level--1 {
			min-height: 0;
			margin-top: 0;
		}

		.menu-level--2 {
			.grid--column-11 {
				grid-template-columns: repeat(11,1fr);
			}
			.grid--span-3 {
				grid-column: span 4;
			}
			.grid--span-8 {
				grid-column: span 7;
			}
		}
	}

}

@include mq-4 {

	.menu-level--1 {
		margin-top: 0;
	}

	.navigation__group > span {
		padding-bottom: 7px;
	}

	.navigation__group-sub {
		width: 100%;
		margin-bottom: 0;
		padding: 0 0rem 2.4rem;
	}

	.navigation__overlay {
		top: 21rem;

		.grid--span-3 {
			display: none;
		}
		.grid--span-2 {
			grid-column: span 12;
		}
		.active--all {
			display: none;
		}

		span.active+.menu-level--2 {
			max-height: 30vh;
			margin: 1.2rem 0 2.4rem;
			border-bottom: .1rem solid #fff;
		}

		.menu-level--2 {
			position: static;
    		width: 100%;
			column-count: auto;
			border-left: none;
			overflow-y: scroll;
			transition: all .35s ease;

			.grid--column-11 {
				grid-template-columns: repeat(11,1fr);
			}
			.grid--span-3 {
				display: block;
				grid-column: span 12;
			}
		}
		ul.menu-level--2 > li {
			padding: 0;
		}
	}

	.navigation__group-sub .map__list .map__list-item {
		padding: 0;
	}

}

 

jQuery(function ($) {

	const NavigationGroupSpan = '.navigation__group > span';
	const NavigationGroupSubSpan = '.navigation__group-sub > span';
	const NavigationGroupSub = '.navigation__group-sub > a';
	const MenuLevel2 = '.menu-level--2';
	$('.js-nav-toggle', $(this)).click(function () {
		$(this).toggleClass('nav--active');
		$('#block-fitch-solutions-main-menu').toggleClass('active');

		if ($(this).hasClass('nav--active')) {
			$('.main').addClass('active--search');
			$('body').append('<div class="overlay__bg"></div>');
			$('#search-box').removeClass('active');
			$('*[data-overlay="#navigation__products"]').first().trigger("click");
		} else {
			$('.main').removeClass('active--search');
			$('.overlay__bg').delay(350).remove();
			$('.overlay__close').trigger('click');
		}

	});

	$(NavigationGroupSpan).click(function () {
		$(this).parent().toggleClass('active');

		if ($(this).parent().hasClass('active')) {
			$(NavigationGroupSpan).not($(this)).parent().removeClass('active');
			$(NavigationGroupSpan).not($(this)).removeClass('active');

			$(this).addClass('active');
		}
	});

	$(NavigationGroupSubSpan).click(function () {
		$(this).parent().toggleClass('active');

		$('.navigation__group-sub .active--all .map').first().addClass('hover');
		$('.navigation__group-sub .map__list .map__list-item').first().addClass('list-dash');

		if ($(this).parent().hasClass('active')) {
			$(NavigationGroupSubSpan).not($(this)).parent().removeClass('active');
			$(NavigationGroupSubSpan).not($(this)).removeClass('active');
			$(NavigationGroupSub).removeClass('active');
			$(MenuLevel2).hide();
			$('.map').removeClass('active');
			$(this).addClass('active').next(MenuLevel2).show();

		}

	});

	if (!detectMobile()) {
		$(NavigationGroupSub).hover(function () {
			$(this).parent().toggleClass('active');

			if ($(this).parent().hasClass('active')) {
				$(NavigationGroupSub).not($(this)).parent().removeClass('active');
				$(NavigationGroupSub).not($(this)).removeClass('active');
				$(NavigationGroupSubSpan).parent().removeClass('active');
				$(NavigationGroupSubSpan).removeClass('active');
				$(MenuLevel2).hide();
				$('.map').removeClass('active');
				$(this).addClass('active').next(MenuLevel2).show();

			}

		});
	}

	// CLOSES NAVIGATION WHEN CLICKED OUTSIDE
	$('.main').click(function () {
		$(NavigationGroupSpan).parent().removeClass('active');
		$(NavigationGroupSpan).removeClass('active');
		$(NavigationGroupSubSpan).parent().removeClass('active');
		$(NavigationGroupSubSpan).removeClass('active');
		$(MenuLevel2).hide().removeClass('active');
	});

});

 

Design Files

Figma

Component Options

Component Options

There are no options for this component.

Copyright © 2024 GAMEWORK | Nicholas Game
Products

Explore knowledge that cuts through
the noise, with award-winning data,
research, and tools.

How To
Upgrading to Drupal 10
Velocity for Marketo
jQuery: The Basics
Homebrew
Gulp
Making the Grade
Formatting SVG Logos for the Website
Marketo Landing Page Builder
Work with our submodules
Drush Launcher
Upgrade PHP and change PATH
Qualtrics
Bitbucket SSH Key
Git
VS code extensions
Guide
Profile Banner
Fitch Ratings - Analyst Listing Page
CSS Custom Properties (Variables)
Carousel - Waterwheel
Mix it Up
Brand Navigation
Top Bar
Fitch Ratings - Podcast
Fitch Ratings - Analyst Profile
Event
Long Read
Article
Code test
Search Demo
Profile - Sustainable Fitch
Search Icon
Login
Language Filter
Theme Switch
Flip Card
Overlay
Infographic CDS
Interactive Map
Iframe
Footer
Main
Header
Accordion
Wrappers
Podcasts
DOM Layout
Figure
Search Tools
Search Bar
Search Overlay
Ratings Process
Ratings Definitions
Language Switch
Video Teaser
Video Player
Video Banner
Profile Teaser
Event Teaser
Back to Top
Pager
Navigation - Dropdown
Navigation - Overlay
Profile - Leadership FR
Profile - Leadership FG V2
Leadership Overview - FG
Forms
Leveraged Finance
Tags
Profile - Leadership FG V1
Profile - Analyst
Banner V2
Promo Hightlight
Tables
History - Fitch Group
Insights
Event Teaser
Event Listing
Overview
Logos
Title
Video
Text
Tab Wrapper
Tab
Sub Title
Section More
Showcase
Section
Quote
Promo Box
Post
Page Teaser
Page Promo
Page Layout - Left or Right Column with Main Column
Number
Node Reference
Map
Key Point
Key Highlight
Image
Icon Teaser
Highlight
Grid Column Wrapper
Grid Column
From library
Figure
Column Wrapper
Column
Carousel Slide
Carousel
Card
Call to action
Box
Block Reference
Banner
Email Guide
View Online
Email Components
Fitch Group
Fitch Ratings
Fitch Solutions