I've been developing a solution using Twitter Bootstrap to create a main navigation menu that expands upon hover on desktop, while the menu expands when clicking the caret on mobile (caret hidden on desktop). Additionally, I aimed to make the top-level navigation item clickable on mobile devices.
Accomplishments so far:
- Submenu expands on hover (desktop)
- Top-level nav is clickable (desktop & mobile)
- Caret is hidden on desktop but visible on mobile
- Clickable area for caret expands & collapses submenu (mobile)
Issues encountered:
- Top-level nav item expands entire line (mobile)
- The expand/collapse area for the caret ends up on a second line (refer to black bar below "Services" in screenshot - mobile)
Desired outcome (refer to screenshot):
- The right side of the red line should be the click area for expanding/collapsing the menu (mobile)
- The left side of the red line should lead to the "Services" top-level nav page (mobile)
To summarize, the desktop version is functioning as intended, but there are unresolved issues with the mobile version. The alignment with the red line doesn't have to be exact, but the goal is to have two separate click events on the same line: one for accessing the Service page and another for expanding the Services submenu.
Below is my current HTML setup for Twitter Bootstrap along with the custom CSS I've implemented, as well as a screenshot showing the current mobile view (colors chosen for clarity).
<ul id="menu-mainnav" class="nav"><li><a href="http://localhost">Home</a></li>
<li class="dropdown">
<a href="http://localhost/services" data-hover="dropdown" data-target="#" class="dropdown-toggle pull-left js-activated disabled">Services</a>
<a data-toggle="dropdown" data-target="#"><b class="caret pull-right hidden-desktop"></b></a>
<ul class="dropdown-menu">
<li><a href="http://localhost/services/service1">Service 2</a></li>
<li><a href="http://localhost/services/service2">Service 1</a></li>
</ul>
</li>
</ul>
CSS:
@import url('bootstrap/css/bootstrap.css');
@import url('bootstrap/css/bootstrap-responsive.css');
body {
padding-top: 60px;
padding-bottom: 40px;
}
.caret {border-top: 6px solid #fff; border-right: 6px solid transparent; border-left: 6px solid transparent;}
.dropdown .caret {margin-top: -20px;}
Current issue screenshot