In my website I have created a NavBar file and I include it, with php, in every other php file I want. Now my navbar file has a dropdown inside:
.dropdown .dropbtn {
font-size: 16px;
border: none;
outline: none;
color: white;
padding: 14px 16px;
background-color: inherit;
font-family: inherit;
margin: 0;
cursor: pointer;
}
.dropdown-content {
display: none;
position: absolute;
background-color: white;
min-width: 160px;
box-shadow: white;
z-index: 1;
cursor: pointer;
}
.dropdown-inbuttons {
border: none;
padding: 6px 12px;
text-decoration: none;
display: inline-block;
cursor: pointer;
background-color: white;
color: black;
}
.dropdown {
position: relative;
display: inline-block;
}
.dropdown-content {
display: none;
position: absolute;
right: 0;
background-color: white;
min-width: 160px;
box-shadow: white;
z-index: 1;
cursor: pointer;
}
.dropdown-content a {
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
}
.dropdown:hover .dropdown-content {
display: block;
}<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<div class="w3-top">
<div class="w3-bar w3-black w3-card" style="height: 58px">
<!-- Give attension here -->
//.....other code....//
<div class="dropdown" style="margin-top: 6px;">
<button class="dropbtn">
<i class="fa fa-caret-down"></i>
</button>
<div class="dropdown-content">
<a href="#">Link 1</a>
<a href="#">Link 2</a>
<a href="../../../../registration/_includes/logout-system.php">Log Out</a>
</div>
</div>
</div>
</div>When I put my mouse up to the dropbtn it shows me this:
I know why this happen because the dropdown content is inside the navbar and in the code navbar height = 58px and doesn't fit. So How to make my dropdown visible front of the other html files?
I import the navbar in other php files with this way:
<html>
<?php
session_start();
if(!isset($_SESSION['u_id'])){
header("Location: ../../login.php");
}
include '../../_includes/server.php';
$userid = $_SESSION['u_id'];
$usersql = "SELECT * FROM `users` WHERE id='$userid'";
$result = mysqli_query($conn, $usersql);
if($row = mysqli_fetch_assoc($result))
{
$_SESSION['first_name'] = $row['first_name'];
$_SESSION['last_name'] = $row['last_name'];
include('../../../navBar/navBarConnected.php'); <!-- Here I include it-->
}
<head>...</head>
<body>...</body>
</html>
</div>
