css - Dropdown menu items hides behind main menu in bootstrap customized navigation bar -
i trying create navigation bar in bootstrap. have added customized styles in bootstrap-theme.min.css file. way able created navigation bar dropdown menu items hide behind main menu in small screen devices. code , screenshots of output 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 > { 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 > { 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 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 , anlytics. please me in solving issue. in advance. let me know if question not clear.
jsfiddle here http://jsfiddle.net/38fmg5h3/2/
update : added css
#custom-bootstrap-menu.navbar-default .navbar-brand{ height:38px; } and removed height:38px; #custom-bootstrap-menu.navbar-default .navbar-nav>li, .navbar-brand. should 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 > { 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 > { 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/