I've been struggling with a design issue for days now. I customized a template by editing its header and footer elements, incorporating Bootstrap 3 since the template was based on it. However, I recently discovered that Bootstrap 3 does not support submenus in the mobile navigation menu.
The problem lies in the mobile nav bar. To access links with submenus, users have to click on an icon located to the right of the link (referred to as the LINK icon). Clicking directly on the link itself does not trigger the submenu. Not only is the icon visually unappealing (even after switching from fontello to font awesome), but it also causes the link to shift off-center. Additionally, the clickable area is quite small. During testing, my friends attempted to click on the links first before realizing they needed to click on the icon.
I tried manipulating the JavaScript code, but being inexperienced, my efforts were fruitless. I also experimented with using media queries to hide/unhide one of the li elements; however, this method only worked for one link.
The mobile navigation is centered vertically.
Below you'll find the JS code snippet:
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');
});
Here's the corresponding HTML code:
<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 & 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>
The CSS stylings are included below:
.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 has a solution or suggestions, I would greatly appreciate the help. Ideally, both the link and the icon should be clickable, or the clickable area of the icon should overlap the link for better usability. Thank you :)