Задать вопрос
@Richswitch
junior

Как «заправить» блок с контентом под верхнюю линию?

Привет! Каким образом я могу "заправить" белый фон по центру ( ) под верхнее меню () ?

Хочу добиться такого эффекта: верхняя линия с меню (top_line) фиксированная, тень от нижнего бордера падает на "белое окно" (white_window) т.е. при прокрутке страницы вниз верхнее меню остается на месте и отбрасывает тень на "белое окно" с контентом.865276b6bc8c491e8c7bbe4215ff48c4.png

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
  • Вопрос задан
  • 117 просмотров
Подписаться 1 Оценить Комментировать
Пригласить эксперта
Ответы на вопрос 1
MrDinkyToster
@MrDinkyToster
Я так предполагаю, что это из за position: relative для .white_window, поиграйтесь с z-index для меню
Ответ написан
Комментировать
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Похожие вопросы