1
I’m creating a website that, when accessed by mobile, your horizontal menu is compressed (Collapse), as shown in the image below:
However, after I click on the menu symbol, the options appear above the page text and therefore it is not possible to click on them. Below I put an image of what happens:
What I would like to happen is that the green stripe expands, presenting the menu options and "push" the text from the home page down.
I am using version 4.3.1 of Bootstrap and my pages are composed of three sections, each with its corresponding file, one unique to the header (header.php), another to the content (home.php) and the last to the footer (footer.php). All these files are tied to a.php index..
Below, I place the code of each section.
index php.
<?php
include 'db.php';
include 'header.php';
if(isset($_GET['pagina'])){
$pagina = $_GET['pagina'];
}
else{
$pagina = 'home';
}
if($pagina == 'pesquisar'){
include 'pesquisar.php';
}
if($pagina == 'inicio'){
include 'views/home.php';
}
include 'footer.php';
header.php
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width-device-width, initial-scale=1">
<title></title>
<link rel="stylesheet" href="css/bootstrap.min.css">
</head>
<body>
<div class="container-fluid">
<div class="row bg">
<div class="col-12">
<nav class="navbar navbar-light navbar-expand-lg">
<a class="navbar-brand" href="?pagina=inicio">
<img src="img/logo2.png" width="200" height="40"
class="d-inline-block align-top">
</a>
<button class="navbar-toggler" type="button" data-toggle="collapse"
data-target="#nav1" aria-controls="nav1" aria-expanded="false" aria-label="Navegação Toggle">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="nav1">
<ul class="navbar-nav">
<li class="nav-item">
<a href="?pagina=inicio" class="nav-link">Início</a>
</li>
<li class="nav-item">
<a href="?pagina=quem_somos" class="nav-link">Saiba mais!</a>
</li>
<li class="nav-item">
<a href="?pagina=placar" class="nav-link">Placar</a>
</li>
<li class="nav-item">
<a href="?pagina=contato" class="nav-link">Contato</a>
</li>
<?php if (!$_SESSION['usuario'] || $nivel == membro) {} else { ?>
<li class="nav-item">
<a href="?pagina=pesquisar" class="nav-link"> Pesquisar</a>
</li>
<?php } ?>
<?php if (!$_SESSION['usuario']) {} else { ?>
<li class="nav-item">
<a href="?pagina=anunciar" class="nav-link"> Anunciar</a>
</li>
<?php } ?>
<?php if (!$_SESSION['usuario']) {} else { ?>
<li class="nav-item">
<a href="?pagina=perfil" class="nav-link"> Perfil</a>
</li> <?php } ?>
<?php if (!$_SESSION['usuario'] || $nivel == membro) {} else { ?>
<li class="nav-item">
<a href="?pagina=efigs" class="nav-link"> E-Figs</a>
</li> <?php } ?>
<?php if (!$_SESSION['usuario']) {} else { ?>
<li class="nav-item">
<a href="logout.php" class="nav-link"> Sair</a>
</li> <?php } ?>
</ul>
</div>
</nav>
</div>
</div>
</div>
<script src="js/jquery-3.2.1.min.js"></script>
<script src="js/popper.min.js"></script>
<script src="js/bootstrap.min.js"></script>
</body>
home php.
<html>
<head>
</head>
<body>
<div class="container">
<div class="row">
<div class="col-sm-6 order-1">
<?php if (!$_SESSION['usuario']) { ?>
<br>
<h1 align="left">Bemindo!</h1>
<p align="left">Aquirro!</p>
<p align="left">Noselas!</p>
<br>
<img src="img/intro.png" title="Como Funciona?" alt="Como Funciona?"
width="500"
height="300"
class="img-fluid">
<?php } else { ?>
<br>
<h2>Cfig.</h2>
<br>
<p>Leas.</p>
<br>
<p>Foara!</p>
<br>
<p>so:</p>
<br>
<div class="row" align="center">
<figure>
<img src="img/comum.png" title="Como Funciona?" alt="Como Funciona?"
width="100"
height="160">
<figcaption align="center">Comum</figcaption></figure>
<figure>
<img src="img/incomum.png" title="Como Funciona?" alt="Como Funciona?"
width="100"
height="160">
<figcaption align="center">Incomum</figcaption></figure>
<figure>
<img src="img/intermed.png" title="Como Funciona?" alt="Como Funciona?"
width="100"
height="160">
<figcaption align="center">Intermediário</figcaption></figure>
<figure>
<img src="img/rara.png" title="Como Funciona?" alt="Como Funciona?"
width="100"
height="160">
<figcaption align="center">Raro</figcaption></figure>
</div>
<?php } ?>
</div>
<div class="col-sm-6 order-2">
<?php if (!$_SESSION['usuario']) { ?>
<br><br>
<h2 align="center">Faça seu Login:</h2>
<br>
<form method="POST" action="login.php" align="center">
<input type="text" name="usuario" id="usuario" placeholder="E-mail">
<br><br>
<input type="password" name="senha" id="senha" placeholder="Senha">
<br><br>
<input type="submit" value="Login" name="login" id="login">
</form>
<br>
<p style="font-size:12px" align="center">Não possui cadastro? Clique <a href="?pagina=cadastro">aqui</a>!</p>
<?php } else { ?>
<br><br>
<h2>Inserir:</h2>
<br><br>
<form method="post" action="processa_dados.php" enctype="multipart/form-data">
<input type="file" name="imagem">
<input type="submit" value="Enviar">
<br>
</form>
<?php } ?>
</div>
</div>
</div>
</body>
footer.php
<html>
<head>
<style type="text/css">
div.bg{
background-color: darkseagreen;
height: 60px;
}
p.fonte{
font-size:10px;
}
</style>
</head>
<body>
<br>
</body>
<footer>
<div class="container-fluid">
<div class="row bg">
<div class="col" align="center">
<p class="fonte">Apoio:</p>
</div>
<div class="col" align="center">
<p class="fonte">Este site está em contínua melhoria</p>
</div>
<div class="col" align="center">
<p class="fonte">Contato:</p>
<br>
<p></p>
</div>
</div>
</div>
</footer>
Testing here your code already does it (see here). Where you are placing text that comes under the Nav?
– Sam
What would that class be
bg?– Sam
Dude put the code so at least we can simulate your problem, the way it is there has no way to answer you right...
– hugocsl
Hello, thanks for all the suggestions! I put more information in the question... Basically, the page is structured in an index page (index.php), divided into header, body and footer. The text below Nav is found in the home.php file, while the header is in header.php. Sam, about the bg class, I created it to make the bottom of the header green. I appreciate any suggestion to enrich the question... I’m still new to stackoverflow.
– Pedro Schimmelpfeng