Title: Css classes not being added
Last modified: October 3, 2019

---

# Css classes not being added

 *  Resolved [steven530](https://wordpress.org/support/users/steven530/)
 * (@steven530)
 * [6 years, 6 months ago](https://wordpress.org/support/topic/css-classes-not-being-added/)
 * Hi there,
 * Thanks for the plugin, I’ve been working with it for a couple of days and it 
   seems quite promising.
 * I am having problems with it though and I hope you can help.
 * The plugin adds the CSS class to the 1st link (Home) but not the other two. There
   are other styling issues (maybe because of the way span:after is being used).
 * Here’s the CSS I am using:
 * ### css for homepage ##
 * .primary-nav ul li.menu-item.current-menu-item > a > span::after {
    height: 0px;}
 * .ps2id a:hover::after {
    content: “”; position: absolute; bottom: 45px; margin:
   auto; margin-left: -2px; background: #fd226a; height: 6px; width: calc(62% + 
   6px); z-index: -1; -webkit-border-radius: 25px; -moz-border-radius: 25px; }
 * a.mPS2id-target:after, a.mPS2id-highlight:after{
    content: “”; position: absolute;
   bottom: 45px; margin: auto; margin-left: -2px; background: #fd226a; height: 6px;
   width: 51%; z-index: -1; -webkit-border-radius: 25px; -moz-border-radius: 25px;}
 * ### END ###
 * Maybe the Theme isn’t compatible with your plugin, could you take a look please?
 * Happy to provide you with temporary login details if needed.
 * Thanks,
    Steven.
 * The page I need help with: _[[log in](https://login.wordpress.org/?redirect_to=https%3A%2F%2Fwordpress.org%2Fsupport%2Ftopic%2Fcss-classes-not-being-added%2F%3Foutput_format%3Dmd&locale=en_US)
   to see the link]_

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

 *  Plugin Author [malihu](https://wordpress.org/support/users/malihu/)
 * (@malihu)
 * [6 years, 6 months ago](https://wordpress.org/support/topic/css-classes-not-being-added/#post-11993626)
 * Hi,
 * You need to reset all the highlight options you enabled so every link can be 
   highlighted. Go to plugin settings and disable:
 * “Allow only one highlighted element at a time”
    “Keep the current element highlighted
   until the next one comes into view” “Highlight by next target”
 * Let me know so I can check it
 *  Thread Starter [steven530](https://wordpress.org/support/users/steven530/)
 * (@steven530)
 * [6 years, 6 months ago](https://wordpress.org/support/topic/css-classes-not-being-added/#post-11996791)
 * Hi Malihu,
 * Fantastic, that’s worked, thanks for your help and the plugin.
 * I just need to figure out how to get the themes default highlight and hover actions
   working and then I can start editing the content.
 * Thanks again for your help.
 * Rgds,
    Steven.
 *  Plugin Author [malihu](https://wordpress.org/support/users/malihu/)
 * (@malihu)
 * [6 years, 6 months ago](https://wordpress.org/support/topic/css-classes-not-being-added/#post-11996943)
 * Try this:
 * Replace the custom CSS you added, with the following:
 *     ```
       .primary-nav > ul > li.menu-item.current-menu-ancestor > a._mPS2id-h > span:after, 
       .primary-nav > ul > li.menu-item.current-menu-item > a._mPS2id-h > span:after{
           width: 0;
       }
   
       .primary-nav > ul > li.menu-item.current-menu-ancestor:hover > a._mPS2id-h > span:after, 
       .primary-nav > ul > li.menu-item.current-menu-item:hover > a._mPS2id-h > span:after, 
       .primary-nav > ul > li.menu-item.current-menu-ancestor > a._mPS2id-h:hover > span:after, 
       .primary-nav > ul > li.menu-item.current-menu-item > a._mPS2id-h:hover > span:after, 
       .primary-nav > ul > li.menu-item.current-menu-ancestor > a._mPS2id-h.mPS2id-highlight > span:after, 
       .primary-nav > ul > li.menu-item.current-menu-item > a._mPS2id-h.mPS2id-highlight > span:after{
           width: calc(100% + 4px);
       }
       ```
   
 * The above will work better as it doesn’t create additional pseudo-elements and
   keeps the same transitions as the original theme CSS 😉
 *  Thread Starter [steven530](https://wordpress.org/support/users/steven530/)
 * (@steven530)
 * [6 years, 6 months ago](https://wordpress.org/support/topic/css-classes-not-being-added/#post-11997108)
 * That’s worked perfectly.
 * Thanks a lot… I would’ve spent a couple of hours setting max-widths etc.
 * I’ve left a review for your plugin.
 * Thanks again Malihu.
 * Rgds,
    Steven.
 *  Plugin Author [malihu](https://wordpress.org/support/users/malihu/)
 * (@malihu)
 * [6 years, 6 months ago](https://wordpress.org/support/topic/css-classes-not-being-added/#post-11997895)
 * Great! Thanks a lot for your review 🙂
 *  Thread Starter [steven530](https://wordpress.org/support/users/steven530/)
 * (@steven530)
 * [6 years, 6 months ago](https://wordpress.org/support/topic/css-classes-not-being-added/#post-12013883)
 * Hi Malihu,
 * I have an outstanding issue using your plugin I hope you can help me with.
 * It’s more of a theme issue – I’ve contacted them but they’re not getting back
   to me and I’m hoping you can cast an eye over it… when clicking a link on the
   Mobile Menu to the same page the menu should toggle but it doesn’t.
 * I’ve Google’d it and have tried adding this to the ‘footer’ template file:
 * <script type=”text/javascript”>
    jQuery(document).ready(function($){ $(‘#li a’).
   on(‘click’, function(){ $(“#nav”).hide(); $(“#mobile-hamburger-toggle”).removeClass(“
   is-active”); }); }); </script>
 * I’m assuming something like this should work but I may be struggling choosing
   the right CSS Selectors.
 * What do you think, is the the correct approach?
 * Thanks again,
    Steven.
 *  Plugin Author [malihu](https://wordpress.org/support/users/malihu/)
 * (@malihu)
 * [6 years, 6 months ago](https://wordpress.org/support/topic/css-classes-not-being-added/#post-12014001)
 * [@steven530](https://wordpress.org/support/users/steven530/) Hi Steven,
 * Of course I can help 🙂
 * This is a common issue with mobile menus (I’ve made a separate post about it 
   [here](http://manos.malihu.gr/how-to-close-mobile-menu-with-page-scroll-to-id/)).
 * It’s indeed a theme issue. As a theme developer, it’s easy to neglect to program
   the mobile menu to close, when same-page links/anchors are clicked (it’s easy
   to neglect such functionality, especially if you have little experience with 
   single-page sites/apps or pwa).
 * Your approach is the correct one and you’re right about choosing the right selectors.
   In addition, it’s much better to use the theme’s event to close the menu. Just
   copy/paste the following script in your template:
 *     ```
       <script>
       (function($){
           $(window).on("load",function(){
               $(document).on("click",".primary-nav .menu-item ._mPS2id-h",function(){
                   $(".mobile-hamburger-toggle.is-active").trigger("touchstart");
               });
           });
       })(jQuery);
       </script>
       ```
   
 * The above code will close the mobile menu (if it’s opened) when a “Page scroll
   to id” link (i.e. a mobile menu link that scrolls the page) is clicked 😉
 * Let me know
 *  Thread Starter [steven530](https://wordpress.org/support/users/steven530/)
 * (@steven530)
 * [6 years, 6 months ago](https://wordpress.org/support/topic/css-classes-not-being-added/#post-12014287)
 * Thanks Malihu,
 * I’ve added your code to the footer.php file just before the closing body tags:
 * <script>
    (function($){ $(window).on(“load”,function(){ $(document).on(“click”,”.
   primary-nav .menu-item ._mPS2id-h”,function(){ $(“.mobile-hamburger-toggle.is-
   active”).trigger(“touchstart”); }); }); })(jQuery); </script>
 * </body>
    </html>
 * It still scrolls to the section but isn’t closing/toggleing the menu.
 * Is the the right place to add the code, or maybe I doing something wrong?
 * Thanks,
    Steven.
 *  Plugin Author [malihu](https://wordpress.org/support/users/malihu/)
 * (@malihu)
 * [6 years, 6 months ago](https://wordpress.org/support/topic/css-classes-not-being-added/#post-12014334)
 * Yes, this is the correct place. If you test it by loading your page on a mobile
   device or using developer tools device toolbar, it works (the mobile menu closes).
 * If you test it by loading the page in desktop mode/large screen and then “shrink”
   the browser to test the mobile menu, it doesn’t work.
 * This is because the theme uses different events for desktop and mobile (“click”
   and “touchstart”).
 * I used the mobile event cause it’s where/when the mobile menu appears, but you
   can also add the click event if you want to:
 *     ```
       <script>
       (function($){
           $(window).on("load",function(){
               $(document).on("click",".primary-nav .menu-item ._mPS2id-h",function(){
                   $(".mobile-hamburger-toggle.is-active").trigger("touchstart").trigger("click");
               });
           });
       })(jQuery);
       </script>
       ```
   
 * By ddding the click event (in addition to touchstart), you’ll be able to test
   it on any viewport.
 * Let me know if adding both events works as expected
    -  This reply was modified 6 years, 6 months ago by [malihu](https://wordpress.org/support/users/malihu/).
 *  Thread Starter [steven530](https://wordpress.org/support/users/steven530/)
 * (@steven530)
 * [6 years, 6 months ago](https://wordpress.org/support/topic/css-classes-not-being-added/#post-12015880)
 * Ah thanks, I did notice the touchstart trigger.
 * Everything works as expected. You’ve been a great help, thanks Malihu!
 * Regards,
    Steven.

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

The topic ‘Css classes not being added’ 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/)

## Tags

 * [css](https://wordpress.org/support/topic-tag/css/)
 * [css classes](https://wordpress.org/support/topic-tag/css-classes/)
 * [main menu](https://wordpress.org/support/topic-tag/main-menu/)

 * 10 replies
 * 2 participants
 * Last reply from: [steven530](https://wordpress.org/support/users/steven530/)
 * Last activity: [6 years, 6 months ago](https://wordpress.org/support/topic/css-classes-not-being-added/#post-12015880)
 * Status: resolved