Tiya
Reputation: 225
Dropdown menu items hides behind main menu in bootstrap customized navigation bar
I am trying to create Navigation bar in bootstrap. Have added customized styles in bootstrap-theme.min.css file. This way I am able to created navigation bar but dropdown menu items get hide behind main menu in small screen devices. The code and screenshots of output are as below:
Styles added in bootstrap-theme.min.css file:
#custom-bootstrap-menu.navbar-default .navbar-brand {
color: rgba(255, 255, 255, 1);
}
#custom-bootstrap-menu.navbar-default {
font-size: 14px;
background-image:url('https://s3.amazonaws.com/static.bizmerlin.net/bg_header.png');
background-repeat:repeat-x;
background-size:100% 100%;
border-width: 1px;
border-radius: 4px;
height: 40px;
background-color: rgba(70, 131, 176, 1);
}
#custom-bootstrap-menu.navbar-default .navbar-nav>li, .navbar-brand {
color: rgba(255, 255, 255, 1);
background-color: #528cb4;
height: 38px;
border: 1px solid #ffffff;
margin-top:4px;
border-radius: 5px;
margin-right: 6px;
font-size: 14px;
}
#custom-bootstrap-menu.navbar-default .navbar-nav>li>a, .navbar-brand {
color: rgba(255, 255, 255, 1);
line-height: 10px;
}
#custom-bootstrap-menu.navbar-default .navbar-nav>li:hover,
#custom-bootstrap-menu.navbar-default .navbar-nav>li:focus {
background-color: #7fbb00;
}
#custom-bootstrap-menu.navbar-default .navbar-nav>li.active>a,
#custom-bootstrap-menu.navbar-default .navbar-nav>.active>a:hover,
#custom-bootstrap-menu.navbar-default .navbar-nav>.active>a:focus {
color: rgba(255, 255, 255, 1);
background-color: rgba(233, 129, 42, 1);
}
#custom-bootstrap-menu.navbar-default .navbar-toggle {
border-color: #e9812a;
}
#custom-bootstrap-menu.navbar-default .navbar-toggle:hover,
#custom-bootstrap-menu.navbar-default .navbar-toggle:focus {
background-color: #e9812a;
}
#custom-bootstrap-menu.navbar-default .navbar-toggle .icon-bar {
background-color: #e9812a;
}
#custom-bootstrap-menu.navbar-default .navbar-toggle:hover .icon-bar,
#custom-bootstrap-menu.navbar-default .navbar-toggle:focus .icon-bar {
background-color: #4683b0;
}
#custom-bootstrap-menu.navbar-default .navbar-nav > li > .dropdown-menu {
background-color: #528cb4;
margin-top:10px;
}
#custom-bootstrap-menu.navbar-default .navbar-nav > li > .dropdown-menu > li > a {
color: #ffffff;
}
#custom-bootstrap-menu.navbar-default .navbar-nav > li > .dropdown-menu > li > a:hover,
#custom-bootstrap-menu.navbar-default .navbar-nav > li > .dropdown-menu > li > a:focus {
color: #aeff00;
background-image: none;
background-color: #528cb4;
}
#custom-bootstrap-menu.navbar-default .navbar-nav > .open > a {
background-image: none;
background-color: #7fbb00;
height: 36px;
border-radius: 4px;
}
.caret {
border-left: 4px solid transparent;
border-right: 4px solid transparent;
border-top: 4px solid;
display: inline-block;
height: 0;
margin-left: 2px;
vertical-align: middle;
width: 0;
}HTML code for navigation bar is:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Bootstrap 3 Responsive Layout Example</title>
<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="css/bootstrap-theme.min.css">
<script type="text/javascript" src="http://code.jquery.com/jquery.min.js"></script>
<script type="text/javascript" src="js/bootstrap.min.js"></script>
<style type="text/css">
</style>
</head>
<body>
<nav id="custom-bootstrap-menu" class="navbar navbar-default " role="navigation">
<div class="container">
<div class="navbar-header"><a class="navbar-brand" href="#">Home</a>
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-menubuilder"><span class="sr-only">Toggle navigation</span><span class="icon-bar"></span><span class="icon-bar"></span><span class="icon-bar"></span>
</button>
</div>
<div class="collapse navbar-collapse navbar-menubuilder" >
<ul class="nav navbar-nav navbar-left">
<li style="background-color:#e9812a;"><a href="/">Home1</a>
</li>
<li><a href="/products">Products</a>
</li>
<li><a href="/about-us">About Us</a>
</li>
<li><a href="/contact">Contact Us</a>
</li>
<li class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" href="#" aria-expanded="false">Page 1 <span class="caret"></span></a>
<ul class="dropdown-menu" >
<li><a href="#">Page 1-1</a></li>
<li><a href="#">Page 1-2</a>
<ul class="dropdown-menu sub-menu">
<li><a href="">asf</a></li>
</ul>
</li>
<li><a href="#">Page 1-3</a></li>
</ul>
</li>
<li><a href="/contact">Contact Us</a>
</li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li><a href="">Analytics</a></li>
</ul>
</div>
</div>
</nav>
<div class="container">
</div>
</body>
</html>The output is:
The dropdown menu hides behind Contactus and Anlytics. Please help me in solving this issue. Thanks in advance. Let me know if my question is not clear.
JSFiddle here http://jsfiddle.net/38fmg5h3/2/
Upvotes: 2
Views: 1277
Answers (1)
user1846747
Reputation:
UPDATE : I added this to your css
#custom-bootstrap-menu.navbar-default .navbar-brand{
height:38px;
}
and removed height:38px; from #custom-bootstrap-menu.navbar-default .navbar-nav>li, .navbar-brand. That should do the trick.
#custom-bootstrap-menu.navbar-default .navbar-brand {
color: rgba(255, 255, 255, 1);
}
#custom-bootstrap-menu.navbar-default {
font-size: 14px;
background-image:url('https://s3.amazonaws.com/static.bizmerlin.net/bg_header.png');
background-repeat:repeat-x;
background-size:100% 100%;
border-width: 1px;
border-radius: 4px;
height: 40px;
background-color: rgba(70, 131, 176, 1);
}
#custom-bootstrap-menu.navbar-default .navbar-brand{
height:38px;
}
#custom-bootstrap-menu.navbar-default .navbar-nav>li, .navbar-brand {
color: rgba(255, 255, 255, 1);
background-color: #528cb4;
border: 1px solid #ffffff;
margin-top:4px;
border-radius: 5px;
margin-right: 6px;
font-size: 14px;
}
#custom-bootstrap-menu.navbar-default .navbar-nav>li>a, .navbar-brand {
color: rgba(255, 255, 255, 1);
line-height: 10px;
}
#custom-bootstrap-menu.navbar-default .navbar-nav>li:hover,
#custom-bootstrap-menu.navbar-default .navbar-nav>li:focus {
background-color: #7fbb00;
}
#custom-bootstrap-menu.navbar-default .navbar-nav>li.active>a,
#custom-bootstrap-menu.navbar-default .navbar-nav>.active>a:hover,
#custom-bootstrap-menu.navbar-default .navbar-nav>.active>a:focus {
color: rgba(255, 255, 255, 1);
background-color: rgba(233, 129, 42, 1);
}
#custom-bootstrap-menu.navbar-default .navbar-toggle {
border-color: #e9812a;
}
#custom-bootstrap-menu.navbar-default .navbar-toggle:hover,
#custom-bootstrap-menu.navbar-default .navbar-toggle:focus {
background-color: #e9812a;
}
#custom-bootstrap-menu.navbar-default .navbar-toggle .icon-bar {
background-color: #e9812a;
}
#custom-bootstrap-menu.navbar-default .navbar-toggle:hover .icon-bar,
#custom-bootstrap-menu.navbar-default .navbar-toggle:focus .icon-bar {
background-color: #4683b0;
}
#custom-bootstrap-menu.navbar-default .navbar-nav > li > .dropdown-menu {
background-color: #528cb4;
margin-top:10px;
}
#custom-bootstrap-menu.navbar-default .navbar-nav > li > .dropdown-menu > li > a {
color: #ffffff;
}
#custom-bootstrap-menu.navbar-default .navbar-nav > li > .dropdown-menu > li > a:hover,
#custom-bootstrap-menu.navbar-default .navbar-nav > li > .dropdown-menu > li > a:focus {
color: #aeff00;
background-image: none;
background-color: #528cb4;
}
#custom-bootstrap-menu.navbar-default .navbar-nav > .open > a {
background-image: none;
background-color: #7fbb00;
height: 36px;
border-radius: 4px;
}
.caret {
border-left: 4px solid transparent;
border-right: 4px solid transparent;
border-top: 4px solid;
display: inline-block;
height: 0;
margin-left: 2px;
vertical-align: middle;
width: 0;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<nav id="custom-bootstrap-menu" class="navbar navbar-default " role="navigation">
<div class="container">
<div class="navbar-header"><a class="navbar-brand" href="#">Home</a>
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-menubuilder"><span class="sr-only">Toggle navigation</span><span class="icon-bar"></span><span class="icon-bar"></span><span class="icon-bar"></span>
</button>
</div>
<div class="collapse navbar-collapse navbar-menubuilder" >
<ul class="nav navbar-nav navbar-left">
<li style="background-color:#e9812a;"><a href="/">Home1</a>
</li>
<li><a href="/products">Products</a>
</li>
<li><a href="/about-us">About Us</a>
</li>
<li><a href="/contact">Contact Us</a>
</li>
<li class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" href="#" aria-expanded="false">Page 1 <span class="caret"></span></a>
<ul class="dropdown-menu" >
<li><a href="#">Page 1-1</a></li>
<li><a href="#">Page 1-2</a>
<ul class="dropdown-menu sub-menu">
<li><a href="">asf</a></li>
</ul>
</li>
<li><a href="#">Page 1-3</a></li>
</ul>
</li>
<li><a href="/contact">Contact Us</a>
</li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li><a href="">Analytics</a></li>
</ul>
</div>
</div>
</nav>
<div class="container">
</div>Working JSFiddle Here http://jsfiddle.net/38fmg5h3/1/
Upvotes: 2
Related Questions
- Bootstrap dropdown menu hidden behind other elements
- CSS: Dropdown menu gets hidden behind the content
- Drop Down Menu In Navigation Bar got Hidden
- BootStrap dropdown menu hides behind the screen
- Navbar links links staying outside of the dropdown menu
- Bootstrap issue, dropdown menu is hidden behind another element
- Bootstrap dropdowns menus appearing behind other DIV's
- Bootstrap drop down list goes under the nav bar
- Dropdown menu renders underneath incorrect navbar item
- Twitter Bootstrap 2 top nav dropdown covered by subnav bar