Lebed_Sergey
@Lebed_Sergey

Как переместить div за пределы активного меню?

Всем добрый день!
При адаптации сайта под мобильные устройства столкнулся со следующей проблемой.
При помощи media правил необходимо переместить div line-nav__logo с активного меню на страницу над заголовком.
Подскажите, пожалуйста, как я могу это сделать.
<header>
		<div class="container">
			<nav class="line-nav">
				<div class="line-nav__logo">
					<a href="#" class="line-nav__logo__icon">
						<img src="icons/Logo.png" alt="logo">
						<span>Bubble Bash</span>
					</a>
				</div>
				<div class="line-nav__menu">
					<ul class="line-nav__menu__list">
						<li class="line-nav__menu__list__item"><a href="#" class="line-nav__menu__list__item__link">Home</a></li>
						<li class="line-nav__menu__list__item"><a href="#" class="line-nav__menu__list__item__link">Our Services</a></li>
						<li class="line-nav__menu__list__item"><a href="#" class="line-nav__menu__list__item__link">Portfolio</a></li>
						<li class="line-nav__menu__list__item"><a href="#" class="line-nav__menu__list__item__link">Testimonial</a></li>
						<li class="line-nav__menu__list__item"><a href="#" class="line-nav__menu__list__item__link">Contact Us</a></li>
					</ul>
				</div>
		</div>
		<div class="hamburger">
			<span></span>
			<span></span>
			<span></span>
	  </div>
		<h1 class="title">Create Amazing Digital Product <br> For Your Business</h1>
		<h4 class="sub-title">We are a professional digital agency that has been established since 2016, we present a
			variety of <br> digital services that can help you solve problems in your business
		</h4>
		<div class="btn_wrap">
			<button class="btn">
				<span>Get Started<img src="icons/ArrowRight.png" alt="Arrow"></span></button>
		</div>
		</div>
	</header>


@media (max-width: 767px)
	nav
		position: fixed
		flex-direction: column
		justify-content: space-around
		left: -100%
		width: 50%
		height: 100vh
		padding: 20px 15px
		background-color: rgba(0,0,0, .8)
		transition: 0.6s all
	.menu_active 
		left: 0
	.line-nav__logo
		
	.line-nav__menu
		margin-top: 0
	.line-nav__menu__list__item
		display: block
		margin: 80px
	.line-nav__menu__list li a
		font-size: 16px
	.btn
		display: none

	.title
		margin: 0 auto
		padding-top: 28px
	.hamburger
		display: block
		position: fixed
		right: 30px
		top: 30px
		transform: translateY(-50%)
		width: 30px
		height: 12px
		span
			display: block
			height: 2px
			width: 100%
			background-color: $main-white
			margin-bottom: 2px
			transition: 0.5s all
		&_active
			span
				margin-bottom: -2px
				&:nth-child(1)
					transform: translateY(3px) rotate(-45deg)
				&:nth-child(2)
					display: none
				&:nth-child(3)
					transform: translateY(3px) rotate(45deg)


window.addEventListener('DOMContentLoaded', () => {
	const menu = document.querySelector('.line-nav'),
	menuItem = document.querySelectorAll('.line-nav__menu__list__item'),
	hamburger = document.querySelector('.hamburger');

	hamburger.addEventListener('click', () => {
		 hamburger.classList.toggle('hamburger_active');
		 menu.classList.toggle('menu_active');
	});

	menuItem.forEach(item => {
		 item.addEventListener('click', () => {
			  hamburger.classList.toggle('hamburger_active');
			  menu.classList.toggle('menu_active');
		 })
	})
})


6425332e56a23991222485.png
64253340568f5785782058.png
6425334eaff5c355119543.png
  • Вопрос задан
  • 38 просмотров
Решения вопроса 1
@nkochnevss
как вариант
сделай второй line-nav__logo__icon который будет скрыт
после нажатия он будет появляться там где тебе нужно
возможно ты имел ввиду что то другое
Ответ написан
Комментировать
Пригласить эксперта
Ваш ответ на вопрос

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

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