-1
Good morning! I’m making a website and I’m a beginner. I’m having trouble with my responsive menu and footer. Well the problem of responsive menu is that the burger menu is having trouble clicking it does not open the options only opens if you click almost on the limit of it. And the problem with the footer is that it disappears on the mobile screen. Please help me. Follow the code of the index page.
<!doctype html>
<html lang="pt-br">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<link rel="stylesheet" href="css/bootstrap.min.css"
integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
<link rel="stylesheet"href="css/style.css">
<link rel="shortcut icon" href="imagens/favicon.ico" />
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
<title>Wolf Machine</title>
</head>
<body >
<header class="container-fluid">
<!--MENU-->
<nav id="menu" class=" navbar navbar-expand-md navbar-dark bg-dark">
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav mr-auto">
<li class="nav-item active"><a class="page-link" href="index.html">HOME</a></li>
<li class="nav-item"><a class="page-link" href="sobre/sobre.html">BANDA</a> </li>
<li class="nav-item"><a class="page-link" href="videos/videos.html">VÍDEOS</a></li>
<li class="nav-item"><a class="page-link" href="albuns/fotos.html">FOTOS</a></li>
<li class="nav-item"><a class="page-link" href="contato/faleconosco.php">CONTATO</a></li>
</ul>
</div>
<a class="navbar-brand" href="#"></a>
<button class="navbar-toggler" type="submit" data-toggle="collapse" data-target="#navbarSupportedContent"
aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="logos">
<a href="https://www.instagram.com/bandawolfmachine1933"target="_blank"><img src="imagens/ic_instagram.png"></a>
<a href="https://www.facebook.com/wolfmachineband" target="_blank"><img src="imagens/ic_facebook.png"></a>
<a href="https://www.youtube.com/channel/UCgTQD3hsartcobx-XvChAfg" target="_blank"><img src="imagens/ic_youtube.png"></a>
<img class="lobo-topo" src="imagens/logo_wolf_topo.png">
</div>
</nav>
</header>
<!--Banner-->
<div id="rotativo" class="container">
<div id="banner" class="carousel slide carousel-fade" data-ride="carousel">
<!--Indicadores-->
<ol class="carousel-indicators">
<li data-target="#banner" data-slide-to="0" class="active"></li>
<li data-target="#banner" data-slide-to="1"></li>
<li data-target="#banner" data-slide-to="2"></li>
<li data-target="#banner" data-slide-to="3"></li>
<li data-target="#banner" data-slide-to="4"></li>
<li data-target="#banner" data-slide-to="5"></li>
</ol>
<!--Slides-->
<div class="carousel-inner">
<div class="carousel-item active">
<img class="d-block w-100" src="imagens/foto_principal.png">
</div>
<div class="carousel-item">
<img class="d-block w-100" src="imagens/banner_wolf_1.png">
</div>
<div class="carousel-item">
<img class="d-block w-100" src="imagens/banner_wolf_2.png">
</div>
<div class="carousel-item">
<img class="d-block w-100" src="imagens/banner_wolf_3.png">
</div>
<div class="carousel-item">
<img class="d-block w-100" src="imagens/banner_wolf_4.png">
</div>
<div class="carousel-item">
<img class="d-block w-100" src="imagens/banner_wolf_5.png">
</div>
</div>
</div>
<!--contraladores-->
<a class="carousel-control-prev" href="#banner" role="button" data-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="sr-only">Anterior</span>
</a>
<a class="carousel-control-next" href="#banner" role="button" data-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="sr-only">Próximo</span>
</a>
</div>
<!--Video -->
<div class="container">
<h3 class="h3">Música autoral - Lobo Solto</h3>
</div>
<div id="video" class="embed-responsive embed-responsive-16by9">
<iframe id="videohome" class="embed-responsive-item" src="https://www.youtube.com/embed/e73PVzDVznA" frameborder="0"
allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
</div>
<!-- rodapé-->
<footer class="container-fluid mt-5">
<div class="container">
<div class=" row justify-content-center">
<div class="col-xs-12 col-md-6 d-none d-md-block text-center">
<p>©Copyright-Joice Santos</p>
<p class="pages"><a href="https://www.facebook.com/joice.santos.5832" target="_blank">Facebook</a>|
<a href="https://www.linkedin.com/in/joice-santos-a483036a" target="_blank">Linkedin</a></p>
<p>Design-João Amaral</p>
<p class="pages"><a href="https://www.behance.net/Ankhjoao" target="_blank">Portifólio</a></p>
</div>
</div>
</div>
</footer>
<!-- Optional JavaScript -->
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script src="https://code.jquery.com/jquery-3.4.1.slim.min.js"
integrity="sha384-J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/umd/popper.min.js"
integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
<script src="js/bootstrap.min.js"
integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6" crossorigin="anonymous"></script>
</body>
</html>
Thank you the footer worked... I don’t know what’s wrong with the menu. The menu is not having a focus on all of it, neither on my browser nor on mobile, only works if I click well on the right corner. Unfortunately this for end user does not look good.
– Joice Santos
and only this happening on the index page. after accessing the other tabs works perfectly.
– Joice Santos
Check on inspecting browser elements if you have any elements covering the menu.
– Sam