WordPress.org

Ready to get started?Download WordPress

Forums

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

  1. nhalauxehoi
    Member
    Posted 6 months 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 6 months 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. nhalauxehoi
    Member
    Posted 6 months ago #

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

  4. Sunder Deep Dasna
    Member
    Posted 6 months ago #

    You can use the js for this.

    But above one is better solutions.

  5. Sunder Deep Dasna
    Member
    Posted 6 months ago #

  6. ronangelo
    Member
    Posted 6 months 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. nhalauxehoi
    Member
    Posted 6 months ago #

    how can i edit current-menu-item class?

  8. WPyogi
    Volunteer Moderator
    Posted 6 months 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. nhalauxehoi
    Member
    Posted 6 months 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 6 months ago #

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

    Hopefully this will work for you.

  11. nhalauxehoi
    Member
    Posted 6 months ago #

    thank you, i'll try :)

Reply

You must log in to post.

About this Topic