Css classes not being added

  • Resolved steven530

    (@steven530)


    5 years, 2 months ago

    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 to see the link]

Viewing 10 replies - 1 through 10 (of 10 total)
  • Plugin Author malihu

    (@malihu)

    5 years, 2 months ago

    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

    (@steven530)

    5 years, 2 months ago

    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

    (@malihu)

    5 years, 2 months ago

    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

    (@steven530)

    5 years, 2 months ago

    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

    (@malihu)

    5 years, 2 months ago

    Great! Thanks a lot for your review 🙂

    Thread Starter steven530

    (@steven530)

    5 years, 2 months ago

    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

    (@malihu)

    5 years, 2 months ago

    @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).

    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

    (@steven530)

    5 years, 2 months ago

    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

    (@malihu)

    5 years, 2 months ago

    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 5 years, 2 months ago by malihu.
    Thread Starter steven530

    (@steven530)

    5 years, 2 months ago

    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.