Так что я немного переключаю свои передачи здесь.Я создал отзывчивую навигационную панель для своего меню, но, к сожалению, она не показывает заголовок в строке меню, когда она находится в мобильной форме.Для обновления панели навигации я скопировал и вставил коды из W3schools, а затем немного изменил их.Я планирую изменить цвет позже.
Сейчас единственная проблема, с которой я столкнулся, заключается в том, что fa fa-bars не отображается, когда я перехожу в адаптивный режим. Почему это? Вот откуда я взял отзывчивую навигационную панель.https://www.w3schools.com/howto/howto_js_topnav_responsive.asp.
Скажи мне, что мне не хватает.Благодарю. Вы можете запустить фрагмент кода ниже, чтобы увидеть, о чем я говорю.
function myFunction() {
var x = document.getElementById("myTopnav");
if (x.className === "topnav") {
x.className += " responsive";
} else {
x.className = "topnav";
}
}
.topnav {
overflow: hidden;
background-color: #333;
}
.topnav a {
float: left;
display: block;
color: #f2f2f2;
text-align: center;
padding: 14px 16px;
text-decoration: none;
font-size: 17px;
}
.topnav a:hover {
background-color: #ddd;
color: black;
}
.active {
background-color: #4CAF50;
color: white;
}
.topnav .icon {
display: none;
}
@media screen and (max-width: 600px) {
.topnav a:not(:first-child) {
display: none;
}
.topnav a.icon {
float: right;
display: block;
}
}
@media screen and (max-width: 600px) {
.topnav.responsive {
position: relative;
}
.topnav.responsive a.icon {
position: absolute;
right: 0;
top: 0;
}
.topnav.responsive a {
float: none;
display: block;
text-align: left;
}
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Homepage</title>
<link rel="stylesheet" type="text/css" href="main.css">
<script src="script.js"></script>
</head>
<body>
<!-- The navigation menu -->
<div class="topnav" id="myTopnav">
<a href="#home" class="active">Home</a>
<a href="about.html">About Me</a>
<a href="portfolio.html">Portfolio</a>
<a href="contact.html">Contact</a>
<a href="javascript:void(0);" class="icon" onclick="myFunction()">
<i class="fa fa-bars"></i>
</a>
</div>
</body>
</html>
ДЛЯ ОТВЕТА
function myFunction() {
var x = document.getElementById("myTopnav");
if (x.className === "topnav") {
x.className += " responsive";
} else {
x.className = "topnav";
}
}
.topnav {
overflow: hidden;
background-color: #333;
}
.topnav a {
float: left;
display: block;
color: #f2f2f2;
text-align: center;
padding: 14px 16px;
text-decoration: none;
font-size: 17px;
}
.topnav a:hover {
background-color: #ddd;
color: black;
}
.active {
background-color: #4CAF50;
color: white;
}
.topnav .icon {
display: none;
}
@media screen and (max-width: 600px) {
.topnav a:not(:first-child) {
display: none;
}
.topnav a.icon {
float: right;
display: block;
}
}
@media screen and (max-width: 600px) {
.topnav.responsive {
position: relative;
}
.topnav.responsive a.icon {
position: absolute;
right: 0;
top: 0;
}
.topnav.responsive a {
float: none;
display: block;
text-align: left;
}
}
/* This is the part that messed up my styling for my home page which
which I previously was pleased with before. */
.summary {
min-height: 75vh;
max-width: 2000px;
display: flex;
align-items: center;
justify-content: center;
}
.profilePicture {
padding: 2rem;
}
.profileSummary {
max-width: 400px;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Homepage</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" type="text/css" href="main.css">
<script src="script.js"></script>
</head>
<body>
<div class="topnav" id="myTopnav">
<a href="#home" class="active">Home</a>
<a href="about.html">About Me</a>
<a href="portfolio.html">Portfolio</a>
<a href="contact.html">Contact</a>
<a href="javascript:void(0);" class="icon" onclick="myFunction()">
<i class="fa fa-bars"></i>
</a>
</div>
<span>
<div class="summary">
<div class="profilePicture">
<img src="https://ih1.redbubble.net/image.464384650.8618/flat,550x550,075,f.jpg" style="width: 170px; height: 170px; border-radius:50%;">
</div>
<div class="profileSummary">
Attentive alas because yikes due shameful ouch much kookaburra cantankerously up unbridled far vulnerably climbed aristocratically hired brusque fox said the therefore terrier scallop innocent on goodness mongoose woolly showed insistently
and.
</div>
</div>
</span>
</body>
</html>