Header issue:
-
I can not leave the last button on the right side of the page, like a navbar toogle.
- Selects texts "disappear" by decreasing resolutions.
Problem in Footer:
- The items in the footer stand on top of each other as resolutions are decreased.
Note:
Responsiveness is both in the part of the container and in the part of the texts of the selects, because they "disappear" in smaller display ...
Prototype of how to stay:
Code:
<!DOCTYPEhtml><htmllang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<meta name="description" content="...">
<meta name="author" content="Thiago De Bonis Carvalho Saad Saud">
<link rel="stylesheet" href="css/bootstrap/bootstrap.css">
<link rel="stylesheet" href="css/stylesheet/colors.css">
<link rel="stylesheet" href="css/fontawesome/fontawesome-all.css">
<title>Document</title>
</head>
<body class="aliansce-bg-dark-grey">
<header>
<div class="container-fluid p-2">
<div class="d-flex flex-row">
<form action="" class="form-inline rounded bg-white">
<div class="col">
<!-- Indicadores Custom-Select -->
<div class="form-group">
<div class="input-group">
<label for="select-indicadores" class="input-group-text bg-transparent border-0">
<i class="fas fa-chart-line aliansce-text-grey"></i>
</label>
<select class="custom-select border-0" id="select-indicadores" required>
<option value="null" selected disabled>Escolha o Indicador</option>
<optgroup label="INDICADORES">
<option value="null">Vendas Absoluta</option>
</optgroup>
</select>
</div>
</div>
</div>
<div class="col">
<!-- Shopppings Custom-Select -->
<div class="form-group">
<div class="input-group">
<label for="select-shoppings" class="input-group-text bg-transparent border-0">
<i class="far fa-building" aliansce-text-grey></i>
</label>
<select class="custom-select border-0" id="select-shoppings" required>
<option value="null" selected disabled>Escolha o Shopping</option>
<optgroup label="RIO DE JANEIRO">
<option value="null">Bangu</option>
<option value="null">Boulevard Campos</option>
<option value="null">Carioca</option>
<option value="null">Caixas</option>
<option value="null">Passeio</option>
<option value="null">Pátio Alcântara</option>
<option value="null">Santa Cruz</option>
<option value="null">Grande Rio</option>
<option value="null">Leblon</option>
<option value="null">São Gonçalo</option>
<option value="null">Via Parque</option>
</optgroup>
<optgroup label="MINAS GERAIS">
<option value="null">Boulevard Belo Horizonte</option>
</optgroup>
<optgroup label="SÃO PAULO">
<option value="null">Boulevard Bauru</option>
<option value="null">Continental</option>
<option value="null">Santana Parque</option>
<option value="null">Praça Nova Araçatuba</option>
<option value="null">Santa Úrsula</option>
<option value="null">Taboão</option>
<option value="null">West Plaza</option>
</optgroup>
<optgroup label="ESPIRITO SANTO">
<option value="null">Boulevard Vila Velha</option>
</optgroup>
<optgroup label="SANTA CATARINA">
<option value="null">Floripa</option>
</optgroup>
<optgroup label="RIO GRANDE DO SUL">
<option value="null">Praça Nova Santa Maria</option>
</optgroup>
<optgroup label="MATO GROSSO">
<option value="null">Goiabeiras</option>
</optgroup>
<optgroup label="DISTRITO FEDERAL">
<option value="null">Boulevard Brasília</option>
</optgroup>
<optgroup label="BAHIA">
<option value="null">Boulevard Feira de Satana</option>
<option value="null">Boulevard Vitória da Conquista</option>
<option value="null">Bahia</option>
</optgroup>
<optgroup label="ALAGOAS">
<option value="null">Parque Maceió</option>
</optgroup>
<optgroup label="CEARÁ">
<option value="null">Parangaba</option>
</optgroup>
<optgroup label="PARÁ">
<option value="null">Boulevard Belém</option>
<option value="null">Parque Belém</option>
</optgroup>
</select>
</div>
</div>
</div>
<div class="col">
<!-- Data Custom-Select -->
<div class="form-group">
<div class="input-group">
<label for="select-data" class="input-group-text bg-transparent border-0">
<i class="far fa-calendar-alt aliansce-text-grey"></i>
</label>
<select class="custom-select border-0" id="select-data" required>
<option value="null" selected disabled>Escolha a Data</option>
</select>
</div>
</div>
</div>
<div class="col">
<!-- Visão Custom-Select -->
<div class="form-group">
<div class="input-group">
<label for="select-visao" class="input-group-text bg-transparent border-0">
<i class="far fa-eye aliansce-text-grey"></i>
</label>
<select class="custom-select border-0" id="select-visao" required>
<option value="null" selected disabled>Escolha a Visão</option>
<optgroup label="ABL">
<option value="null">Lazer</option>
<option value="null">Lojas Âncoras</option>
<option value="null">MegaLojas</option>
<option value="null">Satélite</option>
</optgroup>
<optgroup label="ABRASCE">
<option value="null">----</option>
</optgroup>
</select>
</div>
</div>
</div>
<div class="form-group">
<button type="button" class="btn btn-lg aliansce-bg-green text-white"><i class="fab fa-searchengin fa-lg"></i></button>
</div>
</form>
<div class="col ml-5" style="background-color: red">
<button type="button" class="btn btn-lg aliansce-bg-green text-white"><i class="fab fa-searchengin fa-lg"></i></button>
</div>
</div>
</div>
</header>
<!--Footer Navegação-->
<div class="fixed-bottom aliansce-bg-grey p-2">
<div class="container-fluid">
<div class="row">
<div class="col-2 d-flex">
<button type="button" class="btn btn-lg bg-transparent"><img src="img/logo/aliansce-icon.svg" alt="Aliansce Logo" class="img-fluid w-25 text-white"><span class="ml-2 text-white">SOBRE</span></button>
</div>
<div class="col-2 d-flex">
<button type="button" class="btn btn-lg bg-transparent"><i class="fas fa-chart-line aliansce-text-green"></i><span class="ml-2 text-white">NÚMEROS</span></button>
</div>
<div class="col-2 d-flex">
<button type="button" class="btn btn-lg bg-transparent "><i class="fas fa-shopping-bag aliansce-text-green"></i><span class="ml-2 text-white">MARCAS</span></button>
</div>
<div class="col-2 d-flex">
<button type="button" class="btn btn-lg bg-transparent "><i class="fas fa-camera aliansce-text-green"></i><span class="ml-2 text-white">GALERIA</span></button>
</div>
<div class="col-2 d-flex">
<button type="button" class="btn btn-lg bg-transparent "><i class="fab fa-accusoft aliansce-text-green"></i><span class="ml-2 text-white">PLANTA</span></button>
</div>
<div class="col-2 d-flex">
<button type="button" class="btn btn-lg bg-transparent "><i class="fas fa-map-marker-alt aliansce-text-green"></i><span class="ml-2 text-white">LOCAL</span></button>
</div>
</div>
</div>
</div>
<!-- Javascript Config -->
<script src="js/jquery/jquery.js"></script>
<script src="js/bootstrap/bootstrap.js"></script>
</body>
</html>