Right now as you can see in the images below, the navbar is on top of the picture, but I want that to be the opposite as if the picture is apart of the navbar. As for code I DONT have the image inside of the nav at all, I have simply an <img> tag before i start the nav and then using CSS I lined everything up as needed. 
So after checking this out for a while and trying to integrate this into my current site i have found that with the navbar at a negative z-index, the nav doesn't work while it's underneath the img wrapper! Any help is greatly appreciated from here.
robertpiconedesigns wrote:
So after checking this out for a while and trying to integrate this into my current site i have found that with the navbar at a negative z-index, the nav doesn't work while it's underneath the img wrapper! Any help is greatly appreciated from here.
Needs a slight revision (complete code scroll down)
Here is the explanation:
Basically get rid of <div class="logo_wrapper"></div>
and the css:
.logo_wrapper {
position: absolute;
width: 100%;
}
Give the navbar a z-index: 1;
.navbar {
margin-top: 100px;
z-index: 1;
}
and change the logo css properties to as below
.logo {
position: relative;
z-index: 2;
width: 250px;
height: 200px;
margin: 0 auto;
background-color: #f2f2f2;
text-align: center;
}
Your drop menu should then function.
<!------ COMPLETE EXAMPLE CODE -->
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Bootstrap Demo</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<!--Bootstrap-->
<script src="http://code.jquery.com/jquery-latest.min.js">
</script>
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
<style>
.navbar {
margin-top: 100px;
z-index: 1;
}
@media screen and (max-width: 768px) {
.navbar {
margin-top: 60px;
}
}
@media screen and (max-width: 480px) {
.navbar {
margin-top: 30px;
}
}
.logo {
position: relative;
z-index: 2;
width: 250px;
height: 200px;
margin: 0 auto;
background-color: #f2f2f2;
text-align: center;
}
@media screen and (max-width: 768px) {
.logo {
width: 200px;
height: 150px;
background-color: yellow;
}
}
@media screen and (max-width: 480px) {
.logo {
width: 150px;
height: 100px;
background-color: red;
margin-left: 30px;
}
}
</style>
</head>
<body>
<figure class="logo">
Company Logo
</figure>
<!--begin top nav bar-->
<nav class="navbar navbar-inverse navbar-fixed-top" role="navigation">
<div class="container-fluid">
<div class="navbar-header">
<a class="navbar-brand" href="#"> BRAND NAME or LOGO </a>
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar"> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button>
</div>
<div class="collapse navbar-collapse" id="myNavbar">
<ul class="nav navbar-nav navbar-right">
<li><a href="#"><span class="glyphicon glyphicon-comment"></span> MENU 1</a></li>
<li><a href="#"><span class="glyphicon glyphicon-list-alt"></span> MENU 2</a></li>
<li><a href="#"><span class="glyphicon glyphicon-envelope"></span> MENU 3</a> </li>
<li><a href="#">MENU 4</a> </li>
<li><a href="#">MENU 5</a></li>
</ul>
</div>
</div>
<!--end top nav-->
</nav>
</body>
</html>
Already have an account? Login
Enter your E-mail address. We'll send you an e-mail with instructions to reset your password.
AdChoices