Bootstrap navigation dropdown link solution for tablets?

Question

I have a navigation bar that shows dropdown menus when you hover for desktop and collapses for mobile and tablet, portrait only though. But, for tablet landscape, the menu functions like it does on desktop, which makes the dropdown links inaccessible because it just links to the parent link when you tap it the link. How can I make it so the tablet version functions like the mobile but looks like the desktop version? Or would it be better to make the dropdown links show on click for all devices?

<header id="masthead" class="site-header" role="banner">
        <div class="container-fluid">
            <div id="main-nav" class="row">
                <div class="header-wrap">
              <div class="site-branding">
                            <p class="site-title"><a href="#" rel="home">SITE NAME</a></p>
                    </div>
        <nav id="site-navigation" class="main-navigation" role="navigation">
            <button class="menu-toggle" aria-controls="primary-menu" aria-expanded="false">
      <span class="icon-bar"></span>
      <span class="icon-bar"></span>
      <span class="icon-bar"></span>
      </button>
            <ul id="primary-menu" class="menu">
      <li class="menu-item menu-item-has-children dropdown">
      <a class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false" href="#">Parent Link<b class="caret"></b></a>
      <ul class="dropdown-menu">
          <li><a href="#">Link 1</a></li>
          <li><a href="#">Link 2</a></li>
        <li><a href="#">Link 3</a></li>
      </ul>
      </li>
      </ul>
      </nav>
      </div>
    </div>
  </div>
</header>


.nav-menu {
  display: none;
  position: relative;
  top: 70px;
  @media (min-width: 768px) and (max-width: 992px) {
    top: 0;
  }
}
.dropdown-menu {
  display: none;
  position: static;
  width: 100%;
  li {
    width: 100%;
  }
  min-width: 180px;
}
.dropdown-menu > .active a {
  background-color: #fff;
  color: #000 !important;
}

.main-navigation.toggled {
  .nav-menu {
    width: 100%;
    display: block;
    background-color: #363636;
    li {width: 100%; display: block;background-color: #363636; text-transform: uppercase; border-top: .5px solid #434343;}
    li > a {
      padding: 8px;
      pointer-events: none; // prevent it's immediate A child to follow HREF
      cursor: default;
    }
    a {color: #fff;}
    .dropdown-menu {
      position:static;
      top: 80px;
      display: none;
      background: none;
      box-shadow: none;
      padding: 0;
      a {
        color: #fff;
        pointer-events: auto;
        cursor: pointer;
      }
      li {
        background-color: #000;
        a {
          width: 100%;
          &:hover {
            color: #000;
          }
        }
      }
    }
  }
}


@media (min-width: 992px) {
  .main-navigation {
      .nav-menu {
        top: 0;
      }
        .dropdown-menu {
            visibility: hidden;
            display: block;
            opacity: 0;
            border-radius: 0;
            top: 3.15em;
            background-color: $site-dark-gray;
            // transform: translateY(-20px);
            transform: translateY(20px);
            transition: all .3s ease;
            left: -1.5em !important;
            overflow: hidden;
            padding: 0;
            border: 0;
        li:first-child {display: none !important;}
            li {
                margin: 0 !important;
                transition: all .3s ease;
                a {
                    padding-top: 8px;
                padding-bottom: 8px;
                }
                &:hover a {
                    color: #000 !important;
                    background-color: #fff;
                }
            }
            .active > a {
                    background-color: #fff;
                    color: #000 !important;
            }
        }

        .dropdown:hover .dropdown-menu {
                display: block;
                opacity: 1;
                visibility: visible;
                transform: translateY(0px);
        }
        .dropdown:after {
            content: "";
            display: block;
            height: 2em;
        position: absolute;
        top: 1em;
        width: 100%;
    }
  }
}

score 0 · Answer 1 · edited May 23 '17 at 10:29

As stated over here, you have to implement a new media query that's limited to between 768 and xy pixels - xy would be your new breakpoint, as in the tablet's width (1024?). Please refer to the comments of the voted answer, as the solution provided in the answer itself does not work - instead, this link provided by ZimSystem offers a solution to your needs if you adjust the values accordingly!

However, doing this would not limit this query to mobile devices, therefore resizing your browser window to below 1024px on your desktop device would collapse the navigation bar as well. I haven't heard of any possibilities to limit media queries to mobile devices yet, so while this might not be the best solution for you, it should be a temporary accommodation.

Bootstrap navigation dropdown link solution for tablets?

1 Answers1