0
Fondamentalement, mon site utilise Fullpage.js et Bootstrap ensemble, mais le problème est que le bouton de menu qui est conçu pour les périphériques mobiles ne s'effondre pas. Et quand je supprime tous les paramètres de Fulpage.js de la page, ça fonctionne très bien!Pourquoi le bouton de menu de navigation Bootstrap pour les périphériques mobiles ne s'effondre pas
Voici mon site afin que vous puissiez le tester et minimiser le site à sm puis vous remarquerez que le bouton de la barre de navigation ne s'effondre pas.
Donc, si vous avez une idée à ce sujet ou d'une solution qui résout ce problème, laissez-moi savoir ...
Voici le fullcode de mon index.php:
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta name="author" content="Alvaro Trigo Lopez" />
<meta name="description" content="fullPage fixed header and footer." />
<meta name="keywords" content="fullpage,jquery,demo,screen,fixed, header,footer, absolute, positioned,css" />
<meta name="Resource-type" content="Document" />
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Gooyanet</title>
<link href="css/bootstrap.css" type="text/css" rel="stylesheet"/>
<link href="examples.css" type="text/css" rel="stylesheet"/>
<link href="style.css" type="text/css" rel="stylesheet"/>
<link href="jquery.fullPage.css" type="text/css" rel="stylesheet"/>
<link href="examples.css" type="text/css" rel="stylesheet"/>
<link href="jquery.fullPage.css" type="text/css" rel="stylesheet"/>
<style>
h1{
font-size: 5em;
font-family: arial,helvetica;
color: #fff;
margin:0;
padding:0;
}
.intro p{
color: #fff;
}
.section{
text-align:center;
}
#header, #footer{
position:fixed;
height: 50px;
display:block;
width: 100%;
z-index:9;
text-align:center;
color: #f2f2f2;
padding: 20px 0 0 0;
}
#header{
top:0px;
}
#footer{
bottom:0px;
}
#infoMenu {
bottom: 80px;
}
#infoMenu li a {
color: #fff;
z-index: 999;
}
</style>
<!--[if IE]>
<script type="text/javascript">
var console = { log: function() {} };
</script>
<![endif]-->
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="vendors/jquery.slimscroll.min.js" type="text/javascript"></script>
<script src="vendors/jquery.easings.min.js"></script>
<script src="examples.js" type="text/javascript"></script>
<script src="vendors/jquery.slimscroll.min.js" type="text/javascript"></script>
<script src="jquery.fullPage.js" type="text/javascript"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.9.1/jquery-ui.min.js"></script>
<script src="vendors/scrolloverflow.js" type="text/javascript"></script>
<script src="jquery.fullPage.js" type="text/javascript"></script>
<script src="examples.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function() {
$('#fullpage').fullpage({
anchors: ['firstPage', 'secondPage', '3rdPage'],
sectionsColor: ['#C63D0F', '#1BBC9B', '#7E8F7C'],
css3: true
});
});
</script>
</head>
<body>
<div id="header">
<nav class="navbar navbar-default navbar-fixed-top BKoodakBold" id="topMenu">
<div class="container">
<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="http://www.gooyanet.com">Gooyanet</a>
</div>
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav navbar-right">
<li ><a href="mobile.php">دانلود اپلیکیشن <span class="glyphicon glyphicon-download-alt"></span></a></li>
<li><a href="guides.php">راهنمای سایت <span class="glyphicon glyphicon-oil"></span></a></li>
<li><a href="aboutus.php">درباره ما <span class="glyphicon glyphicon-equalizer"></span></a></li>
<li><a href="login.php">ورود به دنیای گویانت <span class="glyphicon glyphicon-user"></span></a></li>
<li><a href="signup.php">ثبت نام در گویانت <span class="glyphicon glyphicon-registration-mark"></span></a></li>
</ul>
</div>
</div>
</nav>
</div>
<div id="footer">
<footer class="footer">
<div class="container">
<p class="text-muted">Designed & Developed By <a href="http://www.daygostar.com">Daygostar Inc</a></p>
</div>
</footer>
</div>
<div id="fullpage">
<div class="section">
<iframe src="Round.html" frameborder="0" scrolling="no" style="width:100%;height:100% !important;"></iframe>
</div>
</div>
<script src="js/bootstrap.min.js"></script>
</body>
</html>
Et voici l'écran d'impression image que vous pouvez comprendre quel bouton je parle:
