<div class="header-nav__outer">
			<div class="header-nav__wrapper wrapp">
				<nav class="header-nav__inner">
					
				</nav>
				<!--<div class="header-nav__bottom"> </div>-->
			</div>
		</div>
.wrapp {
  max-width: 1000px;
  margin-left: auto;
  margin-right: auto;
}
.header {
    height: 90px;
    background: #242424;
    position: relative;
    padding-top: 15px;
    box-sizing: border-box;
    z-index: 10;

    &::after {
        content: '';
        position: absolute;
        left: 0;
        bottom: -18px;
        height: 20px;
        width: 100%;
        background: url("images/header-bottom-decoration.png") no-repeat center / auto;
    }

    &__logo-wrapper {

        img {
            display: block;
            margin-left: auto;
            margin-right: auto;
        }

    }

    &-nav {
        &__outer {
            position: relative;

            &::before {
                content: '';
                position: absolute;
                bottom: -15px;
                width: 100%;
                height: 30px;
                //background: url("images/header-nav-bg.png") no-repeat 50% 100% / cover, #1B6AD2;
                background: #1B6AD2;
                max-width: 800px;
                left: 50%;
                transform: translateX(-50%);
                border-radius: 40px;
            }

            &::after {
                content: '';
                position: absolute;
                left: 50%;
                transform: translateX(-50%);
                bottom: -50px;
                background: url("images/header-nav-shadow.png") no-repeat center / auto;
                height: 40px;
                width: 100%;
                max-width: 900px;
            }
        }

        &__wrapper {

            background: url("https://i.ibb.co/yYW2TSM/header-nav-bg.png") no-repeat center / cover,
            linear-gradient(to top, #2377E5 0%, #1B6AD2 100%), #1B6AD2;
            border-radius: 0 0 20px 20px;
            padding-top: 30px;
            padding-bottom: 15px;
            z-index: 2;
            position: relative;

        }

        &__inner {
            max-width: 723px;
            margin-left: auto;
            margin-right: auto;
        }

        &__list {
            display: flex;
            justify-content: center;

            &-item {
                padding-left: 15px;
                padding-right: 15px;
                position: relative;
                &:not(:last-of-type) {
                    &::before {
                        display: block;
                        content: '';
                        position: absolute;
                        right: 0;
                        top: 50%;
                        transform: translateY(-50%);
                        background: url("images/header-nav-separator.png") no-repeat;
                        //background: red;
                        height: 32px;
                        width: 2px;
                    }

                }
            }

        }

        &__link {
            color: #FFFFFF;
            font-family: "Exo 2.0", sans-serif;
            font-size: 16px;
            font-weight: 200;
            text-transform: uppercase;
            transition: color 0.2s;

            &:hover {
                color: #AAC2FF
            }
        }

        &__bottom {
            max-width: 800px;
            height: 20px;
            background: #E6E6E6;
            margin-left: auto;
            margin-right: auto;
        }

    }

}
View Compiled

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.