Title: All menu items highlighted
Last modified: August 18, 2020

---

# All menu items highlighted

 *  Resolved [pesiiin](https://wordpress.org/support/users/pesiiin/)
 * (@pesiiin)
 * [5 years, 9 months ago](https://wordpress.org/support/topic/all-menu-items-highlighted/)
 * Hi, everything worked ok before I must change menu custom links from “#anchor”
   to “/#anchor” to work from other pages then onepage homepage only. Now on homepage
   every menu links looks active/hover. On other pages (single portfolio: [https://myconstruction.cz/portfolio/belocerkevska/](https://myconstruction.cz/portfolio/belocerkevska/))
   menu works like I wish. (Probably because anchors are not present on page).
    
   My CSS to highlight menu:
 *     ```
       .main-navigation .menu > .menu-item > a::after {
           content: "";
           position: absolute;
           left: 5%;
           color: #ff8700;  
           bottom: 0px; /* controls where the line appears on hover */
           -webkit-transform: translateX(0%);
           transform: translateX(0%);
           display: block;
           width: 0;
           height: 5px; /* controls thickness of the line */
           background-color: currentColor;
           transition: 0.3s width ease;
       }
   
       .main-navigation .menu > .menu-item > a:hover::after,
       .main-navigation .menu > .menu-item > a:focus::after,
       .main-navigation .menu > .current-menu-item > a::after, 
       .main-navigation .menu > .menu-item > a.mPS2id-highlight::after{
           width: 90%; /* controls the width of the line */
           color: #ff8700;  
       }
       ```
   
 * How could I solve this please ?
    Thanx Radek
 * The page I need help with: _[[log in](https://login.wordpress.org/?redirect_to=https%3A%2F%2Fwordpress.org%2Fsupport%2Ftopic%2Fall-menu-items-highlighted%2F%3Foutput_format%3Dmd&locale=en_US)
   to see the link]_

Viewing 4 replies - 1 through 4 (of 4 total)

 *  Plugin Author [malihu](https://wordpress.org/support/users/malihu/)
 * (@malihu)
 * [5 years, 9 months ago](https://wordpress.org/support/topic/all-menu-items-highlighted/#post-13274847)
 * Hello,
 * Your menu links get highlighted by the theme and another CSS selector in custom/
   additional CSS:
 * `.main-navigation .menu > .current-menu-item > a::after`
 * It’s normal for themes to highlight the current page menu items/links, as they
   indicate to the user the current page he/she is in. In your case, your theme’s
   CSS selector that does this is:
 * `.main-navigation .main-nav ul li[class*="current-menu-"] > a`
 * You are correct in guessing that in `/portfolio/belocerkevska/` your links do
   not get highlighted because anchors are not present on page (i.e. are not indicating
   the current page).
 * The solution is to revert the CSS by adding the following to your custom/additional
   CSS:
 *     ```
       .main-navigation .main-nav ul li[class*="current-menu-"] > a._mPS2id-h{
           color: inherit;
       }
   
       .main-navigation .menu > .current-menu-item > a._mPS2id-h::after{
           width: 0;
       }
   
       .main-navigation .main-nav ul li[class*="current-menu-"] > a._mPS2id-h:hover, 
       .main-navigation .main-nav ul li[class*="current-menu-"] > a._mPS2id-h.mPS2id-highlight{
           color: #ff8700;
       }
   
       .main-navigation .menu > .current-menu-item > a._mPS2id-h:hover::after, 
       .main-navigation .menu > .current-menu-item > a._mPS2id-h.mPS2id-highlight::after{
           width: 90%;
       }
       ```
   
 * The above CSS will also highlight the menu links dynamically as you’re scrolling
   the page, via the `.mPS2id-highlight` class (if you don’t want this, simply remove
   from the above the 2nd selector that contain the .mPS2id-highlight class).
 * I’d also suggest to go into plugin settings and enable “Prevent other scripts
   from handling plugin’s links” option (in order to prevent your theme’s smooth
   scrolling function).
 * Let me know if this helps
 *  Thread Starter [pesiiin](https://wordpress.org/support/users/pesiiin/)
 * (@pesiiin)
 * [5 years, 9 months ago](https://wordpress.org/support/topic/all-menu-items-highlighted/#post-13275213)
 * Thanx a lot for quick help.
    Now menu is working on homepage, but on single portfolio
   page there is only hover color, but no ::after line. Current additional CSS:
 *     ```
       .main-navigation .main-nav ul li[class*="current-menu-"] > a._mPS2id-h{
           color: inherit;
       }
   
       .main-navigation .menu > .current-menu-item > a._mPS2id-h::after {
           content: "";
           position: absolute;
           left: 5%;
           color: #ff8700;  
           bottom: 0px; /* controls where the line appears on hover */
           -webkit-transform: translateX(0%);
           transform: translateX(0%);
           display: block;
           width: 0;
           height: 5px; /* controls thickness of the line */
           background-color: currentColor;
           transition: 0.3s width ease;
       }
   
       .main-navigation .main-nav ul li[class*="current-menu-"] > a._mPS2id-h:hover, 
       .main-navigation .main-nav ul li[class*="current-menu-"] > a._mPS2id-h.mPS2id-highlight{
           color: #ff8700;
       }
   
       .main-navigation .menu > .current-menu-item > a._mPS2id-h:hover::after, 
       .main-navigation .menu > .current-menu-item > a._mPS2id-h.mPS2id-highlight::after{
           width: 90%; /* controls the width of the line */
       }
       ```
   
 * I think only need add some selector to width: 90% part, but really dont know 
   which one 😉
 *  Plugin Author [malihu](https://wordpress.org/support/users/malihu/)
 * (@malihu)
 * [5 years, 9 months ago](https://wordpress.org/support/topic/all-menu-items-highlighted/#post-13277063)
 * Did you fix it? I can see the line when I hover your menu items on `/portfolio/
   belocerkevska/`. The CSS selector (for the 90% width) is already there:
 * `.main-navigation .menu > .menu-item > a:hover::after`
 *  Thread Starter [pesiiin](https://wordpress.org/support/users/pesiiin/)
 * (@pesiiin)
 * [5 years, 9 months ago](https://wordpress.org/support/topic/all-menu-items-highlighted/#post-13281866)
 * Yes I tryed something and it works. Thanks a lot for Your support.

Viewing 4 replies - 1 through 4 (of 4 total)

The topic ‘All menu items highlighted’ is closed to new replies.

 * ![](https://ps.w.org/page-scroll-to-id/assets/icon-256x256.png?rev=1401043)
 * [Page scroll to id](https://wordpress.org/plugins/page-scroll-to-id/)
 * [Frequently Asked Questions](https://wordpress.org/plugins/page-scroll-to-id/#faq)
 * [Support Threads](https://wordpress.org/support/plugin/page-scroll-to-id/)
 * [Active Topics](https://wordpress.org/support/plugin/page-scroll-to-id/active/)
 * [Unresolved Topics](https://wordpress.org/support/plugin/page-scroll-to-id/unresolved/)
 * [Reviews](https://wordpress.org/support/plugin/page-scroll-to-id/reviews/)

 * 4 replies
 * 2 participants
 * Last reply from: [pesiiin](https://wordpress.org/support/users/pesiiin/)
 * Last activity: [5 years, 9 months ago](https://wordpress.org/support/topic/all-menu-items-highlighted/#post-13281866)
 * Status: resolved