Custom Woocommerce Menu

Hi,

I have created a custom fixed submenu for my woocommerce shop page so that users can select a product category from it. It is working just fine other than when a category item is selected it doesn’t stay active.

I know with the default woocommerce menu I can add .current-cat a { font-weight: bold; } so that it shows the link active. However, this won’t work for my custom menu items.

This is the code I have put into my header.php page of my theme:

echo '
<div class="navbar navbar-fixed-top">
            <div class="navbar-inner">
                <div class="container">
                    <div class="pull-left">
                        <a class="btn menu" href="/products/all-products">All</a>
                        <div class="btn-group btn-group-merge">
                            <a class="btn menu" href="#" data-toggle="dropdown">Industries<i class="fa fa-caret-down menu"></i></a>
                            <ul class="dropdown-menu">
                                 <li><a href="/products/product-category-one">Category #1</a></li>
                                 <li><a href="/products/product-category-two">Category #2</a></li>
                                 <li><a href="/products/product-category-three">Category #3</a></li>
                                 <li><a href="/products/product-category-four">Category #4</a></li>
                                 <li><a href="/products/product-category-five">Category #5</a></li>
                                 <li><a href="/products/product-category-six">Category #6</a></li>
                                 <li><a href="/products/product-category-seven">Category #7</a></li>
                                 <li><a href="/products/product-category-eight">Category #8</a></li>
                                 <li><a href="/products/product-category-nine">Category #9</a></li>
                                 <li><a href="/products/product-category-ten">Category #10</a></li>
                            </ul>
                        </div>
                        <div class="btn-group btn-group-merge">
                            <a class="btn menu" href="#" data-toggle="dropdown">Sort By<i class="fa fa-caret-down menu"></i></a>
                            <ul class="dropdown-menu">
                                 <li><a href="/?orderby=default">Default</a></li>
                                 <li><a href="/?orderby=popularity">Popularity</a></li>
                                 <li><a href="/?orderby=rating">Average Rating</a></li>
                                 <li><a href="/?orderby=date">New Releases</a></li>
                            </ul>
                        </div>
                    </div>
                </div>
            </div>
        </div>
';

It is also using bootstrap.js and jquery.js to work properly.

How can I make the menu item active when it is clicked on?

Thanks 🙂