Привет! Каким образом я могу "заправить" белый фон по центру ( ) под верхнее меню () ?
Хочу добиться такого эффекта: верхняя линия с меню (top_line) фиксированная, тень от нижнего бордера падает на "белое окно" (white_window) т.е. при прокрутке страницы вниз верхнее меню остается на месте и отбрасывает тень на "белое окно" с контентом.
HTML:
<header>
<div class="top_line">
<div class="container">
<div class="row">
<div class="col-md-12">
<!-- Start menu -->
<nav>
<ul>
<li><a href="#">Главная</a></li>
<li><a href="#">О нас</a></li>
<li><a href="#">Услуги</a></li>
<li><a href="#">Контакты</a></li>
</ul>
</nav>
<!-- End menu -->
<div class="white_window">123</div>
</div>
</div>
</div>
</div>
</header>
CSS:
.top_line
height: 100px
position: fixed
width: 100%
border-bottom: 1px solid #FEF5E8
box-shadow: 0px 0px 10px #261C19
background: linear-gradient(324deg, #232927 4%, transparent 4%) -70px 43px,linear-gradient( 36deg, #232927 4%, transparent 4%) 30px 43px,linear-gradient( 72deg, #e3d7bf 8.5%, transparent 8.5%) 30px 43px,linear-gradient(288deg, #e3d7bf 8.5%, transparent 8.5%) -70px 43px,linear-gradient(216deg, #e3d7bf 7.5%, transparent 7.5%) -70px 23px,linear-gradient(144deg, #e3d7bf 7.5%, transparent 7.5%) 30px 23px,linear-gradient(324deg, #232927 4%, transparent 4%) -20px 93px,linear-gradient( 36deg, #232927 4%, transparent 4%) 80px 93px,linear-gradient( 72deg, #e3d7bf 8.5%, transparent 8.5%) 80px 93px,linear-gradient(288deg, #e3d7bf 8.5%, transparent 8.5%) -20px 93px,linear-gradient(216deg, #e3d7bf 7.5%, transparent 7.5%) -20px 73px,linear-gradient(144deg, #e3d7bf 7.5%, transparent 7.5%) 80px 73px
background-color: #232927
background-size: 100px 100px
nav ul
float: right
margin: 0
padding: 0
li
float: left
list-style-type: none
line-height: 100px
> a
display: inline-block
color: #FFF
margin: 0 20px
font-size: 19px
letter-spacing: 1px
&:hover
text-decoration: none
text-shadow: 0 0 20px #BFFFBF
color: #fff
transform: scale(1.2, 1.2)
transition: transform .3s linear
.white_window
background-color: #FFF9FA
height: 500px
position: relative
margin: 0
padding: 0
clear: both