Nation Bar

foundation.css

.row {
  max-width: 89.000rem;
  margin-left: auto;
  margin-right: auto; 
 }
 
 .row::before, .row::after {
    content: ' ';
    display: table; 
  }
 
 .row::after {
    clear: both; 
}

.column, .columns {
  width: 100%;
  float: left;
  padding-left: 0.75rem;
  padding-right: 0.75rem; 
}


.small-12 {
  width: 100%; 
}

nationbar.html

<div class="nation_bar">
    <div class="row">
        <div class="small-12 columns">
            <div class="nation_bar-wrap">
                <span class="nation_bar-title"><img src="https://nation-network-develop.go-vip.co/wp-content/themes/nationnetwork/assets/img/logos/thenationnetwork.png" alt="The Nation Network"></span>
                <nav class="nation_bar-nav">
                    <ul>
                        <li>
                            <a href="http://canucksarmy.com/" target="_blank">
                                <span>Canucks<br> Army</span>
                                <img src="https://nation-network-develop.go-vip.co/wp-content/themes/nationnetwork/assets/img/logos/canuksarmy.png" alt="canucksarmy">
                            </a>
                        </li>
                        <li>
                            <a href="http://flamesnation.ca/" target="_blank">
                                <span>Flames Nation</span>
                                <img src="https://nation-network-develop.go-vip.co/wp-content/themes/nationnetwork/assets/img/logos/flamesnation.png" alt="flamesnation">
                            </a>
                        </li>
                        <li>
                            <a href="http://oilersnation.com/" target="_blank">
                                <span>Oilers Nation</span>
                                <img src="https://nation-network-develop.go-vip.co/wp-content/themes/nationnetwork/assets/img/logos/oilersnation.png" alt="oilersnation">
                            </a>
                        </li>
                        <li>
                            <a href="http://jetsnation.ca/" target="_blank">
                                <span>Jets<br> Nation</span>
                                <img src="https://nation-network-develop.go-vip.co/wp-content/themes/nationnetwork/assets/img/logos/jetsnation.png" alt="jetsnation">
                            </a>
                        </li>
                        <li>
                            <a href="http://theleafsnation.com/" target="_blank">
                                <span>TheLeafs Nation</span>
                                <img src="https://nation-network-develop.go-vip.co/wp-content/themes/nationnetwork/assets/img/logos/leafsnation.png" alt="leafsnation">
                            </a>
                        </li>
                        <li>
                            <a href="http://wingsnation.com/" target="_blank">
                                <span>Wings Nation</span>
                                <img src="https://nation-network-develop.go-vip.co/wp-content/themes/nationnetwork/assets/img/logos/wingsnation.png" alt="wingsnation">
                            </a>
                        </li>
                        <li>
                            <a href="http://bluejaysnation.com/" target="_blank">
                                <span>Bluejays Nation</span>
                                <img src="https://nation-network-develop.go-vip.co/wp-content/themes/nationnetwork/assets/img/logos/bluejaysnation.png" alt="bluejaysnation">
                            </a>
                        </li>
                        <li>
                            <a href="http://nhlnumbers.com/" target="_blank">
                                <span>NHL<br> Numbers</span>
                                <img src="https://nation-network-develop.go-vip.co/wp-content/themes/nationnetwork/assets/img/logos/nhlnumbers.png" alt="nhlnumbers">
                            </a>
                        </li>
                        <li>
                            <a href="http://www.dailyfaceoff.com/" target="_blank">
                                <span>Daily<br> Faceoff</span>
                                <img src="https://nation-network-develop.go-vip.co/wp-content/themes/nationnetwork/assets/img/logos/dailyfaceoff.png" alt="dailyfaceoff">
                            </a>
                        </li>
                        <li>
                            <a href="http://www.hockeyfights.com/" target="_blank">
                                <span>Hockey<br> Fights</span>
                                <img src="https://nation-network-develop.go-vip.co/wp-content/themes/nationnetwork/assets/img/logos/hockeyfights.png" alt="hockeyfights">
                            </a>
                        </li>
                    </ul>
                </nav>
            </div>
        </div>
    </div>
</div>

nationbar.scss

.nation_bar {
    background-color: #ebebf3;
    padding: 10px 0;
    position: relative;
    z-index: 9;
    @media screen and (max-width: 40em)  {
        display: none;
    }
    .nation_bar-wrap {
        display: flex;
        flex-wrap: nowrap;
        align-items: center;
        .nation_bar-title {
            width: 240px;
            min-width: 240px;
        }
        .nation_bar-nav {
            margin-left: auto;
            ul {
                display: flex;
                list-style-type: none;
                margin: 0;
                padding: 0;
                &::-webkit-scrollbar {
                    -webkit-appearance: none;
                    height: 4px;
                }
                &::-webkit-scrollbar-thumb {
                    border-radius: 8px;
                    border: 1px solid #222;
                    background-color: #222;
                }
                @media screen and (max-width: 64.000em) {
         		    overflow-x: auto;
         		     -webkit-overflow-scrolling: touch;
                }
                li {
                    border-bottom: 3px solid #c4c6dd;
                    margin: 0 5px;
                    @media screen and (max-width: 64.000em) {
                        display: flex;
             			flex: 0 0 auto;
                    }
                    &:last-child {
                        margin: 0 0 0 5px;
                    }
                    a {
                        display: block;
                        position: relative;
                        max-width: 105px;
                        &:hover {
                            span {
                                display: flex;
                            }
                        }
                        span {
                            background: rgba(0, 0, 0, 0.75);
                            color: #fff;
                            display: none;
                            align-items: center;
                            justify-content: center;
                            line-height: 1;
                            position: absolute;
                            top: 0;
                            bottom: 0;
                            left: 0;
                            right: 0;
                            text-align: center;
                            text-transform: uppercase;

                        }
                    }
                }
            }
        }
    }
}