WordPress.org

Ready to get started?Download WordPress

Forums

How to add class for current page in the menu? (9 posts)

  1. Mitul Patel
    Member
    Posted 1 year ago #

    Hello,

    I want to add class for the current page. If someone click over the menu and it opens page then the menu should changes the background-color. Solution would be appreciated.

    Thanks
    M Patel

  2. WPyogi
    Volunteer Moderator
    Posted 1 year ago #

    Many themes already have a unique page-id class in the body tag. Look there and see. Then you can use that class in the CSS selector. If you post a link to your site, someone can likely offer more specific help.

  3. pvashist75
    Member
    Posted 1 year ago #

    Use any inspect tool in your browser like firebug for firefox. Then go the page and choose inspect element after right clicking over the menu item. You'll see the classes for that element in the html console. Hope it helps. Please reply if it helps or if you need more info on this

  4. Mitul Patel
    Member
    Posted 1 year ago #

    @pvashist75 I didn't get any inspect element. Is there any another solution for it.....

    I want these type -> To be add class whenever the PRODUCT page is opened.

    <ul>
    <li>HOME</li>
     <li class="active">PRODUCT</li>
    <li>Contact</li>
    <li>....</li>
    </ul>
  5. pvashist75
    Member
    Posted 1 year ago #

    Ok so i don't know what kind of menu's are you using. But i think you need to add css for the "active" class. try adding css background color for class 'current-menu-item' and 'current_page_item'. Mostly these classes are used for what you are trying to do.

    so add .current-menu-item{ background-color: (colorname); } to your css file.

    I don't know which browser are you using. so try looking for inspect element option in chrome browser. just right click and it will appear in the options.

  6. Mitul Patel
    Member
    Posted 1 year ago #

    @pvashist75....Thanks for your reply. It works with the current_menu_item.

    Really appreciated.... :)

  7. pvashist75
    Member
    Posted 1 year ago #

    Your most welcome...Happy to help you

  8. zena1939
    Member
    Posted 1 year ago #

    .current-menu-item{ background-color: (colorname); }

    Are there other css commands for the navigation menus as well?

  9. Andrew
    Forum Moderator
    Posted 1 year ago #

    Zena1939, you should create a thread if you require support.

Topic Closed

This topic has been closed to new replies.

About this Topic