Bootstrap drop-down menu stops pushing content below

I often make my sites with bootstrap. Sometimes I found that the drop-down menu stopped pushing down the content below and stayed above it instead. By looking into my css style sheet, I found it resulted from my setting on the height of the navigation bar. For preventing that from happening, I cannot fix the height of the navigation bar.

Below showed how it happened.

Before the fix:
#menu,
#menu .container,
#menu .container nav
{
height: 57px; // The problem is  caused by this setting
background-color:#240f1e;
}
After the fix:
#menu,
#menu .container,
#menu .container nav
{
 height: 57px; // Remove
margin-bottom: 0; // Add: set the bottom margin to zero instead if you want to adjust the height
background-color:#240f1e;
}

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s