WordPress.org

Forums

How to add class to anchor using wp_nav_menu (11 posts)

  1. Hung The
    Member
    Posted 1 year ago #

    I'm newbie on develop wp theme. Now i'd like to add class to current li and last li, but i don't know how to do? Hope someone help.

    Here is my HTML code:

    <nav>
    	<ul>
    		<li><a href="#" class="selected">Home</a></li>
    		<li><a href="#">About</a></li>
    		<li><a href="#" class="last">Contact</a></li>
    	</ul>
    </nav>
  2. Sunder Deep Dasna
    Member
    Posted 1 year ago #

    In the wp-admin, go to Appearance -> Menus,

    put the class on the menu item here "CSS Classes (optional)". This will be applied on

    <li></li>

    [Code that wrecked the forums fixed]

    .

    If you can't see the "CSS Classes (optional)" in the menu item, then there is "Screen Option" in the right top of the screen and there are the options "CSS Class" under "Show advanced menu properties".

  3. Hung The
    Member
    Posted 1 year ago #

    i know this method, can you prefer me another ways? Thank you

  4. Sunder Deep Dasna
    Member
    Posted 1 year ago #

    You can use the js for this.

    But above one is better solutions.

  5. Sunder Deep Dasna
    Member
    Posted 1 year ago #

  6. ronangelo
    Member
    Posted 1 year ago #

    By current li you mean the currently selected menu item? There's already a default class for that. You can use that instead.
    ul .current-menu-item {}

    As for the last <li> you can target it like this.
    ul li:last-child {}

  7. Hung The
    Member
    Posted 1 year ago #

    how can i edit current-menu-item class?

  8. WPyogi
    Forum Moderator
    Posted 1 year ago #

    CSS should generally be modified using a child theme or custom CSS theme option or add via a plugin if your theme does not have the option. If you change theme files, your changes will be lost when the theme is updated.

    http://codex.wordpress.org/Child_Themes

  9. Hung The
    Member
    Posted 1 year ago #

    i'd like to use :last-child but it will work in IE7-, so how can i add class "last"?

  10. Sunder Deep Dasna
    Member
    Posted 1 year ago #

    <script>
    jQuery(document).ready(function($){
    $('ul.what-ever-class li').last().addClass('last');
    });
    </script>

    Hopefully this will work for you.

  11. Hung The
    Member
    Posted 1 year ago #

    thank you, i'll try :)

Topic Closed

This topic has been closed to new replies.

About this Topic