1. PROMO Get 60% OFF Lifetime Pro Membership & access all our Pro Divi Extensions, Divi Layouts, Divi AI Generator, Divi Block, etc.VIEW PRICING
Dismiss Notice
UPDATE Custom Color Scheme + Premade Divi Layouts - A perfect combination to boost productivity. New 'Gadget Repair' layout added.Try our Custom Color Layouts
BEST Divi Block - A revolutionary online drag & drop tool to easily mix & match 478+ premade blocks to kick start your Divi site design. Special module designs are included as well.
Learn MoreTry Free Version

Solved Anchor Links & Child Menus

Discussion in 'Basic Support Forum' started by webward3, Apr 27, 2020.

  1. webward3

    webward3 Member
    Divi Ultimate Child Theme Divi Powerful Child Theme Divi Ultimate Archive Plugin Divi Ultimate Blog Plugin Divi Ultimate Header Plugin Divi Ultimate Footer Plugin

    Hi - I'm using a one page site with anchor links for the main menu. I need the main menu anchor links to behave like as if they were actual links, i.e. use the active link property so that if some click the menu link it will change to the active link color. Right now only the Home button is using the active link property: https://pettygigs.wpmudev.host/

    For my other site, I need to use the active link property when children menus are selected. Currently, only menus without child menus are using the active link property: https://atdmf.wpmudev.host/
     
    1. PRO MEMBER PERKS Divi Ultimate Header Plugin - Custom Divi Builder header on desktop + default slide in / fullscreen menu on mobile:Learn More
  2. Divi.Help Pro Support

    Divi.Help Pro Support Administrator
    Staff Member

    That would require custom coding. Here's a tutorial on that: https://divisoup.com/how-to-highlight-active-links-on-scroll-and-click-for-one-page-divi-websites/
    Try the below CSS in Divi > Theme Options > Custom CSS:
    Code:
    .et_pb_fullwidth_menu ul li.current-menu-ancestor a {
        color: #f21c1e!important;
    }
     
  3. webward3

    webward3 Member
    Divi Ultimate Child Theme Divi Powerful Child Theme Divi Ultimate Archive Plugin Divi Ultimate Blog Plugin Divi Ultimate Header Plugin Divi Ultimate Footer Plugin

    Thanks for the help. Child menu issue resolved. For the anchor links, I followed the instructions closely but now getting a jQuery error in my page header. Is there something interfering with js in the theme?
     

    Attached Files:

    1. PRO MEMBER PERKS Divi Block Pro - Premade content toggle design for your Divi site without using any plugins:View Demo
  4. Divi.Help Pro Support

    Divi.Help Pro Support Administrator
    Staff Member

    You will need to wrap their jQuery code with:

    <script>

    </script>
     
  5. webward3

    webward3 Member
    Divi Ultimate Child Theme Divi Powerful Child Theme Divi Ultimate Archive Plugin Divi Ultimate Blog Plugin Divi Ultimate Header Plugin Divi Ultimate Footer Plugin

    Thanks! Error gone. My active menu is not working :).
     
    1. PRO MEMBER PERKS Divi.Help Header AI Generator - Try the power of AI to generate a custom Divi header for you:Try Now
  6. Divi.Help Pro Support

    Divi.Help Pro Support Administrator
    Staff Member

    Couldn't see the jQuery code on your site. Might be cache issue. Try to clear your cache plugin & see how it goes.
     
  7. Divi.Help Pro Support

    Divi.Help Pro Support Administrator
    Staff Member

    Try to replace the jQuery code with the below:
    Code:
    <script>
    jQuery(function ($) {
        $('.et-menu li:first-child a').addClass('ds-menu-active')
        $(window).scroll(function () {
            var scrollPos = $(window).scrollTop();
            $('.ds-section').each(function (i) {
                var topPos = $(this).offset().top;
                if ((topPos - scrollPos) <= 80) {
                    $('.ds-menu-active').removeClass('ds-menu-active')
                    $('.et-menu li a').eq(i).addClass('ds-menu-active')
                }
            })
        });
    });
    </script>
     
    1. PRO MEMBER PERKS Custom Color Scheme + Premade Layouts - A perfect combination to boost productivity:Try Now
  8. Divi.Help Pro Support

    Divi.Help Pro Support Administrator
    Staff Member

    And you will need the below CSS in Divi > Theme Options > Custom CSS to change the active link color:
    Code:
    #page-container .ds-menu-active {
        color: #d9dc09!important;
    }
     
  9. webward3

    webward3 Member
    Divi Ultimate Child Theme Divi Powerful Child Theme Divi Ultimate Archive Plugin Divi Ultimate Blog Plugin Divi Ultimate Header Plugin Divi Ultimate Footer Plugin

    Thanks for your patience. I replaced the code and clear cache. No luck.
     
    1. PRO MEMBER PERKS Divi.Help Pro Layout Packs - Modern & powerful Agency Divi layout pack, featuring team carousel, sliding menu, etc.View Demo
  10. Divi.Help Pro Support

    Divi.Help Pro Support Administrator
    Staff Member

    As stated in previous post, you will need to add the below CSS in Divi > Theme Options > Custom CSS to change the active link color:
    Code:
    #page-container .ds-menu-active {
        color: #d9dc09!important;
    }
     
  11. webward3

    webward3 Member
    Divi Ultimate Child Theme Divi Powerful Child Theme Divi Ultimate Archive Plugin Divi Ultimate Blog Plugin Divi Ultimate Header Plugin Divi Ultimate Footer Plugin

    I must have missed that part. Works like a charm! Thanks a million!
     
    1. PRO MEMBER PERKS Divi Ultimate Header Plugin - Add custom vertical navigation for your Divi site. Turns into slide in menu on mobile:Learn More