CODEWITHSUNDEEP
phpjquerycsswordpressmenu
Demuri Celidze
Demuri Celidze

Reputation: 615

How to add some class to wordpress menu link?

Need to add a class to menu links, Wordpress 4.x. In backend panel I can only add classes to <li> containers, not to <a>. I tried to add class .getscroll to <li> and use jQuery script:

$('.getscroll a').addClass('scroll');

That doesn't work, and with document.ready too. The link still looks like <a href="...">text</a>. Is there any way to add class to <a>?

HTML code of menu:

<nav id="navigation" class="white-nav b-shadow first-nav navbar-style2">
    <div class="nav-inner">
        <div class="logo">
            <!-- Navigation Logo Link -->
            <a href="/" class="scroll">
                <img class="site_logo" src="/lg-logo.png" alt="L">              </a>
        </div>
        <!-- Mobile Menu Button -->
        <a class="mobile-nav-button colored"><i class="fa fa-bars"></i></a>
        <!-- Navigation Menu -->
        <div class="nav-menu clearfix semibold">

            <ul id="menu-3021" class="nav uppercase font-primary">
                <li id="menu-item-2058" class="getscroll menu-item menu-item-type-custom menu-item-object-custom current-menu-item current_page_item menu-item-2058"><a title="Who we are" href="/#about">Who we are</a></li>
                <li id="menu-item-2059" class="getscroll menu-item menu-item-type-custom menu-item-object-custom current-menu-item current_page_item menu-item-2059"><a title="What we do" href="/#what-we-do">What we do</a></li>
            </ul>
        </div>
    </div>
</nav>

Upvotes: 1

Views: 1405

Answers (1)

rnevius
rnevius

Reputation: 27092

You're using the default WordPress version of jQuery, which means $ isn't defined (because jQuery is included in no-conflict mode). You need to modify your document ready function slightly:

(function($){
    $('.getscroll a').addClass('scroll');
})(jQuery);

Alternatively, you can replace the $ with jQuery; so it becomes:

jQuery('.getscroll a').addClass('scroll');

Read more about no-conflict mode in the Codex.

Upvotes: 1

Related Questions