Changing logo and menu color based on section

Design help Custom code
1

This I have managed to achieve with the help of Vitamina ([Cloneable] Changing logo and menu color based on section - Webflow). I need help on changing the menu link to another colour and bottom margin colour on hover and in active page.

Here is the link: Home2

And code I used:

    <style>
    /* logos and menu items transitions setter */
    img.logo-dark, img.logo-white, body.color .navigation-items a {
        transition: 0.3s;
    }/* show/hide logos based on body class */

    body.color img.logo-white, body.white img.logo-dark {
        opacity: 0 !important;
    }

    body.color img.logo-dark, body.white img.logo-white {
        opacity: 1 !important;
    }/* change menu items color based on body class */

    body.color .navigation-items a {
        color: #222222;
      	border-bottom: 1px solid transparent;
    }
    body.color .navigation-items a hover {
      	border-bottom: 1px solid;
    }


    body.white .navigation-items a {
        color: #ffffff;
      	border-bottom: 1px solid transparent;
    }
    </style>

    <script>
    /* Changing Colors and Logo by Section */
    function checkSectionTheme() {
        var pos = $(window).scrollTop() + 50; // current scroll position + margin to tune the change between sections

        $('.theme-white, .theme-dark').each(function() {
            var pos_top = $(this).position().top; // current section top scroll position
            var pos_bottom = $(this).position().top + $(this).innerHeight(); // current section bottom scroll position
            var class_name = ($(this).hasClass("theme-white")) ? "white" : "color"; // define class_name that will be added to body based on current section class (theme-white or theme-dark)

            // if scroll position is between section top and bottom scroll positions add class_name to body element
            // the colors and transition are defined in CSS at head code above
            if (pos_top <= pos && pos_bottom > pos) {
                if (class_name == "white") {
                    $("body").removeClass("color");
                } else {
                    $("body").removeClass("white");
                }
                $("body").addClass(class_name);
            }
        });
    }
    // run function when document is loaded
    $(document).ready(function() {
        checkSectionTheme();
    });
    // also run when user makes scroll
    $(window).scroll(function() {
        checkSectionTheme();
    });
    </script>

Here is my site Read-Only: LINK
(how to share your site Read-Only link)