<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
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.