@fhetushr
Начинающий программист самоучка

Почему видны иконки в бургер меню?

Для начало вот фото проблемы:
5ee1f61c28b9d597398498.jpeg

Без бургера:
5ee1f7b32b7a8331487750.jpeg

HTML этого блока:
<div class="our-team">
		<div class="container">
			<div class="body our-team__body">
				<h2 class="title our-team__title">Meet our beautiful team</h2>
				<div class="subtitle our-team__subtitle">
					We are a small team of designers and developers, who help brands with sbig ideas.
				</div>
			</div>

			<div class="row our-team__row">
				<div class="our-team__column">
					<img src="images/our-team/Base.svg" class="column__image">
					<div class="our-team-column__title">ANNE HATHAWAY</div>
					<div class="our-team-column__subtitle">CEO / Marketing Guru</div>
					<div class="our-team-column__text">Lorem ipsum dolor sit amet,
						consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna.
					</div>
					<div class="our-team-column__icon-row">
						<div class="icon-body"><img src="images/our-team/Facebook.svg" alt="Facebook" class="our-team-column__icon icon"></div>
						<div class="icon-body"><img src="images/our-team/Twitter.svg" alt="Twiter" class="our-team-column__icon"></div>
						<div class="icon-body"><img src="images/our-team/LinkedIn.svg" alt="LinkedIn" class="our-team-column__icon"></div>
						<div class="icon-body"><img src="images/our-team/Mail.svg" alt="Mail" class="our-team-column__icon"></div>
					</div>
				</div>

				<div class="our-team__column">
					<img src="images/our-team/Base.svg" class="column__image">
					<div class="our-team-column__title">Kate Upton</div>
					<div class="our-team-column__subtitle">Creative Director</div>
					<div class="our-team-column__text">Duis aute irure dolor in in voluptate velit
						esse cillum dolore fugiat nulla pariatur. Excepteur sint occaecat non diam proident.
					</div>
					<div class="our-team-column__icon-row">
						<div class="icon-body"><img src="images/our-team/Twitter.svg" alt="Twiter" class="our-team-column__icon"></div>
						<div class="icon-body"><img src="images/our-team/LinkedIn.svg" alt="LinkedIn" class="our-team-column__icon"></div>
						<div class="icon-body"><img src="images/our-team/Mail.svg" alt="Mail" class="our-team-column__icon"></div>
					</div>
				</div>

				<div class="our-team__column">
					<img src="images/our-team/Base.svg" class="column__image">
					<div class="our-team-column__title">Olivia Wilde</div>
					<div class="our-team-column__subtitle">Lead Designer</div>
					<div class="our-team-column__text">Nemo enim ipsam voluptas sit aspernatur aut 
						odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem nesciunt.
					</div>
					<div class="our-team-column__icon-row">
						<div class="icon-body"><img src="images/our-team/Facebook.svg" alt="Facebook" class="our-team-column__icon"></div>
						<div class="icon-body"><img src="images/our-team/Twitter.svg" alt="Twiter" class="our-team-column__icon"></div>
						<div class="icon-body"><img src="images/our-team/LinkedIn.svg" alt="LinkedIn" class="our-team-column__icon"></div>
						<div class="icon-body"><img src="images/our-team/Mail.svg" alt="Mail" class="our-team-column__icon"></div>
					</div>
				</div>

				<div class="our-team__column">
					<img src="images/our-team/Base.svg" class="column__image">
					<div class="our-team-column__title">Ashley Greene</div>
					<div class="our-team-column__subtitle">SEO / Developer</div>
					<div class="our-team-column__text">Sed ut perspiciatis unde omnis iste natus
							error sit voluptatem accusantium doloremque laudantium, totam rem aperiam.
					</div>
					<div class="our-team-column__icon-row">
						<div class="icon-body"><img src="images/our-team/Facebook.svg" alt="Facebook" class="our-team-column__icon"></div>
						<div class="icon-body"><img src="images/our-team/Twitter.svg" alt="Twiter" class="our-team-column__icon"></div>
						<div class="icon-body"><img src="images/our-team/Mail.svg" alt="Mail" class="our-team-column__icon"></div>
					</div>
				</div>
			</div>
		</div>
	</div>


И вот CSS:
/* Style for Our-team block */

.our-team {
	background: #e7f1f8;
}

.our-team__body {}

.our-team__title {
	color: #3c4761;

}

.our-team__title:after {
	background: #c8d9e5;
}

.our-team__subtitle {
	color: #3c4761;
}

.our-team__row {
}

.our-team__column {
	display: -webkit-flex;
	display: -moz-flex;
	display: -ms-flex;
	display: -o-flex;
	display: flex;	

	-webkit-flex-direction: column;
	-moz-flex-direction: column;
	-ms-flex-direction: column;
	-o-flex-direction: column;
	flex-direction: column;	

	-ms-align-items: center;
	align-items: center;

	flex: 0 1 25%;
}

.our-team-column__image {}

.our-team-column__title {
	color: #3c4761;
	font-size: 24px;
	font-weight: 700;

	text-transform: uppercase;	

	margin: 40px 0 15px 0;
}

.our-team-column__subtitle {
	color: #30bae7;
	font-size: 16px;
}

.our-team-column__text {
	color: #535e75;
	font-size: 16px;	
	font-weight: 300;

	width: 70%;

	margin: 30px 0 30px 0;

	flex: 1 1 0;
}

.our-team-column__icon-row {
	display: -webkit-flex;
	display: -moz-flex;
	display: -ms-flex;
	display: -o-flex;
	display: flex;
}

.our-team-column__icon {
	display: -webkit-flex;
	display: -moz-flex;
	display: -ms-flex;
	display: -o-flex;
	display: flex;

	position: absolute;
	left: 50%;
	top: 50%;

	width: 15px;
	height: 17px;

	transform: translate(-50%, -50%);
}

.our-team-column__icon:last-child {
	margin: 0;
}

.icon-body {
	position: relative;
		
	width: 32px;
	height: 32px;

	margin: 0 10px 0 0;

	background-color: #bdd1df;
	border-radius: 50%;
}


@media screen and (max-width: 1024px) {
	.our-team__row {
		-webkit-flex-wrap: wrap;
		-moz-flex-wrap: wrap;
		-ms-flex-wrap: wrap;
		-o-flex-wrap: wrap;
		flex-wrap: wrap;

		
	}

	.our-team__column {
		flex: 1 0 50%;
	}

	.our-team__column:nth-child(3),
	.our-team__column:nth-child(4) {
		margin: 80px 0 0 0;
	}
}

@media screen and (max-width: 680px) {
	.our-team__row {
		margin: 100px 0 0 0;
	}
}


Я заметил, что если у .icon__body убрать position: relative; то иконки не отображаются в меню, но такой вариант не подходит
  • Вопрос задан
  • 85 просмотров
Пригласить эксперта
Ответы на вопрос 1
@secretsergey
Для блока с зеленым фоном (меню) добавьте в стили:
position: relative;
z-index: 2;
Ответ написан
Ваш ответ на вопрос

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

Войти через центр авторизации
Похожие вопросы