CODEWITHSUNDEEP
javascripthtmlcsstwitter-bootstrap
Calibur Victorious
Calibur Victorious

Reputation: 638

Hoverable on PCs but Clickable on other Devices menu

I've been using Twitter Bootstrap for Dropdown Menu, But the problem is that i made the menu hoverable instead of OnClick toggle, Is there a possible way to make this Menu OnClick toggle Collapse like it was before i make it Hoverable, on other touch devices only?

HOVERABLE

<head>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" integrity="sha384-rwoIResjU2yc3z8GV/NPeZWAv56rSmLldC3R/AZzGRnGxQQKnKkoFVhFQhNUwEyJ" crossorigin="anonymous">
    <script src="https://code.jquery.com/jquery-3.1.1.slim.min.js" integrity="sha384-A7FZj7v+d/sdmMqp/nOQwliLvUsJfDHW+k9Omg/a/EheAdgtzNs3hpfag6Ed950n" crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.4.0/js/tether.min.js" integrity="sha384-DztdAPBWPRXSA/3eYEEUWrWCy7G5KFbe8fFjk5JAIxUYHKkDx6Qin1DkWx51bBrb" crossorigin="anonymous"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/js/bootstrap.min.js" integrity="sha384-vBWWzlZJ8ea9aCX4pEW3rVHjgjt7zpkNpZk+02D9phzyeVkE+jo0ieGizqPLForn" crossorigin="anonymous"></script>
</head>
<nav class="navbar navbar-toggleable-md navbar-light">
    <div class="collapse navbar-collapse" id="navbarNavDropdown">
        <ul class="navbar-nav">
            <li class="dropdown">
                <a class="nav-link dropdown" href="#">
          Dropdown link
        </a>
                <div class="dropdown-menu">
                    <a class="dropdown-item" href="#">1</a>
                    <a class="dropdown-item" href="#">2</a>
                    <a class="dropdown-item" href="#">3</a>
                    <a class="dropdown-item" href="#">4</a>
                    <a class="dropdown-item" href="#">5</a>
                </div>
            </li>
        </ul>
    </div>
</nav>

<style>
    .dropdown-menu {}

    .dropdown:hover .dropdown-menu {
        display: block;
        margin-top: 0;
    }
</style>

In basic bootstrap code, We put data-toggle="dropdown" and id="dropdownMenuButton" aria-labelledby="dropdownMenuButton"

So i was wondering If it is possible to make it Basic again on Touch devices!

Upvotes: 0

Views: 47

Answers (1)

Ron Dadon
Ron Dadon

Reputation: 2706

You can use @media query and the same break points in the CSS as Bootstrap does, and only apply the hover to a non mobile device break points:

@media only screen and (min-width : 320px) {
    /* Custom, iPhone Retina */    
}

@media only screen and (min-width : 480px) {
    /* Extra Small Devices, Phones */ 
}

@media only screen and (min-width : 768px) {
    /* Small Devices, Tablets */
}

/* Medium Devices, Desktops, Large Devices, Wide Screens */
@media only screen and (min-width : 992px) {
    .dropdown:hover .dropdown-menu {
        display: block;
        margin-top: 0;
    }
}

This is based on Bootstrap 3 break points. That will cause the hover to only take affect on screen that are wider than 992px.

Upvotes: 1

Related Questions