Как сделать, чтобы при раскрытии гамбургер-меню, контент под ним смещался вниз?

Question

[Алексей Каратеев]

Здравствуйте, мне нужно, чтобы контент под меню, когда оно разворачивается, смещался вниз, чтобы не было наложения друг на друга. Сейчас это выглядит так:

Соответственно нужно, чтобы кнопка "sign up" смещалась вниз.

Comments

[Рома Зварич]

Дайте посмотреть код.
Как по фотографии определить проблему?

[Алексей Каратеев]

Рома Зварич,

<header class="header">
		<div class="container">
			<div class="navbar">
				<div class="logo">
					<img src="img/logo.png" alt="Dart Service Manager">
				</div>
				<div class="menu">
					<nav class="burger-menu">
						<ul class="nav-menu nav-menu__active">
							<li><a href="#">Home</a></li>
							<li><a href="#">Service</a></li>
							<li><a href="#">Extension</a></li>
							<li><a href="#">Pricing</a></li>
							<li><a href="#">Help</a></li>
						</ul>
						<a href="#" class="menu-btn">
							<span></span>
						</a>
					</nav>

				</div>
				
				<div class="sign__up">
					<a href="#" class="btn">sign up</a>
				</div>
			</div>
			<div class="header__face">
				<div class="buy">
					<h1>lorem Ipsum <br>
					Dolor sit amet</h1>
					<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do <br> beiusmod tempor incididunt labore et dolore magna aliqua. Ut enim ad <br> minim veniam, quis nostrud exercitation ullamc</p>
					<a href="#" class="buy-btn offer__btn">Buy now</a>
					<a href="#" class="try-btn offer__btn">Try for free</a>
				</div>
				<div class="video">
					<div class="video-bg">
						<img src="img/video.png" alt="Video">
					</div>
					<div class="play-btn">
						<a href="#"><img src="img/play__button.png" alt="Play"></a>
						<p>Watch the video</p>
					</div>
				</div>
			</div>
		</div>
	</header>

@media screen and (max-width: 503px) {
	

	.nav-menu {
		padding-top: 40px;

	}


	.menu li{
		display: flex;
		flex-direction: column;
		text-align: center;
		padding-top: 15px;
	}


	.menu-btn {
		display: inline-block;
		top: -300px;
		left: -230px;
	}

	.nav-menu {
		transform-origin: bottom center;
}

.nav-menu__active {
		opacity: 1;
		transform: scaleX(1) translateX(0); 
	}

	.nav-menu__active {
		transform: scaleX(0) translateX(5%);
		opacity: 0;
	}

	.sign__up {
		margin-top: -290px;
		margin-left: 25px;
	}
}

$('.menu-btn').on('click', function(e){
	e.preventDefault;
	$(this).toggleClass('menu-btn__active');
	$('.nav-menu').toggleClass('nav-menu__active');
})

[Рома Зварич]

Алексей Каратеев, вставьте свой код в какой-нибудь CodePen и посмотрите, что получается

Answer 1

[Gosha235]

написать функцию js

Comments

[Алексей Каратеев]

Какую именно? Я просто еще не изучал особо js, гуглил как написать такую функцию, но все не то