Iniciando no php, tenho uma página onde lista um datatable e nela inclui uma outra onde consta somente o menu, o preblema é que quando inclui o menu "include("menu.php") o itens do menu lateral expande mas não recolhe, e quando abro a pg do menu separada do datatable ele funciona perfeitamente. abaixo segue os código. me ajudem a resolver este problema.
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<!-- Incluir todos os plugins compilados (abaixo) ou incluir arquivos individuais conforme necessário -->
<script src="js/bootstrap.min.js"></script>
<script type="text/javascript">
$('#exampleModal').on('show.bs.modal', function (event) {
var button = $(event.relatedTarget); // Button that triggered the modal
var recipient = button.data('whatever'); // Extract info from data-* attributes
var recipientnome = button.data('whatevernome');
var recipientemail = button.data('whateveremail');
var recipientsalario = button.data('whateversalario');
var recipientidade = button.data('whateveridade');
var recipientnivel = button.data('whatevernivel');
var recipientimagem = button.data('whateverimagem');
// Se necessário, você pode iniciar uma solicitação AJAX aqui (e depois fazer a atualização em um callback).
//Atualiza o conteúdo do modal. Usaremos jQuery aqui, mas você pode usar uma biblioteca de vinculação de dados ou outros métodos.
var modal = $(this);
modal.find('.modal-title').text('ID ' + recipient);
modal.find('#id-curso').val(recipient);
modal.find('#recipient-name').val(recipientnome);
modal.find('#recipient-email').val(recipientemail);
modal.find('#recipient-salario').val(recipientsalario);
modal.find('#recipient-idade').val(recipientidade);
modal.find('#recipient-nivel').val(recipientnivel);
modal.find('#recipient-imagem').val(recipientimagem);
});
</script>
<script type="text/javascript">
function deleteUser(userId) {
if (confirm("Deseja realmente apagar este usuário?")) {
window.location.href = 'apagar.php?id=' + userId;
}
}
</script>
#sidebar ul li a {
padding: 10px;
font-size: 1.1em;
display: block;
}
#sidebar ul li a:hover {
color: #f0a80e;
background: #fff;
}
#sidebar ul li a i {
margin-right: 10px;
}
#sidebar ul li.active > a, a[aria-expanded="true"] {
color: #fff;
background: #353536;
}
Pergunta
Ricardo_Soares
Iniciando no php, tenho uma página onde lista um datatable e nela inclui uma outra onde consta somente o menu, o preblema é que quando inclui o menu "include("menu.php") o itens do menu lateral expande mas não recolhe, e quando abro a pg do menu separada do datatable ele funciona perfeitamente. abaixo segue os código. me ajudem a resolver este problema.
1º menu.php
<!DOCTYPE html>
<html lang="pt-br">
<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">
<link rel="shortcut icon" href="/img/pngwing.com.png">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="node_modules/bootstrap/dist/js/bootstrap.bundle.min.js"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.10.3/font/bootstrap-icons.css">
<title>Escola Bíblica</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://code.jquery.com/jquery-1.12.0.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="/js/Aula30.js" defer></script>
<link rel="stylesheet" href="./css/style4.css">
<link href="../Bootstrap 5/bootstrap-5.3.0-alpha1-examples/bootstrap-5.3.0-alpha1-examples/features/features.css"
rel="stylesheet">
</head>
<style>
#icon-grid {
width: 100%;
height: auto;
}
#menu-superior {
margin-top: -15px;
margin-left: -18px;
width: 100%;
}
#corpo-tabela {
margin-top: -30px;
margin-left: -18px;
}
#tabela {
width: auto;
margin-top: -30px;
}
#text-corp {
width: 100%;
}
.bd-placeholder-img {
font-size: 1.125rem;
text-anchor: middle;
-webkit-user-select: none;
-moz-user-select: none;
user-select: none;
}
@media (min-width: 768px) {
.bd-placeholder-img-lg {
font-size: 3.5rem;
}
}
.b-example-divider {
height: 3rem;
background-color: rgba(0, 0, 0, 0.1);
border: solid rgba(0, 0, 0, 0.15);
border-width: 1px 0;
box-shadow: inset 0 0.5em 1.5em rgba(0, 0, 0, 0.1),
inset 0 0.125em 0.5em rgba(0, 0, 0, 0.15);
}
.b-example-vr {
flex-shrink: 0;
width: 1.5rem;
height: 100vh;
}
.bi {
vertical-align: -0.125em;
fill: currentColor;
}
.nav-scroller {
position: relative;
z-index: 2;
height: 2.75rem;
overflow-y: hidden;
}
.nav-scroller .nav {
display: flex;
flex-wrap: nowrap;
padding-bottom: 1rem;
margin-top: -1px;
overflow-x: auto;
text-align: center;
white-space: nowrap;
-webkit-overflow-scrolling: touch;
}
</style>
<body>
<div class="wrapper">
<!-- Sidebar Holder -->
<nav class="sidebar-header" id="sidebar">
<div class="sidebar-header">
<h3>Instituto Servos</h3>
<strong>EBD</strong>
<h3>Escola Bíblica Dominical</h3>
</div>
<ul class="list-unstyled components">
<li>
<a href="#pageSubmenu1" data-toggle="collapse" aria-expanded="false">
<i class="bi bi-archive"></i>Secretaria</a>
<ul class="collapse list-unstyled" id="pageSubmenu1">
<li><a href="form.html">Matrícula</a></li>
<li><a href="listar_matric.html">Matriculados</a></li>
<li><a href="#">Financeiro</a></li>
<li><a href="#">Boletim</a></i></li>
<li><a href="#">Contato</a></li>
<li><a href="#">Certificados</a></li>
</ul>
</li>
<li>
<a href="#homeSubmenu" data-toggle="collapse" aria-expanded="false">
<i class="bi bi-person-workspace"></i>Área do Aluno</a>
<ul class="collapse list-unstyled" id="homeSubmenu">
<li><a href="indexebd.html">Cadastrar</a></li>
<li><a href="indexebd.html">Editar</a></li>
<li><a href="indexteol.html">Resultado</a></li>
</ul>
</li>
<li>
<a href="#homeSubmenu1" data-toggle="collapse" aria-expanded="false">
<i class="bi bi-building-fill"></i>Classes</a>
<ul class="collapse list-unstyled" id="homeSubmenu1">
<li><a href="pageModel.html">Adulto</a></li>
<li><a href="indexteol.html">Jovens</a></li>
<li><a href="indexCapel.html">Adolecentes</a></li>
<li><a href="#">Infantil</a></li>
</ul>
</li>
<li>
<a href="#pageSubmenu" data-toggle="collapse" aria-expanded="false">
<i class="bi bi-book"></i>Revistas</a>
<ul class="collapse list-unstyled" id="pageSubmenu">
<li><a href="#">2023</a></li>
<li><a href="#">2022</a></li>
<li><a href="#">2021</a></li>
<li><a href="#">2020</a></li>
<li><a href="#">2019</a></li>
<li><a href="#">2018</a></li>
<li><a href="#">2017</a></li>
<li><a href="#">2016</a></li>
<li><a href="#">2015</a></li>
<li><a href="#">2014</a></li>
<li><a href="#">2013</a></li>
<li><a href="#">2012</a></li>
<li><a href="#">2011</a></li>
<li><a href="#">2010</a></li>
<li><a href="#">2009</a></li>
<li><a href="#">2008</a></li>
<li><a href="#">2007</a></li>
</ul>
</li>
<li>
<a href="#pageSubmenu2" data-toggle="collapse" aria-expanded="false">
<i class="bi bi-book-half"></i>Outros Temas</a>
<ul class="collapse list-unstyled" id="pageSubmenu2">
<li><a href="#">Fé</a></li>
<li><a href="#">Santidade</a></li>
<li><a href="#">Dinheiro</a></li>
<li><a href="#">Vestes</a></li>
<li><a href="#">Relacionamentos</a></li>
<li><a href="#">Trabalho</a></li>
<li><a href="#">Obras</a></li>
<li><a href="#">Pecado</a></li>
<li><a href="#">Graça</a></li>
<li><a href="#">Lei</a></li>
<li><a href="#">Palavra</a></li>
<li><a href="#">Morte</a></li>
<li><a href="#">Salvação</a></li>
<li><a href="#">Juízo</a></li>
<li><a href="#">Arrebtamento</a></li>
<li><a href="#">Salmos</a></li>
<li><a href="#">Torá</a></li>
</ul>
</li>
<li>
<a href="#">
<i class="bi bi-link-45deg"></i>
Portfolio
</a>
</li>
<li>
<a href="#">
<i class="bi bi-paperclip"></i>
FAQ
</a>
</li>
<li>
<a href="#">
<i class="glyphicon glyphicon-send"></i>Contato</a>
</li>
</ul>
<ul class="list-unstyled CTAs">
<li>
<a href="https://bootstrapious.com/tutorial/files/sidebar.zip" class="download">Download source</a>
</li>
<li>
<a href="https://bootstrapious.com/p/bootstrap-sidebar" class="article">Back to article</a>
</li>
</ul>
</nav>
<div id="content">
<nav class="navbar navbar-default col-11" id="menu-superior">
<div class="container d-inline-block">
<div class="navbar-header">
<button type="button" id="sidebarCollapse" class="btn btn-info navbar-btn">
<i class="glyphicon glyphicon-align-left"></i>
<span>Menu Lateral</span>
</button>
</div>
<div class="collapse navbar-collapse me-2 p-1" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav navbar-right d-lg-inline-block m-1">
<li><a href="#">Home</a></li>
<li><a href="#">Cursos</a></li>
<li><a href="#">Contato</a></li>
<li><a type="button" data-toggle="modal" data-target="#cadastrarModal">
Cadastrar
</a></li>
<li><a href="entrar_aluno.html">Sou Aluno</a></li>
<li><a href="entrar_professor.html">Sou Professor</a></li>
</ul>
</div>
</div>
</nav>
<script src="https://code.jquery.com/jquery-3.x.x.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
<script src="https://cdn.datatables.net/1.10.21/js/jquery.dataTables.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"
integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa"
crossorigin="anonymous"></script>
<script type="text/javascript">
$(document).ready(function () {
$('#sidebarCollapse').on('click', function () {
$('#sidebar').toggleClass('active');
});
});
</script>
</body>
</html>
2º código listar_usuarios.php
<!DOCTYPE html>
<html lang="pt-BR">
<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">
<link rel="shortcut icon" href="/img/pngwing.com.png">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="node_modules/bootstrap/dist/js/bootstrap.bundle.min.js"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.10.3/font/bootstrap-icons.css">
<title>Escola Bíblica</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://code.jquery.com/jquery-1.12.0.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="/js/Aula30.js" defer></script>
<link rel="stylesheet" href="./css/style4.css">
<link href="../Bootstrap 5/bootstrap-5.3.0-alpha1-examples/bootstrap-5.3.0-alpha1-examples/features/features.css"
rel="stylesheet">
</head>
<?php
include_once("conexao.php");
if (isset($_FILES["imagem"]) && !empty($_FILES["imagem"])) {
move_uploaded_file($_FILES["imagem"]["tmp_name"], "./img/" . $_FILES["imagem"]["name"]);
echo "Update realizado com sucesso!";
}
$result_cursos = "SELECT * FROM usuarios";
$resultado_cursos = mysqli_query($conn, $result_cursos);
?>
<style>
.nomecoluna {
display: flex;
width: auto;
padding: 0px;
font-size: 1.5rem;
}
.codigo {
margin-left: 10px;
}
img {
width: 30px;
}
</style>
<body>
<?php
include("menu.php")
?>
<div class="container theme-showcase" role="main">
<div class="page-header">
<h1>Listar Usuarios</h1>
</div>
<div class="row">
<div class="col-md-12">
<table class="table table-striped table-hover display" style="width:100%">
<thead>
<tr>
<th>Id</th>
<th>Nome</th>
<th>E-mail</th>
<th>Salário</th>
<th>Idade</th>
<th>Nível</th>
<th>Foto</th>
<th>Ação</th>
</tr>
</thead>
<tbody>
<?php while ($rows_cursos = mysqli_fetch_assoc($resultado_cursos)) { ?>
<tr>
<td>
<?php echo $rows_cursos['id']; ?>
</td>
<td>
<?php echo $rows_cursos['nome']; ?>
</td>
<td>
<?php echo $rows_cursos['email']; ?>
</td>
<td>
<?php echo $rows_cursos['salario']; ?>
</td>
<td>
<?php echo $rows_cursos['idade']; ?>
</td>
<td>
<?php echo $rows_cursos['nivel']; ?>
</td>
<td><img src="<?php echo $rows_cursos['imagem']; ?>" alt="Imagem do usuário"
style="width: 50px"></td>
<td>
<button type="button" class="btn btn-xs btn-primary" data-toggle="modal"
data-target="#myModal<?php echo $rows_cursos['id']; ?>">Visualizar</button>
<button type="button" class="btn btn-xs btn-warning" data-toggle="modal"
data-target="#exampleModal" data-whatever="<?php echo $rows_cursos['id']; ?>"
data-whatevernome="<?php echo $rows_cursos['nome']; ?>"
data-whateveremail="<?php echo $rows_cursos['email']; ?>"
data-whateversalario="<?php echo $rows_cursos['salario']; ?>"
data-whateveridade="<?php echo $rows_cursos['idade']; ?>"
data-whatevernivel="<?php echo $rows_cursos['nivel']; ?>"
data-whateverimagem="<?php echo $rows_cursos['imagem']; ?>">Editar</button>
<button type="button" class="btn btn-xs btn-danger"
onclick="deleteUser(<?php echo $rows_cursos['id']; ?>)">Apagar</button>
</td>
</tr>
<!-- Inicio Modal -->
<div class="modal fade" id="myModal<?php echo $rows_cursos['id']; ?>" tabindex="-1"
role="dialog" aria-labelledby="myModalLabel">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
<h4 class="modal-title text-center" id="myModalLabel">Nome:
<?php echo $rows_cursos['nome']; ?>
</h4>
</div>
<div class="modal-body col-6">
<div class="nomecoluna">id:<p class="codigo">
<?php echo $rows_cursos['id']; ?>
</p>
</div>
<div class="nomecoluna">Nome:<p class="codigo">Nome:
<?php echo $rows_cursos['nome']; ?>
</p>
</div>
<div class="nomecoluna">E-mail:<p class="codigo">
<?php echo $rows_cursos['email']; ?>
</p>
</div>
<div class="nomecoluna">Salário:<p class="codigo">
<?php echo $rows_cursos['salario']; ?>
</p>
</div>
<div class="nomecoluna">Idade:<p class="codigo">
<?php echo $rows_cursos['idade']; ?>
</p>
</div>
<div class="nomecoluna">Nível de Acesso:<p class="codigo">
<?php echo $rows_cursos['nivel']; ?>
</p>
</div>
<div class="nomecoluna">Foto:<p class="codigo"><img
src="<?php echo $rows_cursos['imagem']; ?>" alt=""></p>
</div>
</div>
</div>
</div>
</div>
<?php } ?>
</tbody>
</table>
</div>
</div>
</div>
<div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span
aria-hidden="true">×</span></button>
<h4 class="modal-title" id="exampleModalLabel">Curso</h4>
</div>
<div class="modal-body">
<form method="POST" action="http://localhost/processa.php" enctype="multipart/form-data">
<div class="form-group">
<label for="recipient-name" class="control-label">Nome:</label>
<input name="nome" type="text" class="form-control" id="recipient-name">
</div>
<div>
<label for="recipient-email" class="control-label">E-mail:</label>
<input name="email" type="email" class="form-control" id="recipient-email">
</div>
<div>
<label for="recipient-name" class="control-label">Salário:</label>
<input name="salario" type="number" class="form-control" id="recipient-salario">
</div>
<div>
<label for="recipient-idade" class="control-label">Idade:</label>
<input name="idade" type="text" class="form-control" id="recipient-idade">
</div>
<div>
<label for="recipient-nivel" class="control-label">Nível:</label>
<input name="nivel" type="number" class="form-control" id="recipient-nivel">
</div>
<label>Selecione Imagem</label>
<input type="file" name="imagem" accept="image/*" class="form-control">
<button type="submit" class="btn btn-primary">Upload Imagem</button>
<input name="id" type="hidden" class="form-control" id="id-curso" value="">
<button type="button" class="btn btn-success" data-dismiss="modal">Cancelar</button>
<button type="submit" class="btn btn-danger">Alterar</button>
</form>
</div>
</div>
</div>
</div>
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<!-- Incluir todos os plugins compilados (abaixo) ou incluir arquivos individuais conforme necessário -->
<script src="js/bootstrap.min.js"></script>
<script type="text/javascript">
$('#exampleModal').on('show.bs.modal', function (event) {
var button = $(event.relatedTarget); // Button that triggered the modal
var recipient = button.data('whatever'); // Extract info from data-* attributes
var recipientnome = button.data('whatevernome');
var recipientemail = button.data('whateveremail');
var recipientsalario = button.data('whateversalario');
var recipientidade = button.data('whateveridade');
var recipientnivel = button.data('whatevernivel');
var recipientimagem = button.data('whateverimagem');
// Se necessário, você pode iniciar uma solicitação AJAX aqui (e depois fazer a atualização em um callback).
//Atualiza o conteúdo do modal. Usaremos jQuery aqui, mas você pode usar uma biblioteca de vinculação de dados ou outros métodos.
var modal = $(this);
modal.find('.modal-title').text('ID ' + recipient);
modal.find('#id-curso').val(recipient);
modal.find('#recipient-name').val(recipientnome);
modal.find('#recipient-email').val(recipientemail);
modal.find('#recipient-salario').val(recipientsalario);
modal.find('#recipient-idade').val(recipientidade);
modal.find('#recipient-nivel').val(recipientnivel);
modal.find('#recipient-imagem').val(recipientimagem);
});
</script>
<script type="text/javascript">
function deleteUser(userId) {
if (confirm("Deseja realmente apagar este usuário?")) {
window.location.href = 'apagar.php?id=' + userId;
}
}
</script>
</body>
</html>
3º stylo.css
/*
DEMO STYLE
*/
@import "https://fonts.googleapis.com/css?family=Poppins:300,400,500,600,700";
body {
font-family: 'Poppins', sans-serif;
background: #fafafa;
}
p {
font-family: 'Poppins', sans-serif;
font-size: 1.1em;
font-weight: 300;
line-height: 1.7em;
color: #999;
}
a, a:hover, a:focus {
color: inherit;
text-decoration: none;
transition: all 0.3s;
}
.navbar {
padding: 15px 10px;
background: #fff;
border: none;
border-radius: 0;
margin-bottom: 40px;
box-shadow: 1px 1px 3px rgba(0, 0, 0, 0.1);
}
.navbar-btn {
box-shadow: none;
outline: none !important;
border: none;
}
.line {
width: 100%;
height: 1px;
border-bottom: 1px dashed #ddd;
margin: 40px 0;
}
i, span {
display: inline-block;
}
/* ---------------------------------------------------
SIDEBAR STYLE
----------------------------------------------------- */
.wrapper {
display: flex;
align-items: stretch;
}
#sidebar {
min-width: 250px;
max-width: 250px;
background: #050505;
color: #fff;
transition: all 0.3s;
}
#sidebarCollapse{
color: #f9f9ff;
background-color: #050505;
}
#sidebarCollapse:hover{
background-color: #f78707;
color: #050505;
}
#sidebar.active {
min-width: 80px;
max-width: 80px;
text-align: center;
}
#sidebar.active .sidebar-header h3, #sidebar.active .CTAs {
display: none;
}
#sidebar.active .sidebar-header strong {
display: block;
}
#sidebar ul li a {
text-align: left;
}
#sidebar.active ul li a {
padding: 20px 10px;
text-align: center;
font-size: 0.85em;
}
#sidebar.active ul li a i {
margin-right: 0;
display: block;
font-size: 1.8em;
margin-bottom: 5px;
}
#sidebar.active ul ul a {
padding: 10px !important;
}
#sidebar.active a[aria-expanded="false"]::before, #sidebar.active a[aria-expanded="true"]::before {
top: auto;
bottom: 5px;
right: 50%;
-webkit-transform: translateX(50%);
-ms-transform: translateX(50%);
transform: translateX(50%);
}
#sidebar .sidebar-header {
padding: 20px;
background: #0c0c0c;
}
#sidebar .sidebar-header strong {
display: none;
font-size: 1.8em;
}
#sidebar ul.components {
padding: 20px 0;
border-bottom: 1px solid #ec680f;
}
#sidebar ul li a {
padding: 10px;
font-size: 1.1em;
display: block;
}
#sidebar ul li a:hover {
color: #f0a80e;
background: #fff;
}
#sidebar ul li a i {
margin-right: 10px;
}
#sidebar ul li.active > a, a[aria-expanded="true"] {
color: #fff;
background: #353536;
}
a[data-toggle="collapse"] {
position: relative;
}
a[aria-expanded="false"]::before, a[aria-expanded="true"]::before {
content: '\e259';
display: block;
position: absolute;
right: 20px;
font-family: 'Glyphicons Halflings';
font-size: 0.6em;
}
a[aria-expanded="true"]::before {
content: '\e260';
}
ul ul a {
font-size: 0.9em !important;
padding-left: 30px !important;
background: #58585a;
}
ul.CTAs {
padding: 20px;
}
ul.CTAs a {
text-align: center;
font-size: 0.9em !important;
display: block;
border-radius: 5px;
margin-bottom: 5px;
}
a.download {
background: #fff;
color: #545557;
}
a.article, a.article:hover {
background: #2d2d30 !important;
color: #fff !important;
}
.navbar.navbar-default{
background-color: #2a2a2b;
color: #999;
}
#bs-example-navbar-collapse-1 ul li{
background-color: #000000;
}
#bs-example-navbar-collapse-1 ul li a{
color: #ddd;
}
#bs-example-navbar-collapse-1 a:hover{
background-color: #f78707;
color: #050505;
transition: all 0.3s;
}
/* ---------------------------------------------------
CONTENT STYLE
----------------------------------------------------- */
#content {
padding: 20px;
min-height: 100vh;
transition: all 0.3s;
}
/* ---------------------------------------------------
MEDIAQUERIES
----------------------------------------------------- */
@media (max-width: 768px) {
#sidebar {
min-width: 80px;
max-width: 80px;
text-align: center;
margin-left: -80px !important ;
}
a[aria-expanded="false"]::before, a[aria-expanded="true"]::before {
top: auto;
bottom: 5px;
right: 50%;
-webkit-transform: translateX(50%);
-ms-transform: translateX(50%);
transform: translateX(50%);
}
#sidebar.active {
margin-left: 0 !important;
}
#sidebar .sidebar-header h3, #sidebar .CTAs {
display: none;
}
#sidebar .sidebar-header strong {
display: block;
}
#sidebar ul li a {
padding: 20px 10px;
}
#sidebar ul li a span {
font-size: 0.85em;
}
#sidebar ul li a i {
margin-right: 0;
display: block;
}
#sidebar ul ul a {
padding: 10px !important;
}
#sidebar ul li a i {
font-size: 1.3em;
}
#sidebar {
margin-left: 0;
}
#sidebarCollapse span {
display: none;
}
}
obrigado desde já.
Link para o comentário
Compartilhar em outros sites
4 respostass a esta questão
Posts Recomendados
Participe da discussão
Você pode postar agora e se registrar depois. Se você já tem uma conta, acesse agora para postar com sua conta.