CODEWITHSUNDEEP
csstwitter-bootstrapdrop-down-menu
Linda
Linda

Reputation: 35

Bootstrap Dropdown Menu too big

I cannot figure out why my bootstrap dropdown menu seems to have an extra line on top and line on the bottom--with nothing in them. Granted, I have made my navbar 150px for all resolutions but that doesn't explain the extra padding on the bottom. This is my first bootstrap project and I have searched high and low for an answer to this. You have to narrow the window to less than 767 pixels for the dropdown option to appear.

This is the page: http://www.ashlandlockandsafe.com/index3.html.

In the CSS, I have tried to address it with the following:

@media screen and (max-width: 767px) {
.navbar-header{
    height:150px;
}

.navbar-brand, .navbar-nav > li > a {
    line-height: 30px;
    height: 45px;
    padding: 0px;
    margin-top:0px;
    margin-left:10px;
}

.well {
    font-size:2.5em;
    text-align:center;
    text:#000;
    padding:0;
    border:#000 solid 4px;
    background-image:url(../images/metal.png);
    background-image:no-repeat;
    background-size:contain;
    background-position:center;

 }
.carhelp {
    margin-top:15px;
}

h1 {
text-align: center;
font-size: 30px;
    }

.phonetxt {
    font-size:36px;
    text-align:center;
}

But it still has what appears to be an extra row on the top and bottom. Any ideas how to address the dropdown itself?

Upvotes: 0

Views: 1895

Answers (1)

Shehary
Shehary

Reputation: 9992

In website, fixed header has a padding .navbar-fixed-top .nav{60px 0px} causing the problem.

so solution is media queries

@media (max-width: 480px) {
    .navbar-fixed-top .nav {
        padding: 0px 0px;
    }
}

so on devices like mobile, it will over-ride the default .navbar-fixed-top .nav selector property.

More information about media-queries

Upvotes: 1

Related Questions