How to remove hover effect on mobile in bootstrap menu?

Question

css

There is a project in which the bootstrap menu works both on click and on hover, how to fix it on mobile devices (remove hover), I’ve been struggling with this for an hour and I can’t understand: either the flicker appears, or the hover and click stop working altogether.

A piece of code that triggers hover:

.nav > li.dropdown:hover {
  position: static;
}

.nav > li.dropdown:hover .dropdown-menu {
  display: table;
  width: 100%;
  text-align: center;
  left: 15px;
  right: 0;
}

.dropdown-menu>li {
  display: table-cell;
}

Give advice on how to get rid of this on mobile views.

Answer 1

Redefine styles based on media "queries", information can be found here.
https://webref.ru/css/value/media

Answer 2

if ($(this).width() > 1024) {
        $(".dropdown").hover(
                function () {
                    $('.dropdown-menu', this).stop(true, true).slideDown("fast");
                    $(this).toggleClass('open');
                },
                function () {
                    $('.dropdown-menu', this).stop(true, true).slideUp("fast");
                    $(this).toggleClass('open');
                }
        );
    }

Answer 3

<div class="footer-wrap">
   <div class="item"> </div>           
   <div class="item"></div>
   <div class="item"> </div>
   <div class="item"></div>
</div>
<style>
.footer-wrap,  .item {
    box-sizing: border-box;
    }
.footer-wrap {
   margin-left: -15px;
   margin-right: -15px;
   }
.item {
   padding-left: 15px;
   padding-right: 15px;
   }
</style>

Bootstrap is based on this principle, I advise you to read it.

Answer 4

The indent from the latter can be removed like this -:last-child {padding-right: 0}

Answer 5

Another option is to use flexbox.
But if not redone, the :last-child option described above is fine.