Я пытаюсь сделать фиксированную навигационную панель вверху моей веб-страницы, пока это все чистый HTML и CSS.Проблема возникает из-за того, что я хочу, чтобы кнопка слева открывала боковую панель для навигации по мобильному телефону.Я хочу расположить три элемента панели навигации в центре панели навигации, равномерно отстоящих друг от друга.Как было сказано ранее, я также хочу, чтобы панель навигации была исправлена так, чтобы она была видимой независимо от того, где пользователь прокручивает страницу.
Вот HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Cyberpunk Bar</title>
<link href="https://stackpath.bootstrapcdn.com/bootswatch/4.1.1/lux/bootstrap.min.css" rel="stylesheet" integrity="sha384-4KIc2mnKfAA7VjirNLk2Sqp7jxFNq1q8+FhYGxhW2l52lt4HJsfksL+hjswHfbl/" crossorigin="anonymous">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.0.13/css/all.css" integrity="sha384-DNOHZ68U8hZfKXOrtjWvjxusGo9WQnrNx2sqG0tfsghAvtVlRW3tvkXWZh58N9jp" crossorigin="anonymous">
<link rel="stylesheet" href="style.css">
</head>
<div id="navbar">
<ul id="navbar-menu">
<li>
<span class="open-slide">
<a href="#" onclick="">
<div><i id="open-button" class="fab fa-bitcoin"></i></div>
</a>
</span>
</li>
<li><a href="#section1">Theme</a></li>
<li><a href="#section2">Beer</a></li>
<li><a href="#section3">Menu</a><li>
</ul>
</div>
<body>
<div class="pimg1">
<div class="ptext">
<span class="border">Cyberpunk Bar and Grill</span>
</div>
</div>
<section class="section section-light">
<h2>Section 1</h2>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Dolor enim quis explicabo perspiciatis nemo nesciunt ducimus, aut eos iste modi amet, illo est eveniet at porro debitis excepturi neque nisi! <br>
<p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Eaque neque expedita at fugit voluptates veritatis temporibus ab dignissimos et nihil? Repellendus debitis possimus consectetur facilis nostrum natus fugit voluptatibus modi?</p>
</section>
<div class="pimg2">
<div class="ptext">
<span class="border">Brilliant Beer Selection</span>
</div>
</div>
<section class="section section-light">
<h2>Section 2</h2>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Dolor enim quis explicabo perspiciatis nemo nesciunt ducimus, aut eos iste modi amet, illo est eveniet at porro debitis excepturi neque nisi! <br>
<p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Eaque neque expedita at fugit voluptates veritatis temporibus ab dignissimos et nihil? Repellendus debitis possimus consectetur facilis nostrum natus fugit voluptatibus modi?</p>
</p>
</section>
<div class="pimg3">
<div class="ptext">
<span class="border">Burgers and Steak</span>
</div>
</div>
<section id="section3" class="section section-dark">
<h2>Section 3</h2>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Dolor enim quis explicabo perspiciatis nemo nesciunt ducimus, aut eos iste modi amet, illo est eveniet at porro debitis excepturi neque nisi! <br>
<p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Eaque neque expedita at fugit voluptates veritatis temporibus ab dignissimos et nihil? Repellendus debitis possimus consectetur facilis nostrum natus fugit voluptatibus modi?</p>
</section>
<div class="pimg4">
<div class="ptext">
<span class="border">What are you waiting for?</span>
</div>
</div>
</body>
</html>
Вот CSS
body, html
{
height: 100%;
margin: 0;
padding: 0;
font-size: 18px;
font-family: "Lato", sans-serif;
font-weight: 400;
line-height: 1.8em;
color: #666;
}
#navbar
{
height: 100px;
background-color: black;
z-index: 1;
overflow: hidden;
margin: 0;
padding: 10;
filter:drop-shadow(0 5px 15px black);
}
#navbar-menu
{
display: inline-block;
text-align: center;
text-decoration: none;
list-style: none;
font-size: 25px;
margin: 0;
padding: 0;
color: white;
}
#open-button
{
color: white;
font-size: 50px;
padding-bottom: 25px;
padding-top: 25px;
}
#open-button:hover
{
color: #666;
}
.pimg1, .pimg2, .pimg3, .pimg4
{
position: relative;
opacity: 0.70;
background-position: center;
background-size: cover;
background-repeat: no-repeat;
/* fixed = parallax, scroll = normal */
background-attachment: fixed;
}
.pimg1
{
background-image:url('https://i.imgur.com/bHJ4vHL.jpg?1');
min-height: 100%;
}
.pimg2
{
background-image:url('https://images.pexels.com/photos/338711/pexels-photo-338711.jpeg?cs=srgb&dl=alcohol-alcoholic-alcoholic-beverage-338711.jpg&fm=jpg');
min-height: 400px;
}
.pimg3
{
background-image:url('https://images.pexels.com/photos/156114/pexels-photo-156114.jpeg?cs=srgb&dl=beef-bread-burger-156114.jpg&fm=jpg');
min-height: 400px;
}
.pimg4
{
background-image:url('https://images.pexels.com/photos/696218/pexels-photo-696218.jpeg?cs=srgb&dl=adult-bar-blur-696218.jpg&fm=jpg');
min-height: 400px;
}
.section
{
text-align: center;
padding: 50px 80px;
}
.section-light
{
background-color: #f4f4f4;
color: #666;
}
.section-dark
{
background-color: #282E34;
color: #DDD;
}
.ptext
{
position: absolute;
top: 50%;
width: 100%;
text-align: center;
color: #000;
font-size: 32px;
letter-spacing: 8px;
text-transform: uppercase;
}
.ptext .border
{
background-color: #111;
color: white;
padding: 20px;
}
Является ли использование наилучшей практики для этого?Пожалуйста, помогите!