Dropdown menu items hides behind main menu in boot

2019-07-19 14:26发布

站内问答 / HTML/CSS
1801 1 4

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:enter image description here

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/

1条回答
▲ chillily
2楼-- · 2019-07-19 15:07

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/

查看更多
0人赞 添加讨论(0) 举报
登录 后发表回答
相关问题
查看全部
相关文章
查看全部
收藏的人(4)