Bootstrap Navigation Bar Dropdown Background issue

1

My bootstrap navigation dropdown background is not long enough. When you shrink the page down, my navigation is set to collapse. But the dropdown options do not all appear. Here is a link to my codepen. What am I doing wrong?

Thanks in advance.

-Ash.

2

Greetings!

In your CSS section, you’re overriding bootstrap’s css class .navbar

You have

.navbar{
   font-size: 1.5vw;
    height: 60px;
    line-height: 2px;
    padding: 2px;
  
}

Remove the height attribute and it should work just fine.

.navbar{
    font-size: 1.5vw;
    line-height: 2px;
    padding: 2px;
}

A thing to remember while working with bootstrap. Avoid altering base classes and refrain from manually setting attributes like height and width or even position.

Once you’re comfortable with how CSS works, then you can play around with these attribute. For the starters, just focus on how best you can utilize what’s provided by default.

2 Likes
3

You rock!!! Thank you so much :grin: that did it.

1 Like