Marium Masood Marium Masood - 6 days ago 9
CSS Question

Heading hides behind dropdown menu

I am trying to create a webpage hand have written the following code:



body {
font-size: 16px;
color: #fff;
background-color: #4203A1;
font-family: 'Roboto', sans-serif;
}

#header-nav {
background-color: #8605E9;
border-radius: 0;
border: 3px solid black;
}

.navbar-brand h1 {
font-size: 1.5em;
margin-top: -8px;
margin-bottom: 2px;
font-weight: bold;
text-transform: uppercase;
line-height: 1.5;
text-align: left;
}

.navbar-default .navbar-brand {
color: #fff;
}

.dropdown-menu {
width: 100%;
text-align: center;
margin-top: 53px;
border: 1px solid black
}

.dropdown button {
background-color: #fff;
}

.navbar-header button.navbar-toggle {
clear: both;
margin-top: -42px;
}

.heading {
/*position: relative;*/
}

#menu-sections section {
border: 3px solid black;
margin: 20px;
background-color: #607353;
}

.col-xs-12 p {
padding: 10px;
text-align: left;
}

.col-xs-12 h3 {
color: #000000;
}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<link href="https://fonts.googleapis.com/css?family=Roboto" rel="stylesheet">
<script src="https://code.jquery.com/jquery-1.11.3.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.js"></script>

<body>
<header>
<nav id="header-nav" class="navbar navbar-default">
<div class="container">
<div class="navbar-header">
<div class="navbar-brand navbar-left">
<h1> Food, LLC </h1>
</div>
<div class="dropdown">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#collapsable-nav" aria-expanded="false">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<ul class="dropdown-menu hidden-sm hidden-lg hidden-md" role="menu" aria-labelledby="menu1" id="collapsable-nav">
<li role="presentation"><a role="menuitem" tabindex="-1" href="#">Chicken</a></li>
<li role="presentation"><a role="menuitem" tabindex="-1" href="#">Beef</a></li>
<li role="presentation"><a role="menuitem" tabindex="-1" href="#">Sushi</a></li>
</ul>
</div>
</div>
</div>
</div>
</nav>
</header>
<div id="heading" class="container text-center">
<h2> Our Menu </h2>
</div>
<div id ="menu-sections" class="container">
<div class="col-xs-12 text-center">
<section><h3> Chicken </h3>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p></section></div>
<div class="col-xs-12 text-center">
<section><h3> Beef </h3>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p></section>
</div>
<div class="col-xs-12 text-center">
<section><h3> Sushi </h3>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p></section>
</div>
</body>





I am using Bootstrap framework and have created a menu button in the page which is visible when browser width is decreased. The problem is when I press that button, a dropdown menu appears and the heading (Our Menu) hides behind it. What I want to do is the heading (Our Menu) and the content below it should move downwards when I open the dropdown menu and move back upwards to the original position when I close the dropdown menu. How do I accomplish this? Also, how do I change the background color of the menu? I tried this but didn't work:

.navbar-nav > li > .dropdown-menu {
background-color: #e7e7e7;
}

Answer

you just need to change the position of the class .dropdown-menu from absolute to relative

.dropdown-menu {
    position: relative;
}

And if you don't want your navbar to expand vertically when showing the dropdown meu then you should add margin-top: 0px; to the same class

.dropdown-menu {
    position: relative;
    margin-top: 0px;
}
Comments