CODEWITHSUNDEEP
csshoverbootstrap-4navbardropdown
Mitca Vicentiu
Mitca Vicentiu

Reputation: 196

Bootstrap 4 navbar open dropdown when hover on big screen, but blick to open on small screen

I have a navbar and i wanted to open the dropdown menu when i hover on the dropdown title and I accomplished this by using this jquery code:

$('body').on('mouseenter mouseleave', '.dropdown', function (e) {
    var dropdown = $(e.target).closest('.dropdown');
    var menu = $('.dropdown-menu', dropdown);
    dropdown.addClass('show');
    menu.addClass('show');
    setTimeout(function () {
        dropdown[dropdown.is(':hover') ? 'addClass' : 'removeClass']('show');
        menu[dropdown.is(':hover') ? 'addClass' : 'removeClass']('show');
    }, 300);
});

And this CSS:

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

The problem is that on small devices,the dropdown will open when i click on the dropdown title,but it will not close when i click again(how bootstrap 4 toggler it's working in a normal case). How can i do to open the dropdown when i hover on the dropdown title on big screen and open the dropdown when i click on the dropdown title on small screens?

The HTML:

<html>
<head>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="<?php echo base_url('assets/css/bootswatch.css'); ?>"/>
    <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js" integrity="sha384-cs/chFZiN24E4KMATLdqdvsezGxaGsi4hLGOzlXwp5UZB1LY//20VyM2taTB4QvJ" crossorigin="anonymous"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js" integrity="sha384-uefMccjFJAIv6A+rW+L4AHf99KvxDjWSu1z9VI8SKNVmz4sk7buKt/6v9KI65qnm" crossorigin="anonymous"></script>
    <script defer src="https://use.fontawesome.com/releases/v5.0.9/js/all.js" integrity="sha384-8iPTk2s/jMVj81dnzb/iFR2sdA7u06vHJyyLlAd4snFpCl/SnyUjRrbdJsw1pGIl" crossorigin="anonymous"></script>

    <link rel="stylesheet" href="<?php echo base_url('assets/css/overwrite.css');?>" type="text/css"/>
    <link rel="stylesheet" href="<?php echo base_url('assets/css/style.css');?>" type="text/css"/>
    <script src="<?php echo base_url('assets/jquery/jquery.js');?>"></script>
</head>
<body>
    <div class="top-text-container">
        <div class="top-text">
            <div class="top-text-left">Pentru Comenzi:
                <i class="fas fa-phone fa-lg"></i>
                <span id="top-number-phone">0746117702</span>
            </div>
            <div class="top-text-right"><a href="#" class="link">Login</a></div>
        </div>
    </div>
    <nav class="navbar navbar-expand-lg navbar-light bg-light navbar-fixed">
        <a class="navbar-brand" href="#"><img class="logo-img" src="<?php echo base_url('assets/images/test2_logo.png');?>"/></a>
        <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarColor03" aria-controls="navbarColor03" aria-expanded="false" aria-label="Toggle navigation">
            <span class="navbar-toggler-icon"></span>
        </button>

        <div class="collapse navbar-collapse" id="navbarColor03">
            <ul class="navbar-nav ml-auto">
                <li class="nav-item">
                    <a class="nav-link" href="#">Acasa</a>
                    <span class="divider">|</span>
                </li>
                <li class="nav-item dropdown">
                    <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Meniu</a>
                    <div class="dropdown-menu" aria-labelledby="navbarDropdown">
                        <a class="dropdown-item" href="#">Pizza</a>
                        <a class="dropdown-item" href="#">Carne de pui</a>
                        <a class="dropdown-item" href="#">Carne de porc</a>
                        <a class="dropdown-item" href="#">Garnituri</a>
                        <a class="dropdown-item" href="#">Ciorbe</a>
                        <a class="dropdown-item" href="#">Salate</a>
                    </div>
                    <span class="divider">|</span>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="#">Meniul Zilei Weekend</a>
                    <span class="divider">|</span>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="#">Evenimente</a> <!--dropdown-->
                    <span class="divider">|</span>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="#">Blog</a>
                    <span class="divider">|</span>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="#">Galerie</a>
                    <span class="divider">|</span>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="#">Contact</a>
                </li>
                <li class="nav-item cart">
                    <a class="nav-link" href="#"><i class="fas fa-shopping-cart fa-lg"></i></a>
                    <div id="cart-count">3</div>
                </li>
            </ul>
        </div>
    </nav>

Upvotes: 0

Views: 1337

Answers (1)

BrocolliRob
BrocolliRob

Reputation: 23

What you can is have your CSS only show the hover dropdown for a screen width above x pixels. Then the click functionality will work as normal when its collapsed. If you want to show above 768 for example:

@media only screen and (min-width: 768px) {
    .dropdown:hover>.dropdown-menu {display: block;}
}

Upvotes: 1

Related Questions