Change mobile nav open action by clicking on link not icon

Question

I have a problem I've been trying to work out for over a week. I have been editing a premade template for its header and footer elements. I used Bootstrap 3 for the rest because the template was Bootstrap 3. I've since found out that Bootstrap 3 did not support sub menus on the mobile nav.

The problem is with the mobile nav. The links with sub menus can only be opened by clicking on an icon to the right of the link (LINK icon). Clicking on the link itself does not open the sub menu. The icon is so ugly (even when I changed out fontello for font awesome) and shifts the link off centre. Plus it's such a small area to click on. I tested it with a few friends and they tried clicking on the links before finding that they had to click on the icon.

I've tried editing the JS code but, because I'm no expert, that did not work. I even tried using display:none for hide/unhide on one of the li elements using media queries; but that only works for one link.

The mobile nav is vertical and centred.

Below is the JS code.

var $menu = $('.nav-menu', '#primary-navigation');

// add classes
$menu.find('li').each(function() {
    if($(this).children('ul').length) {
        $(this).addClass('has-submenu');
        $(this).find('>a').after('<span class="submenu-toggle"></span>');
    }
});

var $submenuTrigger = $('.has-submenu > .submenu-toggle');
// submenu link click event
$submenuTrigger.on( "click", function() {
    $(this).parent().toggleClass('active');
    $(this).siblings('ul').toggleClass('active');
});

And here is the html

<nav id="primary-navigation" class="site-navigation primary-navigation" role="navigation"> 

<a class="menu-toggle"><span class="lines"></span></a>

    <div class="nav-menu">
        <ul>
            <li><a href="index.html">Home</a></li>
            <li><a href="#" class="selected">Explore</a>
                <ul>
                    <li><a href="ex_languages.html">Languages</a></li>
                    <li><a href="ex_gallery.html">Gallery</a></li>
                    <li><a href="ex_glossary.html">Glossary</a></li>
                </ul>
            </li>
            <li><a href="#">About</a>
                <ul>
                    <li><a href="ab_about.html">About</a></li>
                    <li><a href="ab_faq.html">Questions &amp; Answers</a></li>
                </ul>                            
            </li>
            <li><a href="blog/index.php">Blog</a></li>
            <li><a href="contact.html">Contact</a></li>
        </ul>
    </div>
</div>

Here is the css

.submenu-toggle:before {
    font-family: "Font Awesome 5 Free";
    content: "\f0d7";
    color:#fff; 
    font-size: 15px; 
    font-weight: 900; 
    display: inline-block; 
    width: 26px; 
    line-height: 24px; 
    text-align: center;
    margin-left: -8px; 
    margin-bottom: 8px;
    cursor:pointer;
}
.active > .submenu-toggle:before {
    font-family: "Font Awesome 5 Free";
    content: "\f0d8";
}

If anyone can help, that would be great. It's okay if both the link and icon are clickable, but having the link clickable, or having the click area of the icon extending over the link, is the most important.

Thanks :)

Answer 1

You are correct - Bootstrap 3 do not support sub menus on the mobile nav. Which is why you should handle it yourself.

By following your logic the trigger should be:

var $submenuTrigger = $('.has-submenu > .submenu-toggle, .has-submenu > a');

There is a little hack you need to add as well:

$('.nav-menu > ul').on('click', function(event) {
    event.stopPropagation();
});

This is needed to prevent the event bubbling which is used by Bootstrap - in other words you disable Bootstrap for the sub items to enable your code.