1
我正在个人网站上工作，无法让汉堡包工作。汉堡包菜单无法正常工作
在移动设备中，它只是一行中的所有菜单选项，而不是像经典汉堡包外观那样不同的行。
最初，汉堡包根本没有工作，但我从网站添加/*******HAMBURGER FIX*********/部分，现在它正在工作，但正如我所说的，不正确。
html {
height: 100%;
}
body {
background-image: url('background.png');
background-size: cover;
background-position: center;
}
#content {
text-align: center;
text-shadow: 0px 4px 3px rgba(0, 0, 0, 0.4), 0px 8px 13px rgba(0, 0, 0, 0.1), 0px 18px 23px rgba(0, 0, 0, 0.1);
}
#const {
color: #FFFFF5;
font-weight: bold;
font-size: 5em;
}
hr {
width: 1000px;
border-top: 1px solid #f8f8f8;
border-bottom: 1px solid rgba(0, 0, 0, 0.2)
}
.social i {
padding-top: 100%;
font-size: 3em;
color: #cccccc;
}
.sections {
padding-top: 5%;
}
.sections .section-option i {
padding-top: 15px;
color: #999999;
font-size: 13em;
}
.logo {
font-size: 1.2em;
}
/*******HAMBURGER FIX*********/
@media (min-width: 991px) and (max-width: 768px) {
.navbar-collapse.collapse {
display: none !important;
}
.navbar-collapse.collapse.in {
display: block !important;
}
.navbar-header .collapse,
.navbar-toggle {
display: block !important;
}
.navbar-header {
float: none;
}
}<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<!-- jquery CDN -->
<script src="https://code.jquery.com/jquery-3.2.1.min.js" integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4=" crossorigin="anonymous"></script>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">
<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
<!-- font awesome CDN -->
<script src="https://use.fontawesome.com/7627dbb339.js"></script>
<title>Halil Süheyb Becerek</title>
</head>
<body>
<!-- start of the navbar -->
<nav class="navbar navbar-inverse">
<div class="container">
<div class="container-fluid">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#"><i class="fa fa-code logo" aria-hidden="true"></i> Halil Süheyb Becerek</a>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav">
<li class="active"><a href="#"><i class="fa fa-home" aria-hidden="true"></i> Home</a></li>
<li><a href="#"><i class="fa fa-pencil-square-o" aria-hidden="true"></i> Blog</a></li>
<li><a href="#"><i class="fa fa-github" aria-hidden="true"></i> Projects</a></li>
<li><a href="#"><i class="fa fa-briefcase" aria-hidden="true"></i> Work/ <i class="fa fa-university" aria-hidden="true"></i> Education History</a></li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li><a href="#"><i class="fa fa-user-circle-o" aria-hidden="true"></i> About</a></li>
<li><a href="#"><i class="fa fa-envelope-o" aria-hidden="true"></i> Contact</a></li>
</ul>
</div>
<!-- /.navbar-collapse -->
</div>
<!-- /.container-fluid -->
</div>
</nav>
<!-- end of the navbar -->
</div>
</div>
<div class="container">
<div id="content">
<div class="row">
<!-- <div id="const" class="col-xs-12">
SITE UNDER CONSTRUCTION
<div class="progress">
<div class="progress-bar progress-bar-success progress-bar-striped active" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 10%;">
10%
</div>
</div>
</div> -->
<div class="sections">
<div class="col-lg-6 col-xs-12 section-option"><a href=""><i class="fa fa-pencil-square-o" aria-hidden="true"></i></a></div>
<div class="col-lg-6 col-xs-12 section-option"><a href=""><i class="fa fa-university" aria-hidden="true"></i></a></div>
<div class="col-lg-6 col-xs-12 section-option"><a href=""><i class="fa fa-user-circle-o" aria-hidden="true"></i></a></div>
<div class="col-lg-6 col-xs-12 section-option"><a href=""><i class="fa fa-envelope-o" aria-hidden="true"></i></a></div>
</div>
</div>
<div class="row">
<div class="social">
<div class="col-xs-2"><a href="#"><i class="fa fa-facebook-official" aria-hidden="true"></i></a></div>
<div class="col-xs-2"><a href="#"><i class="fa fa-twitter-square" aria-hidden="true"></i></a></div>
<div class="col-xs-2"><a href="#"><i class="fa fa-instagram" aria-hidden="true"></i></a></div>
<div class="col-xs-2"><a href="#"><i class="fa fa-youtube-square" aria-hidden="true"></i></a></div>
<div class="col-xs-2"><a href="#"><i class="fa fa-linkedin-square" aria-hidden="true"></i></a></div>
<div class="col-xs-2"><a href="#"><i class="fa fa-github-square" aria-hidden="true"></i></a></div>
</div>
</div>
</div>
</div>
</body>
</html>
好，感谢帮助，但仍然汉堡包没有在Chrome的移动测试模式下工作。 – walrus
你有没有添加元视口标签 –
添加解决了这个问题也重新调整了一些图标的大小谢谢!! – walrus