2

I am trying to get my Nav Submenu working on mobile with Bootstrap 3.2.0.

Right now the submenu is working fine on desktop browsers but not on mobile. When I click a link to open dropdown menu on mobile it opens the dropdown, when I click anywhere else the dropdown closes. So the problem is when I click a link with a submenu the whole dropdown closes and I can't see any of the links that need to be seen.

I've tried a few workarounds but nothing seems to be working.

Any help would be greatly appreciated. If anything I'm saying is unclear please feel free to ask.

Here is the HTML and CSS(for the hover dropdown)

HTML:

<ul class="nav navbar-nav">
    <li class='GeneralInfo dropdown'>
        <a href='#' class='dropdown-toggle' data-toggle='dropdown'><span class='glyphicon glyphicon-tasks navDown'></span>General Info</a>
        <ul class='dropdown-menu' role='menu'>
            <li><a href='/email_list.php'>Employee Directory</a></li>
            <li><a href='/docs.php'>Documents</a></li>
            <li><a href='/ftp.php'>FTP</a></li>
            <li><a href='/manage/'>Manage</a></li>
            <li><a href='/flyspray'>Bug/Feature Tracking</a></li>
        </ul>
    </li>
    <li class='JobInfo dropdown'>
        <a href='#' class='dropdown-toggle' data-toggle='dropdown'><span class='glyphicon glyphicon-info-sign navDown'></span>Job Info</a>
        <ul class='dropdown-menu' role='menu'>
            <li><a href='/job/list'>Job List</a></li>
            <li><a href='/files_required.php'>Files Rqrd</a></li>
            <li><a href='/incoming_list.php'>Incoming Data List</a></li>
            <li class='dropdown-submenu'>
                <a tabindex='-1' href='javascript:void(0)'>Signoffs</a>
                <ul class='dropdown-menu signoffDropdown'>
                    <li><a href='signoff.php?dep=Workorders'>Workorders</a></li>
                    <li><a href='signoff.php?dep=CNC'>CNC</a></li>
                </ul>
            </li>
            <li><a href='/leader_list2.php'>Leader List</a></li>
            <li><a href='/milestones'>Milestone/Timelines</a></li>
        </ul>
    </li>
    <li class='QIRInfo dropdown'>
        <a href='#' class='dropdown-toggle' data-toggle='dropdown'><span class='glyphicon glyphicon-eye-open navDown'></span>QIR Info</a>
        <ul class='dropdown-menu' role='menu'>
            <li><a href='/open_qir.php'>Open QIRs</a></li>
            <li><a href='/qir'>Search QIR</a></li>
        </ul>
    </li>
</ul>

Submenu CSS:

.dropdown-submenu {
    position: relative;
}

.dropdown-submenu>.dropdown-menu {
    top: 0;
    left: 100%;
    margin-top: -6px;
    -webkit-border-radius: 0 6px 6px 6px;
    -moz-border-radius: 0 6px 6px;
    border-radius: 0 6px 6px 6px;
}

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

.dropdown-submenu>a:after {
    display: block;
    content: " ";
    float: right;
    width: 0;
    height: 0;
    border-color: transparent;
    border-style: solid;
    border-width: 5px 0 5px 5px;
    border-left-color: #333;
    margin-top: 5px;
}

.dropdown-submenu>a:hover:after {
    border-left-color: #fff;
}

.dropdown-submenu > ul > li {
    font-size: 1.15em;
}

@media (max-width:768px){
    .dropdown-submenu > ul > li {
        margin-left: 15px;
    }
}

.dropdown-submenu.pull-left {
    float: none;
}

.dropdown-submenu.pull-left>.dropdown-menu {
    left: -100%;
    margin-left: 10px;
    -webkit-border-radius: 6px 0 6px 6px;
    -moz-border-radius: 6px 0 6px 6px;
    border-radius: 6px 0 6px 6px;
}

JS:

//SIGNOFFS DROPDOWN
$('.dropdown-toggle').on('hide.bs.dropdown', function () {
    return false;
});

Thanks in advance for any and all help!

creimers
  • 4,975
  • 4
  • 33
  • 55
noelllll
  • 65
  • 3
  • 13
  • Bootstrap doesn't use :hover in their menus because of touch devices, there is no way to :hover on a touch device. Change your submenus to clicks. http://www.bootply.com/97919 - is one example – Christina Sep 24 '14 at 17:10
  • Well, you can trigger :hover on most touch devices, but the UX involved isn't great. – cvrebert Sep 24 '14 at 17:14
  • @Christina Thanks for that link. I'm trying to implement it now and it looks like it's VERY close to working. Only problem I have still is when I click the link to open the submenu, the "open" class is removed from the original dropdown. 'open' class is added to the submenu, but removed from dropdown, so I still can't see the link. Any ideas? – noelllll Sep 25 '14 at 17:06
  • Do your best, make jsBin or Fiddle, then make another question. I can't guess at what's wrong. Also, read this thread, there's a script that may help: https://github.com/twbs/bootstrap/issues/3637 – Christina Sep 25 '14 at 17:12
  • Never mind on that github thread, it's about something else. Make a fiddle or bin and re-ask with another question on SO – Christina Sep 25 '14 at 17:13

1 Answers1

0

Seems like your issue is possibly a duplicate to this one here:

Keep Bootstrap Dropdown Open When Clicked Off

The issue I'm linking to doesn't state that it's only on mobile, but hoping the solution provided may apply to your issue as well. Good luck!

Community
  • 1
  • 1
khilley
  • 577
  • 3
  • 8