Bootstrap 4 navbar с выпадающим меню, но активным

Question

Я хотел бы создать меню с одной закладкой с подменю, но я хочу сделать кликабельную закладку с выпадающей кнопкой:

HOME

OFFER

• SHOP
• УСЛУГИ

КОНТАКТ

И я хотел бы открыть страницу ПРЕДЛОЖЕНИЯ и МАГАЗИН.

В начальной загрузке 4 документацияКнопка «вниз» показывает подменю без возможности щелкнуть эту закладку (в моей версии это ПРЕДЛОЖЕНИЕ).

На ПК мы могли бы использовать HOVER для создания этого, но на мобильном устройстве это не будет работать, так как это сделать?

https://getbootstrap.com/docs/4.0/components/navbar/

Answer 1

Я добавил некоторый код: https://codepen.io/SkuterPL/pen/RwbXgYe

<nav class="navbar navbar-expand-lg navbar-light bg-light">
  <a class="navbar-brand" href="#">Navbar</a>
  <button class="navbar-toggler collapsed" type="button" data-toggle="collapse" data-target="#navbarNavDropdown" aria-controls="navbarNavDropdown" aria-expanded="false" aria-label="Toggle navigation">
    <span class="navbar-toggler-icon"></span>
  </button>
  <div class="navbar-collapse collapse" id="navbarNavDropdown" style="">
    <ul class="navbar-nav">
      <li class="nav-item active">
        <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Offer</a>
      </li>
      <li class="nav-item dropdown">
        <a class="nav-link dropdown-toggle" href="#" id="navbarDropdownMenuLink" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" aria-label="Offer menu"></a>
        <div class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink">
          <a class="dropdown-item" href="#">Shop</a>
          <a class="dropdown-item" href="#">Service</a>
        </div>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Contact</a>
      </li>
    </ul>
  </div>
</nav>

Этот код работает хорошо на ПК, но не на мобильном телефоне, потому что он создает новую позицию в меню, поэтому на мобильном телефоне он создает следующую закладку, чтобы щелкнуть вместорядом с ним

Answer 2

На стороне css вы можете совершать транзакции с @media и показывать меню в мобильных измерениях.

Я думаю, что этот метод может помочь вам.

@media (min-width: 768px) {
  ul.nav li.dropdown:hover > ul.dropdown-menu {
    display: block;
  }