Skip to main content
S
SATTERWHITE ART
Known Participant
December 14, 2017
Answered

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

  • December 14, 2017
  • 1 reply
  • 700 views

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>

This topic has been closed for replies.
Correct answer Nancy OShea

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.

1 reply

Nancy OShea
Community Expert
Nancy OSheaCommunity Expert
Community Expert
December 14, 2017

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

Nancy O'Shea— Product User & Community Expert
S
SATTERWHITE ARTAuthor
Known Participant
December 15, 2017

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
Community Expert
Nancy OSheaCommunity ExpertCorrect answer
Community Expert
December 15, 2017

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.

Nancy O'Shea— Product User & Community Expert
Terms & ConditionsAccessibility statement
Using the community Terms of use Privacy Cookie preferences Do not sell or share my personal information ad choicesAdChoices