1
Ich arbeite auf meiner persönlichen Website und konnte nicht Hamburger arbeiten.Hamburger Menü funktioniert nicht richtig
Direkt im mobilen, es ist nur alle Menüoptionen in einer Zeile, nicht in verschiedenen Reihen wie klassische Hamburger aussehen.
Zunächst, Hamburger hat überhaupt nicht funktioniert, aber ich habe /*******HAMBURGER FIX*********/ Teil von einer Website hinzugefügt und jetzt funktioniert es aber wie gesagt, nicht richtig. entfernen, zwei Schließen div Tags nach nav Tag
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>
Nun, vielen Dank für die Hilfe, aber immer noch Hamburger funktioniert nicht in mobilen Testmodus des Chrom. – walrus
haben Sie Meta Viewport Tag –
hinzugefügt löste das Problem auch skaliert die Größe einiger Symbole Danke !! – walrus