Title: highlight css problem
Last modified: May 25, 2024

---

# highlight css problem

 *  Resolved [tiggerkater](https://wordpress.org/support/users/tiggerkater/)
 * (@tiggerkater)
 * [2 years ago](https://wordpress.org/support/topic/highlight-css-problem/)
 * dear malihu,
 * thanks for your plugin.
 * i am using it on several sites, but cannot figure out how to setup the css properly
   for highlighting.
 * the websites are one page sites (built with generatepress) with anchor links,
   which should change color on scrolling and jumping to sections. the “active” 
   section should stay highlighted.
 * i can see the ps2id classes but dont know how to call the right attribute.
 * i tried e.g. (and many other versions 😉
 *     ```wp-block-code
       #primary-menu .main-nav a.__mPS2id-highlight {
       color: #FBBE4D;
       } 
       #sticky-navigation a.__mPS2id-highlight {
       background: #FBBE4D; 
       } 
       ```
   
 * please help! thanks!
 * The page I need help with: _[[log in](https://login.wordpress.org/?redirect_to=https%3A%2F%2Fwordpress.org%2Fsupport%2Ftopic%2Fhighlight-css-problem%2F%3Foutput_format%3Dmd&locale=en_US)
   to see the link]_

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

 *  Plugin Author [malihu](https://wordpress.org/support/users/malihu/)
 * (@malihu)
 * [2 years ago](https://wordpress.org/support/topic/highlight-css-problem/#post-17780215)
 * Hello,
 * The correct CSS should be:
 *     ```wp-block-code
       #primary-menu.main-nav a.mPS2id-highlight {
       	color: #FBBE4D;
       } 
       ```
   
 * The second CSS rule you have is not needed as there’s no `#sticky-navigation`
   in your page.
 * Also, go to plugin settings and disable the “Keep the current element highlighted
   until the next one comes into view” option.
 * Let me know 🙂
 *  Thread Starter [tiggerkater](https://wordpress.org/support/users/tiggerkater/)
 * (@tiggerkater)
 * [2 years ago](https://wordpress.org/support/topic/highlight-css-problem/#post-17780315)
 * thanks mailhu,
   for the super fast reply!i tried your code and it works e.g. on
   the blog page, but it does not on homepage/front-page.there all links are red
   and not only the one of the clicked section…kind regards!
 * ps (edit): interestingly the “hover” color doesn´t work, too, so perhaps i have
   to ask GP support!
 *  Plugin Author [malihu](https://wordpress.org/support/users/malihu/)
 * (@malihu)
 * [2 years ago](https://wordpress.org/support/topic/highlight-css-problem/#post-17780397)
 * No problem 🙂
 * To reset the theme’s highlight and keep “Page scroll to id” scrolling and hover
   highlight, add the following to your CSS:
 *     ```wp-block-code
       .main-navigation .main-nav ul li[class*="current-menu-"] > a:not(:hover):not(.mPS2id-highlight){
       	color: #FBBE4D;
       }
       ```
   
 * Also, since you don’t need to highlight the mobile menu links, you should change
   the “Selector(s)” option in plugin settings to:
 *     ```wp-block-code
       #primary-menu a[href*='#']:not([href='#'])
       ```
   
 *  Thread Starter [tiggerkater](https://wordpress.org/support/users/tiggerkater/)
 * (@tiggerkater)
 * [2 years ago](https://wordpress.org/support/topic/highlight-css-problem/#post-17781787)
 * dear malihu,
   thanks for all your help. we are getting there – but still a tiny
   way to go 😉
 * the hovering works now, but the color does not change when scrolling through 
   the one pager and does not stay highlighted, when the menu-item is selected. 
   what can cause the problem?
   and please clarify for me the “selector(s)” option:
   should i put your code in the the “selectors are excluded” box?kind regards and
   many thanks again!
 *  Plugin Author [malihu](https://wordpress.org/support/users/malihu/)
 * (@malihu)
 * [2 years ago](https://wordpress.org/support/topic/highlight-css-problem/#post-17781866)
 * No, not in the “selectors are excluded” box. You change the first “Selector(s)”
   field from:
 * `a[href*='#']:not([href='#'])`
 * to:
 * `#primary-menu a[href*='#']:not([href='#'])`
 * Change this option, save changes and let me know so I can check it again.
 *  Thread Starter [tiggerkater](https://wordpress.org/support/users/tiggerkater/)
 * (@tiggerkater)
 * [2 years ago](https://wordpress.org/support/topic/highlight-css-problem/#post-17781867)
 * thanks for clarifying, i just changed it! many thanks!
 *  Plugin Author [malihu](https://wordpress.org/support/users/malihu/)
 * (@malihu)
 * [2 years ago](https://wordpress.org/support/topic/highlight-css-problem/#post-17781873)
 * OK try one more thing: 
   In plugin settings disable “Allow only one highlighted
   element at a time” option.
 *  Thread Starter [tiggerkater](https://wordpress.org/support/users/tiggerkater/)
 * (@tiggerkater)
 * [2 years ago](https://wordpress.org/support/topic/highlight-css-problem/#post-17782744)
 * YEEESSS!!!
   removing th “allow only one highlighted element” did the trick!
 * thanks a million! all the best!
    -  This reply was modified 2 years ago by [tiggerkater](https://wordpress.org/support/users/tiggerkater/).
 *  Thread Starter [tiggerkater](https://wordpress.org/support/users/tiggerkater/)
 * (@tiggerkater)
 * [2 years ago](https://wordpress.org/support/topic/highlight-css-problem/#post-17783161)
 * ps: on another onepage i have again problems with the “hover” attribute. should
   i open a new topic to send you the site-link?
   thanks again for your support (
   just gave you a well deserved 5 star review.)
 *  Plugin Author [malihu](https://wordpress.org/support/users/malihu/)
 * (@malihu)
 * [2 years ago](https://wordpress.org/support/topic/highlight-css-problem/#post-17784624)
 * Thanks for the review 🙂
 * No need to open a new topic. Tell me which page you want to me to check 🙂
 *  Thread Starter [tiggerkater](https://wordpress.org/support/users/tiggerkater/)
 * (@tiggerkater)
 * [2 years ago](https://wordpress.org/support/topic/highlight-css-problem/#post-17785783)
 * its this page: [https://www.kochtafelkultur.at/](https://www.kochtafelkultur.at/)
   
   the highlighting works perfectly, but hovering does not work. the color is set
   in the theme editor, but if i enable your css from above,
 *     ```wp-block-code
       .main-navigation .main-nav ul li[class*="current-menu-"] > a:not(:hover):not(.mPS2id-highlight){
       	color: #FBBE4D;
       }
       ```
   
 * hovering does not work and also highlighting is somehow “disturbed”.
   so perhaps
   the wrong selector. but i cant figure out the problem…. (my tiny css skills 😉
 *  Plugin Author [malihu](https://wordpress.org/support/users/malihu/)
 * (@malihu)
 * [2 years ago](https://wordpress.org/support/topic/highlight-css-problem/#post-17787405)
 * No problem 🙂
 * Not sure if this is the color you want for the hover but you can simply do this:
 *     ```wp-block-code
       #primary-menu.main-nav a:hover {
           color: #A71B18;
       }
       ```
   
 * Let me know 🙂
 *  Thread Starter [tiggerkater](https://wordpress.org/support/users/tiggerkater/)
 * (@tiggerkater)
 * [2 years ago](https://wordpress.org/support/topic/highlight-css-problem/#post-17788576)
 * thanks malihu,
 * it works, as it should.
   Interesting to know would be for me: why does the (hovering)
   color/scheme selected in the customizer not work, and the costum css does?thanks
   again for all your help, best horst
 *  Plugin Author [malihu](https://wordpress.org/support/users/malihu/)
 * (@malihu)
 * [2 years ago](https://wordpress.org/support/topic/highlight-css-problem/#post-17790399)
 * You’re welcome 🙂
 * Sometimes we need to override some CSS rule with another one. Selecting a color
   in the customizer adds a CSS rule to the document but another plugin or some 
   other CSS might override it. In such cases we need to override it again ourselves
   with another rule.
 *  Thread Starter [tiggerkater](https://wordpress.org/support/users/tiggerkater/)
 * (@tiggerkater)
 * [2 years ago](https://wordpress.org/support/topic/highlight-css-problem/#post-17790989)
 * thanks malihu for clarifying,
   so i will try to do this in the future as a first
   step.and thanks again for all your help and great support!kind regards!

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

The topic ‘highlight css problem’ 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/)

 * 15 replies
 * 2 participants
 * Last reply from: [tiggerkater](https://wordpress.org/support/users/tiggerkater/)
 * Last activity: [2 years ago](https://wordpress.org/support/topic/highlight-css-problem/#post-17790989)
 * Status: resolved