Так что мой значок открытого меню / гамбургера продолжает отображаться под lo go навигационной панели, я понятия не имею, как сделать так, чтобы он отображался там, где он должен быть в соответствии с лучшими практиками, в правой части меню заголовка. на рабочем столе и на мобильном телефоне без правильных действий: -220 или что-то еще. Должен быть лучший способ.
*,
*::before,
*::after {
margin:0;
padding:0;
box-sizing: inherit;
}
html {
font-size:18px;
box-sizing: border-box;
}
a {text-decoration: none;}
h1 {
font-size:48px;
font-weight:200;
font-family: 'Cormorant', 'Garamond', sans-serif;
}
.main-message p {
font-weight:400;
font-family: 'Montserrat', sans-serif;
}
.nav-list, .nav-item a{
font-size:13px;
font-family:'Montserrat', sans-serif;
font-weight:400;
color:white;
text-decoration: none;
}
li {
list-style:none;
}
img {width:100%;
max-width:100%;
height:auto;
}
section {
padding:5rem 0;
}
.mobile-open {
width:26px
}
.nav-list{
width:20px;
}
header {
width=100%;
height:5rem;
position:absolute;
top:90;
left:200;
z-index: 1;}
}
nav {
width: 100%;
display: flex;
align-items: center;
justify-content: space-between;
padding:1rem 0;
border-bottom: none;
}
container {
width: 100%;
max-width: 98rem;
margin:0 auto;
padding: 0 1.5rem;
}
.nav-brand {width:14rem;}
.mobile-open {
cursor:pointer;
}
.nav-list{width:25rem;
height:100vh;
background-color:#D64C31;
position:fixed;
top:0;
right:-26rem;
display:flex;
flex-direction:column;
align-items:center;
justify-content: center;
z-index:1500;
transition: all 650ms ease-in-out;
}
.nav-list.active {
right:0;
}
.close {position:absolute;}
.nav-list img {width:1.5rem;
height:1.5rem
}
.mobile-close {
position: absolute;
top:1rem;
left:1.5rem;
}
.nav-item {
margin: 1.5rem;
color:white;
}
.nav-link {
color:white;
text-transform: uppercase;
}
.nav-list.active {
right:0;
}
.close {
position:absolute;
top:1rem;
bottom: 1.5rem;
}
.open {
position:absolute;
top:1rem;
bottom: 1.5rem;
right:-220px;
}
*,
*::before,
*::after {
margin:0;
padding:0;
box-sizing: inherit;
}
html {
font-size:18px;
box-sizing: border-box;
}
a {text-decoration: none;}
h1 {
font-size:48px;
font-weight:200;
font-family: 'Cormorant', 'Garamond', sans-serif;
}
.main-message p {
font-weight:400;
font-family: 'Montserrat', sans-serif;
}
.nav-list, .nav-item a{
font-size:13px;
font-family:'Montserrat', sans-serif;
font-weight:400;
color:white;
text-decoration: none;
}
li {
list-style:none;
}
img {width:100%;
max-width:100%;
height:auto;
}
section {
padding:5rem 0;
}
.mobile-open {
width:26px
}
.nav-list{
width:20px;
}
header {
width=100%;
height:5rem;
position:absolute;
top:90;
left:200;
z-index: 1;}
}
nav {
width: 100%;
display: flex;
align-items: center;
justify-content: space-between;
padding:1rem 0;
border-bottom: none;
}
container {
width: 100%;
max-width: 98rem;
margin:0 auto;
padding: 0 1.5rem;
}
.nav-brand {width:14rem;}
.mobile-open {
cursor:pointer;
}
.nav-list{width:25rem;
height:100vh;
background-color:#D64C31;
position:fixed;
top:0;
right:-26rem;
display:flex;
flex-direction:column;
align-items:center;
justify-content: center;
z-index:1500;
transition: all 650ms ease-in-out;
}
.nav-list.active {
right:0;
}
.close {position:absolute;}
.nav-list img {width:1.5rem;
height:1.5rem
}
.mobile-close {
position: absolute;
top:1rem;
left:1.5rem;
}
.nav-item {
margin: 1.5rem;
color:white;
}
.nav-link {
color:white;
text-transform: uppercase;
}
.nav-list.active {
right:0;
}
.close {
position:absolute;
top:1rem;
bottom: 1.5rem;
}
.open {
position:absolute;
top:1rem;
bottom: 1.5rem;
right:-220px;
}
<!doctype html>
<!doctype html>
<html lang='en'>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, user-scale=no, initial-scale=1.0,
maximum-scale=1.0, minimum-scale=1.0">
<title> Juno College </title>
<meta-http-equiv="X-UA-COMPATIBLE" content="ie-edge">
<!--GGL FONTS-->
<link herf="https://fonts.google.com/specimen/Cormorant+Garamond"
rel="stylesheet">
<link href="https://fonts.google.com/specimen/Montserrat"
rel=stylesheet">
<link rel="stylesheet" link href="style.css">
</head>
<body>
<header>
<div class="container">
<nav>
<div class="nav-brand">
<a href="site.html">
<img src="assets/juno-logo.png" alt="">
</a>
</div>
<div class="mobile-open open">
<i class="mobile-open">
<img src="assets/mobile-open.png"> </i>
</div>
<ul class="nav-list">
<div-class="mobile-close close">
<i class="mobile-close">
<img src="assets/mobile-close.png"> </i>
<li class="nav-item">
<a href="#" class="nav-link">Course</a>
</li>
<li class="nav-item">
<a href="#" class="nav-link">About</a>
</li>
<li class="nav-item">
<a href="#" class="nav-link">Alumni</a>
</li>
<li class="nav-item">
<a href="#" class="nav-link">Blog</a>
</li>
</ul>
</nav>
</div>
</div>
</header>
<section class="dog-main">
<div class="container">
<div class="main-message">
<h1> Tech challenge</h1>
<p> Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Sodales neque sodales ut etiam sit amet. Tristique risus nec feugiat in fermentum posuere urna. Nascetur ridiculus mus mauris vitae ultricies leo integer. Augue interdum velit euismod in pellentesque massa placerat. Vitae suscipit tellus mauris a diam maecenas sed enim. Egestas purus viverra accumsan in nisl nisi. At volutpat diam ut venenatis tellus in metus vulputate. In massa tempor nec feugiat. Curabitur gravida Nascetur ridiculus mus mauris vitae ultricies leo integer. Augue interdum velit euismod in pellentesque massa placerat. Vitae suscipit tellus mauris a diam maecenas sed enim. Egestas purus viverra accumsan in nisl nisi. At volutpat diam ut venenatis tellus in metus vulputate. In massa tempor nec feugiat. Curabitur gravida arcu ac tortor dignissim. Tristique nulla aliquet enim tortor at auctor. Quam id leo in vitae turpis massa. Tellus mauris a diam maecenas sed enim. </p>
<div class="cta">
<a href="#" class="btn"> Begin Your Journey at Juno </a>
</div>
<script type="text/javascript" src="scripts.js" ></script>
</section>
</body>
</html>