Top Bar

VIEWPORTS Full Width 1366px 1024px 768px 480px 320px

Fitch Learning CreditSights

<div id="block-block-0" class="block block-block even">
    <style type="text/css">
    #block-block-0 {
        margin: 0;
        float: left;
    }
    .brand-navigation {
        position: relative;
        padding: 1px 0 6px 0;
        font-size: 14px;
        font-weight: bold;
        color: white;
        cursor: pointer;
    }
    .brand-navigation__toggle [class*=fa] {
        position: relative;
        top: 2px;
        width: 14px;
        height: 14px;
        padding-left: 6px;
        fill: #ffffff;
    }
    .brand-navigation:hover [class*=fa], .brand-navigation:focus [class*=fa] {
        transform: rotate(180deg);
        padding-left: 0;
        padding-right: 6px;
    }
    .brand-navigation:hover ul, .brand-navigation:focus ul {
        display: block;
    }
    .brand-navigation__label {
        margin-left: 24px;
        color: #888888;
    }
    .brand-navigation ul {
        position: absolute;
        top: 10px;
        left: -18px;
        width: 240px;        
        padding: 9px 0;
        background: #ffffff;
        border-radius: 0 0 6px 6px;
        box-shadow: 0 14px 14px -14px rgba(173, 173, 173, 0.3);
        text-transform: none;
        display: none;
        z-index: 200;
    }
    .brand-navigation ul li {
        padding: 0;
        display: block;
    }
    .brand-navigation ul li:before {
        content: none;
    }
    .brand-navigation ul li a {
        padding: 9px 18px;
        background: #ffffff;
        color: #000000;
        text-decoration: none;
        display: block;
    }
    .brand-navigation ul li a:hover {
        background: #007A87;
        color: #ffffff;
        text-decoration: none;
    }
    </style>

    <div class="brand-navigation">
        <div class="brand-navigation__toggle">Discover Fitch Solutions <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 320 512" class="fas fa-caret-down"><path d="M31.3 192h257.3c17.8 0 26.7 21.5 14.1 34.1L174.1 354.8c-7.8 7.8-20.5 7.8-28.3 0L17.2 226.1C4.6 213.5 13.5 192 31.3 192z"/></svg></div>
        <ul>
        <li><a href="https://www.fitchsolutions.com/" target="fitchsolutions">Fitch Solutions</a></li>
        <li><a href="https://www.fitchsolutions.com/bmi" target="bmi">BMI</a></li>
        <li><a href="https://know.creditsights.com" target="creditsights">CreditSights</a></li>
        <li><a href="https://www.dv01.co" target="dv01">dv01</a></li>
        <li><a href="https://www.fitchlearning.com/" target="_self">Fitch Learning</a></li>
        <li><a href="https://www.fitchsolutions.com/credit" target="frrd">Fitch Ratings Research &amp; Data</a></li>
        <li><a href="https://www.sustainablefitch.com" target="sustainable-fitch">Sustainable Fitch</a></li>
        </ul>
    </div>
</div>

<style type="text/css">
.wrapper--1 {
  position: relative;
  width: 100%;
  max-width: 1244.390px;
  height: 100%;
  margin: auto;
  padding: 0 12px;
  line-height: 1.58;
}

.top-bar {
  position: relative;
  width: 100%;
  background: #000000;
  box-shadow: 0 1.4rem 1.4rem -1.4rem rgba(173, 173, 173, 0.3);
  color: #ffffff;
  z-index: 9999;
}
.top-bar a {
  color: inherit;
}
.top-bar__left, .top-bar__right {
  width: 50%;
  display: flex;
  flex-flow: row wrap;
  align-items: center;
}
.top-bar__left {
  justify-content: start;
}
.top-bar__right {
  justify-content: end;
}
.top-bar__right .button, .top-bar__right #edit-preview, .top-bar__right .mktoButton,
.top-bar__right .button--primary,
.top-bar__right .form-submit:not(.search__submit) {
  font-size: 14px;
}
.top-bar .wrapper--1 {
  display: flex;
}

.brand-navigation {
    position: relative;
    padding: 6px 0;
    font-size: 14px;
    font-weight: bold;
    color: white;
    cursor: pointer;
}
.brand-navigation__toggle [class*=fa] {
    position: relative;
    top: 2px;
    width: 14px;
    height: 14px;
    padding-left: 6px;
    fill: #ffffff;
}
.brand-navigation:hover [class*=fa],
.brand-navigation:focus [class*=fa] {
    transform: rotate(180deg);
    padding-left: 0;
    padding-right: 6px;
}
.brand-navigation:hover ul, .brand-navigation:focus ul {
    display: block;
}
.brand-navigation__label {
    margin-left: 24px;
    color: #888888;
}
.brand-navigation ul {
    position: absolute;
    top: 100%;
    left: -18px;
    width: 240px;
    margin: 0px;
    padding: 9px 0;
    background: #ffffff;
    border-radius: 0 0 6px 6px;
    box-shadow: 0 14px 14px -14px rgba(173, 173, 173, 0.3);
    text-transform: none;
    display: none;
    z-index: 200;
}
.brand-navigation ul li {
    margin: 0;
    padding: 0;
    font-size: inherit;
    display: block;
}
.brand-navigation ul li:before {
    content: none;
}
.brand-navigation ul li a {
    padding: 9px 18px;
    background: #ffffff;
    color: #000000;
    text-decoration: none;
    display: block;
    transition: background 360ms ease, color 360ms ease;
}
.brand-navigation ul li a:hover {
    background: #174174;
    color: #ffffff;
    text-decoration: none;
}
</style>

<div class="top-bar">
    <div class="container">
        <div class="top-bar__left">
            
            <div class="brand-navigation">
                <div class="brand-navigation__toggle">Discover Fitch Solutions <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 320 512" class="fas fa-caret-down"><path d="M31.3 192h257.3c17.8 0 26.7 21.5 14.1 34.1L174.1 354.8c-7.8 7.8-20.5 7.8-28.3 0L17.2 226.1C4.6 213.5 13.5 192 31.3 192z"/></svg></div>
                <ul>
                    <li><a href="https://www.fitchsolutions.com/" target="fitchsolutions">Fitch Solutions</a></li>
                    <li><a href="https://www.fitchsolutions.com/bmi" target="bmi">BMI</a></li>
                    <li><a href="https://know.creditsights.com" target="_self">CreditSights</a></li>
                    <li><a href="https://www.dv01.co" target="dv01">dv01</a></li>
                    <li><a href="https://www.fitchlearning.com/" target="fitch-learning">Fitch Learning</a></li>
                    <li><a href="https://www.fitchsolutions.com/credit" target="frrd">Fitch Ratings Research &amp; Data</a></li>
                    <li><a href="https://www.sustainablefitch.com" target="sustainable-fitch">Sustainable Fitch</a></li>
                </ul>
            </div>
            
        </div>
    </div>
</div>

Code

HTML Twig Variables CSS SCSS JS

<div class="top-bar">
	<div class="wrapper--1">
		<div class="top-bar__left">
		</div>
		<div class="top-bar__right"> 
		</div>
	</div>
</div>

<div class="top-bar">
	<div class="wrapper--1">
		<div class="top-bar__left">
            {{ page.top_bar_left }}
		</div>
		<div class="top-bar__right">
			{{ page.top_bar_right }}  
		</div>
	</div>
</div>

  // TOP BAR
  --top-bar-background: var(--black);
  --top-bar-color: var(--white);

.top-bar {
  position: relative;
  width: 100%;
  background: var(--top-bar-background);
  box-shadow: 0 1.4rem 1.4rem -1.4rem rgba(173, 173, 173, 0.3);
  color: var(--top-bar-color);
  z-index: 14;
}
.top-bar a {
  color: inherit;
}
.top-bar__left, .top-bar__right {
  width: 50%;
  display: flex;
  flex-flow: row wrap;
  align-items: center;
}
.top-bar__left {
  justify-content: start;
}
.top-bar__right {
  justify-content: end;
}
.top-bar__right .button, .top-bar__right #edit-preview, .top-bar__right .mktoButton,
.top-bar__right .button--primary,
.top-bar__right .form-submit:not(.search__submit) {
  font-size: var(--font-size-2);
}
.top-bar .wrapper--1 {
  display: flex;
}

.top-bar {
    position: relative;
    width: 100%;
    background: var(--top-bar-background);
    box-shadow: 0 1.4rem 1.4rem -1.4rem rgba(173, 173, 173, 0.3);
    color: var(--top-bar-color);
    z-index: 14;

    a {
        color: inherit;
    }
    
    &__left,
    &__right {
        width: 50%;
        display: flex;
        flex-flow: row wrap;
        align-items: center;
    }
    &__left {
        justify-content: start;
    }
    &__right {
        justify-content: end;

        .button {
            font-size: var(--font-size-2);
        }
    }

    .wrapper--1 {
        display: flex;
    }
}

const localTasks = document.querySelector('.fitch-master-local-tasks');
const topBar = document.querySelector('.top-bar');
const header = document.querySelector('.header');

if (localTasks) {
    let localTasksHeight = localTasks.offsetHeight;
    let totalOffsetHeight = localTasksHeight;
    header.style.top=totalOffsetHeight+'px';
}
if (topBar) {
    let topBarHeight = topBar.offsetHeight;
    let totalOffsetHeight = topBarHeight;
    header.style.top=totalOffsetHeight+'px';
}
if (localTasks && topBar) {
    let localTasksHeight = localTasks.offsetHeight;
    let topBarHeight = topBar.offsetHeight;
    let totalOffsetHeight = localTasksHeight + topBarHeight;
    header.style.top=totalOffsetHeight+'px';
}

Design Files

Figma

Use Case

The Top Bar is a region of the page that sits at the very top of the site and is made up of two sub regions, top bar left and top bar right

It can be used for brand navigation, client logins and a couple of small text call to actions like contact us.

This should be shown on every page unless the stakeholder has a reason to hide it.

Component Options

There are no options for this component.

Layout