CODEWITHSUNDEEP
csstwitter-bootstrapnavbar
fyodorfranz
fyodorfranz

Reputation: 486

Disabling hover effect after navbar collapses

I have a bootstrap navbar with drop-down menu buttons that automatically drop down when they are hovered over. However, when the menu is collapsed (upon hitting 768px), I want to disable this hover effect, so that the menu drops down only when the buttons are clicked.

I've attempted a few things that didn't work. Right now I'm trying to use a media query to disable the hover effect, but I'm not sure how to proceed. Any advice would be much appreciated!

.dropdown:hover .dropdown-menu {
    display: block;
}

@media (max-width: 767px) 
{
    .navbar-fixed-top
    {
        position: relative;
        top: auto;
    }

 .dropdown:hover .dropdown-menu {
    /*disable the display:block; property*/
    }
}

EDIT: Here's a bootply of the code I'm working with. If you click on the mobile icon at the top right of the display you'll be able to see how the bar reacts upon collapsing the menu.

Upvotes: 1

Views: 5303

Answers (2)

vanburen
vanburen

Reputation: 21663

I believe all you need to do is set your hover rule to only work above 767px, then the mobile navbar will operate on the default rules.

See working example.

  • The one thing I've added is a custom class to the navbar (navbar-custom in the example or whatever makes sense if you go this route) so the core isn't overwritten directly. This isn't needed for everything to work, just a best practice I feel.

@media (min-width: 767px) {
  .navbar-custom .dropdown:hover .dropdown-menu {
    display: block;
  }
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" />
<nav role="navigation" class="navbar navbar-default navbar-custom navbar-fixed-top">
  <!-- Brand and toggle get grouped for better mobile display -->
  <div class="navbar-header">
    <button type="button" data-target="#navbarCollapse" data-toggle="collapse" class="navbar-toggle"> <span class="sr-only">Toggle navigation</span>
      <span class="icon-bar"></span>
      <span class="icon-bar"></span>
      <span class="icon-bar"></span>

    </button> <a href="~/" class="navbar-brand title-link">Gateway Ranch</a>

  </div>
  <!-- Collection of nav links, forms, and other content for toggling -->
  <div id="navbarCollapse" class="collapse navbar-collapse centeredText">
    <ul class="nav navbar-nav centeredText">
      <li><a href="~/Home/Contact">Contact</a>

      </li>
      <li><a href="#">Profile</a>

      </li>
      <li class="dropdown"> <a data-toggle="dropdown" class="dropdown-toggle" href="~/Horse/">Horses<b class="caret"></b></a>

        <ul role="menu" class="dropdown-menu">
          <li><a href="~/Horse/">For Sale</a>

          </li>
          <li><a href="#">Brood Mare</a>

          </li>
        </ul>
      </li>
    </ul>
  </div>
</nav>

Upvotes: 3

taxicala
taxicala

Reputation: 21759

You can change the display value in your media query for that rule, not sure what is the one that you want, but probably inline or inline-block (or none if you don't want to get .dropdown-menu to show at all):

@media (max-width: 767px) 
{
    .dropdown:hover .dropdown-menu {
        display: none;
    }
}

There is no such thing as "disabling" a rule's property, however, you can change it to another value, as the example i've shown here.

Upvotes: 0

Related Questions