CODEWITHSUNDEEP
csstwitter-bootstrapdrop-down-menubackgroundnavbar
Linda
Linda

Reputation: 35

Bootstrap Dropdown Menu becomes transparent when Navbar Height is increased

I am not very experienced but I sure am good at finding problems. My bootstrap navbar needs to be 150px in height to hold a larger logo image. When I put the height component in the CSS and resize the window for under 767 px, the dropdown menu loses the background color and becomes transparent--making the words/links impossible to see. If I remove the height from the CSS the menu comes back but it isn't the right height. I've banged my head for hours on this and need some ideas. You can see it at http://www.ashlandlockandsafe.com/index3.html (resize the window to see the problem).

    .navbar { 
    background:#2D5F84;
    height:155px;
    border-bottom: 2px solid #000;
     }

This is the rest of the CSS (I have adjusted all of the navbar commented template CSS accordingly with adjusting the height of the navbar.

@media screen and (max-width: 767px) {
.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;


}
h1 {text-align:center;


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

}
body {
    padding-top: 150px; /* Required padding for .navbar-fixed-top.         Change  if height of navigation changes. */
background-image:url(../images/brushedsilverback.jpg);
}

.navbar-fixed-top .nav {
padding: 60px 0;
}

.navbar-fixed-top .navbar-brand {
padding: 0 15px;
}

footer {
padding: 30px 0;
}

@media(min-width:768px) {
    body {
    padding-top: 150px; /* Required padding for .navbar-fixed-top.     
 Change if height of navigation changes. */
    }

.navbar-fixed-top .navbar-brand {
    padding: 13px 0;
}
 .well {
    font-size:2em;
    text-align:center;
    border:#000 solid 2px;
    border-radius:0;
    text:#000;
    background-image:url(../images/metal.png);
    background-image:no-repeat;
    padding:2 0;
    }

    h1 {font-family:"arial";
        font-size:17px;
        font-weight:700;
    }

  }

@media(min-width:925px) {
    body {
    padding-top: 150px; /* Required padding for .navbar-      fixed-top.        Change if height of navigation changes. */
    }

.navbar-fixed-top .navbar-brand {
    padding: 15px 0;
}
 .well {
    font-size:1.6em;
    text-align:center;
    text:#000;
    border:#000 solid 1px;
    border-radius:0;
    background-image:url(../images/metalsmall.png);
    background-image:no-repeat;
    background-size:contain;
    background-position:center
    padding:0;

    }
h1 {font-family:"arial";
        font-size:17px;
        font-weight:700;
    }

Upvotes: 3

Views: 1741

Answers (1)

AndrewL64
AndrewL64

Reputation: 16311

Remove the height from the .navbar div and add it to navbar-header instead like this:

.navbar-header {
    height:155px;
}

Upvotes: 2

Related Questions