Bootstrap 3 dropdown - unable to isolate rule needed to overwrite an element container.

[SATTERWHITE ART]

On collapse, li class "dropdown" opens properly, then on "hover" over the dropdown item "Art Galleries", that dropdown slides downward out of sight, and I must scroll to view entire list (of seven) links.

Using dev tools to isolate, but can't seem to hit the exact needed rule to overwrite the height, or if I did locate the particular rule  needed, I failed to properly write the rule to control the height. Played whack-a-mole for a while, but it might be time for the experts now.

=======================================================================================

<meta http-equiv="Content-Type" content="text/html; charset=utf-8"><nav class="navbar navbar-inverse navbar-fixed-top">

  <div class="container">

    <!-- Brand and toggle get grouped for better mobile display -->

    <div class="navbar-header">

      <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#myDefaultNavbar1" 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>

      <a class="navbar-brand" href="#">SatGraphics Art</a></div>

    <!-- Collect the nav links, forms, and other content for toggling -->

    <div class="collapse navbar-collapse" id="myDefaultNavbar1">

      <ul class="nav navbar-nav">

        <li><a href="../index.html">HOME</a></li>

        <li class="dropdown"> <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false" aria-haspopup="true">ART GALLERIES <span class="caret"></span></a>

          <ul class="dropdown-menu">

            <li><a href="../galleries/fineArt.html">Fine Art</a></li>

            <li><a href="../galleries/architectural.html">Architectural</a></li>

            <li><a href="../galleries/illustrations.html">Illustration</a></li>

            <li><a href="../galleries/militaryArt.html">Military Art</a></li>

            <li><a href="../galleries/wildlifeArt.html">Wildlife Art</a></li>

            <li><a href="../galleries/petArt.html">Pet Art</a></li>

              <li><a href="../galleries/oddArt.html">Odd Art</a></li>

          </ul>

        </li>

        <li><a href="../galleries/photo-restore.html">PHOTO RESTORATION</a></li>

        <li><a href="../contact/contact.php">CONTACT</a></li>

      </ul>

    </div>

    <!-- /.navbar-collapse -->

  </div>

  <!-- /.container-fluid -->

</nav>

[Nancy OShea]

The BS drop down <ul> has no height value.  The height is dictated by content.

If you care to upload the problem page online and post a link, we can take a look at it.

Nancy

[SATTERWHITE ART]

Thanks for prompt response, Nancy.

My first thought is that if a "li" has text and an "a href" then it has content. But as usual, what do I know?

However, I think the height restriction in this case is governed by the "ul" dropdown, which has only four links. That is what I though, but when I tried there, it didn't work out.

Here's a link:
https://0182d1d.netsolhost.com/SatGrp-BS-v1/index.html

I've another coming your way as well, and will post as an additional discussion.

(Your past suggestion nudging me into Bootstrap is appreciated, and I'm becoming more comfortable at time goes on.)

Thank You

[Nancy OShea · Accepted solution]

OK.  I see the problems on mobile menus.

First, take out everything navbar related from your custom.css file.  Collectively, it's causing great problems.  Also Hover effect is meaningless on touch screen devices because they don't have a mouse.

Second, add this to your custom.css file to remove the extra scrollbar which you don't want or need.

.navbar-fixed-top .navbar-collapse {

    max-height: 100% !important;

}

That should get you back on track.