Display of active anchor link menu items doesn't work anymore - Support

Viewing 24 posts - 1 through 24 (of 24 total)

Author

Posts
December 6, 2023 at 12:32 pm #1427337

CJGVD
Participant

Dear Kriesi-Team,

you provided me with a code for adapting the color of active anchor link menu items in #1414442, but unfortunately the code does not work anymore.

I want all menu items to stay the same color (regardless of their state: active, inactive, hover) and only want the active menu item (almost all menu items are anchorlinks on the homepage) to be “underlined” by your default active menu display (“aktiver Menüanzeige”) (set in your header-style). As said, it did work for a couple of months, but not anymore. Perhaps you changed some code with an Enfold update?

Thanks for your help!

Best regards,
Cornelie

December 6, 2023 at 2:29 pm #1427352

CJGVD
Participant

A topic related to the above is that the display of active anchor links in the mobile menu also does not work properly. I used following CSS (based on another thread) to underline the active menu item. It only seems to work for pages, not for anchor links…

/* highlight active menu item in mobile menu */
#top #wrap_all #header .av-burger-overlay #av-burger-menu-ul .current-menu-item > a {
text-decoration: underline;
}

Thanks for your help with this too!
Best regards,
Cornelie

December 10, 2023 at 11:33 pm #1427736
Mike
Moderator
Hi,
Thank you for your patience and the link to your site, I’m not sure why this is occuring but try adding this code to the end of your child theme functions.php file in Appearance ▸ Editor:
```
function custom_menu_script() { ?>
  <script>
document.addEventListener("DOMContentLoaded", function() {
  if (document.body.classList.contains("home")) {
    var menuItems = document.querySelectorAll(".av-main-nav .menu-item");
    function clearMenuStyles() {
      menuItems.forEach(function(item) {
        var aviaMenuFx = item.querySelector(".avia-menu-fx");
        if (aviaMenuFx) {
          aviaMenuFx.style.opacity = "0";
          aviaMenuFx.style.visibility = "hidden";
          aviaMenuFx.style.bottom = "0";
        }
      });
    }
    function setActiveMenuItem(hash) {
      menuItems.forEach(function(item) {
        var menuItemLink = item.querySelector("a");
        if (menuItemLink.hash === hash) {
          var aviaMenuFx = item.querySelector(".avia-menu-fx");
          if (aviaMenuFx) {
            aviaMenuFx.style.opacity = "1";
            aviaMenuFx.style.visibility = "visible";
            aviaMenuFx.style.bottom = "30%";
          }
        }
      });
    }
    menuItems.forEach(function(menuItem) {
      menuItem.querySelector("a").addEventListener("click", function(event) {
        clearMenuStyles();
        setActiveMenuItem(this.hash);
        history.pushState(null, null, this.href);
      });
    });
    if (window.location.hash) {
      clearMenuStyles();
      setActiveMenuItem(window.location.hash);
    }
  }
});
</script>
  <?php
}
add_action( 'wp_footer', 'custom_menu_script', 99 );
```
Please ensure to copy the code from the forum and not an email notification so the symbols are not converted.
In my test this seems to work.

Best regards,
Mike
December 11, 2023 at 9:16 am #1427746

CJGVD
Participant

Dear MIke,

thanks for your proposed solution. Unfortunately it doesn’t work on my side. (Despite clearing caches, no file merging and compression.) Chrome and Edge seem to display the same behaviour (but not showing the active items correctly), Firefox is behaving slightly differently (not showing active items at all).

Chrome & Edge:
Starting on the homepage (mywebsite.com), when scrolling down, now only the first menu item (Home) keeps on becoming active over and over again, not the following menu items (= anchorlinks you are scrolling over). Only when you reach the last anchorlink on the homepage the correct menu item (Schiffe) is displayed as being active. When scrolling up, again the first menu item (Home) becomes active, not the anchorlinks in between.

Starting with clicking on the first menu item (Home = mywebsite.com/#top), then only Home stays active, regardless of scrolling down to all following anchorlinks on the page. Also the last anchorlink (Schiffe) does’t become active now.

Firefox:
Starting on the homepage, only very short the active display of the first menu item is being shown, but then it disappears. When scrolling down, nothing happens, all menu items stay inactive. Untill you reach the last anchorlink on the homepage, only then the correct menu item (Schiffe) is displayed as being active. When scrolling up, no menu items become active.

Starting with clicking on the first menu item, then only Home stays active, regardless of scrolling down to all following anchorlinks on the page. Also the last anchorlink (Schiffe) does’t become active now (similar to Chrome & Edge).

Mobile menu:
The display of the mobile menu (underlined active menu items) did not change at all. That is, the underlining still only works for pages, not for anchor links…

Hope you have some other suggestions, your help is much appreciated!
Please see private content for login.

Thanks and best regards,
Cornelie

December 11, 2023 at 11:34 am #1427761

Mike
Moderator

Hi,
Sorry I was testing differently, try clicking each menu link and the underline will show for the correct menu item.
But unfortunately this won’t help with scrolling. So if this won’t help you try removing the script and remove the full url for each menu item so each item is just the hash (#) and the ID.

Best regards,
Mike

December 14, 2023 at 3:21 pm #1428107

CJGVD
Participant

Dear Mike,
thanks for your help. However, it did not bring me any further.
Just leaving the # and the ID only works if you navigate from anchor to anchor, not from page to anchor. If you do that the URL becomes mysite.com/page/#anchor (nothing happens) instead of mysite.com/#anchor.
It also did not solve my problem of wanting to underline the correct menu item during scrolling.
So I have inserted the whole links again in the menu. I also changed the header type from standard (with the active menu display, i.e. this line) to minimal and I changed the active menu color in red (#810000) en the inactive in blue (#203864).
Still the thing is that being on the homepage all anchorlinks in the menu that are part of the homepage are also colored red = active. I want them to “stay” blue until scrolling towards them, only then they should turn red.

I tried to reach this with using your formerly given CSS code (from thread #1414442):

/* ankerlinks in navi werden nur aktiv beim runterscrollen */
#header.header_color .main_menu ul:first-child > li.current_page_item > a {
color: #203864 !important;
}
#header.header_color .main_menu ul:first-child > li.current_page_item.current-menu-item > a {
color: #810000 !important;
}

But after applying this code all anchorlinks in the menu turned blue and nothing happens when scrolling towards them. Hovering over the page link in the menu will turn it into red. Being on this page, hovering over the anchors will turn them red as well. So the code only seems to work for pages.

I tried to figure out differences between the code for anchors and pages, e.g.
Anchor (non-active): .menu-item-type-custom.menu-item-object-custom
Page (non-active): .menu-item-type-post_type.menu-item-object-page

Anchor (active): .menu-item-type-custom.menu-item-object-custom.current_page_item.menu-item-home.menu-item-top-level.menu-item-top-level-2
Page (active): .menu-item-type-post_type.menu-item-object-page.page_item.page-item-246.current_page_item.current-menu-item

But my knowlegde is unfortunately not enough to adapt the code properly. Perhaps you can have a look into it again? I would very much appreciate that!

The issue with the mobile menu also still exists. I would like to see the active menu item here as well. I assume the solution is related to the solution for the above.

Thanks for your help!
Best regards,
Cornelie

December 14, 2023 at 5:08 pm #1428134

Mike
Moderator

Hi,
Typically when using custom menu links in the main menu to link to anchor links on the page, as when you are using a one page site, you would add the anchors to the menu items with only the IDs (#)
The theme then can tell when that section with the ID is in view and then adds a class to the menu item and then the css would change the style of the menu item.
So the most important thing is having the class added to the menu item, otherwise the css can’t do anything.
I tested your site by changing your links to just the IDs, but when the section with the ID was scrolled to the class for the menu item seemed to have been removed as soon as it was added. I tried disabling your custom functions but that didn’t help, and I didn’t see the precious script, so I think you removed it as I asked you to.
So I assume that a plugin is causing a conflict, but I didn’t want to test to much on your site without asking first.
If your site is very active do you want to create a staging site for us to test further on, or is it ok to disable your plugins for a hour or so at a time while we test?

To create a staging site, please check your webhost to see if you have the one click staging site option, this is a option in most cPanels to create a staging clone of your site so we can test on it and you live site will stay up and running. You can always ask your webhost to help you with setting this up if you want.
Here are some screenshots of what it would look like:

The script I posted earlier highlighted the menu item based on the menu item clicked and the hash in the URL, so we didn’t need the correct class to be added to the menu items, but if you want the menu items to change when scrolling then we will need this function to work and identify what is causing the conflict so it can be disabled.
I do expect an issue for the menu items when on your other page “About” as they will not then link correctly, so we will have to figure something out at that point, but first lets get the menu working correctly on the homepage.

Best regards,
Mike

December 15, 2023 at 12:39 pm #1428201

CJGVD
Participant

Dear Mike, thanks for your reply.
I already did some tests with deactivating the last plugins added (e.g. Weglot for translations and Yoast SEO), but after clearing the caches I did not see any differences on the several web browsers (Chrome, Edge, Firefox).
Yes, a staging site makes sense. I have installed WP in a sub directory of our webspace and am now trying to load a copy of the site onto it, using the paid version of All-in-One WP Migration (the free version and Duplicator did not work due to hosting constraints, which could not be solved with the tools provided by the hoster, World4You).
I will let you know as soon as the staging site is running.
BR, C

December 15, 2023 at 1:21 pm #1428204

CJGVD
Participant

Dear Mike, please see details in private content. Thanks for your help!

Some thoughts that came up to my mind that might have to do with the issues. I just share them with you, perhaps you will find a clue:

Scrolling all the way down the homepage to the last anchorlink results in an active menu state of this anchorlink in the menu (on big screens, not in the mobile menu). Why does it seem to work for the last anchorlink and not for the previous ones on the homepage?

On the homepage for each color section two versions have been developed: 1. for big screens, 2 for smaller screens (using the responsive tab). The IDs are similar but slightly different, e.g. #anchorlink1 and #anchorlink1_ (i.e. the underscore has been added in version 2). The anchorlinks without _ are used in the main menu (for bigger screens), the ones with_ are used in the mobile menu (for smaller screens).

There is some CSS in the Quick CSS section related to the navigation menu. Esp. due to working with the previously selected header style “standard”, showing the active menu display with the line. I changed the header type to “minimal with shadow”, but the CSS for the standard style is still there.

BR, C

December 16, 2023 at 8:10 pm #1428290

Mike
Moderator

Hi,
Thanks for the staging site I have disabled all of your plugins and child theme and I update your theme to v5.6.9 and the menu items are still not getting the correct class added when the section is scrolled into view.
So I copied your page and menu to my test site and there the menu items do work correctly, I believe that your server has disabled jQuery Migrate and or jQuery, because these options are removed in your theme settings under Change WordPress Defaults:

this is what it should look like:

So please check your wp-config for custom rules or ask your webhost if they have any server side settings.

Best regards,
Mike

December 18, 2023 at 9:17 am #1428379
CJGVD
Participant
Good morning Mike, thank you for checking. Indeed, I noticed that the menu items work correctly on your test site. Could you please check, whether they still work correctly if you use a transparent header (and after scrolling, a fixed header) on the homepage? And if you add normal pages to the main menu?

I checked the Change WordPress Defaults in the theme settings of the main website and here all four possibilities are shown, just like in your example (see below). So I can’t replicate that jQuery Migrate and/or jQuery are being disabled.

Ändern Sie die WordPress-Standardeinstellungen
Hier können Sie WordPress-Standardskripts und -stile deaktivieren, die für die meisten Websites nicht erforderlich sind
I also checked the wp-config file. It looks similar to the wp-config files of other websites. I can’t find any indication that here certain custom rules regarding jQuery Migrate and/or jQuery have been added.

I will ask the webhoster, if they have any idea.
Would be great, if you would have other suggestions on where to find the answer.
We should win this quest. ;-)

Best regards, C
December 18, 2023 at 11:17 am #1428385

Mike
Moderator

Hi,
Some webhosts offer a optimized WordPress install that they have customized, and often in these cases they have added some custom code to disable jQuery Migrate and load jQuery in the footer, in these cases the options are removed from the theme options. Often these are on “WordPress Managed” hosting and the user is limited to making server changes.
In the past the webhost corrected the issue but I don’t know what they did.

Best regards,
Mike

December 18, 2023 at 2:31 pm #1428415

CJGVD
Participant

Hi, thanks for the clarification. Indeed it is a WP Hosting package (at World4you in Austria). However, the active menu display on our website did work before. So unless the hoster has changed some server settings recently, the cause could also be at “our” side. Let’s await the answer from the hoster (I sent them a ticket with more details on the problem). I will keep you posted. Have a nice day!

December 18, 2023 at 3:46 pm #1428424

CJGVD
Participant

Dear Mike,

the web hoster already answered. They couldn’t find any problems on the server side and recommended me to create a phpinfo.php on the web space to find all the configurations that are running on the web server. I did that, but I have no idea where to search on this phpinfo-page for clues that could have to do with our problem. Do you – or shall I send you the file?

With the Chrome DevTools I noticed under sources some instances for js, having to do with jQuery (I assume… I am not a programmer):
jquery
ui
core.min.js?ver=1.13.2
jquery-migrate.min.js?ver=3.4.1
jquery.min.js?ver=3.7.1
Does this info make any sense to you?

Another thing that came up to my mind is that this website became live a couple of weeks ago. Perhaps its transfer might be related to the menu issue? The plugin Better Search Replace was used to run a search/replace on the database. The root directory of the domain was set to the subdirectory with all installations.

BR, C

December 18, 2023 at 6:32 pm #1428437

Mike
Moderator

Hi,
I checked your live site and all of the Change WordPress Defaults: options are there correctly, so this missing option error is only in the staging site.
But earlier when I tested your live site menu to match my test site, you live site didn’t work correctly, at that time I thought that it could be due to a plugin, which is why we were testing with a staging site.
But now I’m not sure, do you want to try creating the staging site again, or can we put your live site into maintenance and test it?
Do you have another test host? It odd that this seems to work on my host and not yours.

Best regards,
Mike

December 18, 2023 at 10:25 pm #1428453

CJGVD
Participant

Dear Mike,
thanks for your reply.
Yes, I will try to upload a copy of the live site on another test host tomorrow to see what happens there. Keep you informed.
I will ask my client what he thinks about putting the live site into maintenance. Is there an easy way, preferably within Enfold, to put the live site into maintenance mode?
Best regards,
C

December 18, 2023 at 11:19 pm #1428454

CJGVD
Participant

I have a copy run on another test server.

Here the four Change WordPress Defaults options are correct as well.

And the menu looks as follows:
All anchor links are red (active), the page is blue (inactive). Hovering over the page will turn this menu item red, which is correct.
If scrolling towards the anchor links, nothing happens in the menu (of course, because these menu items were already in the active state).
If clicking on an anchor link in the menu, nothing happens in the menu (of course, the respective menu item was already in the active state).
If clicking on the page, this menu item turns red as expected, all others are blue now, which is also correct. Hovering over them will turn them red, which is correct. Clicking on an anchor link now will return to the respective section on the home page with the menu items as described at the beginning (all anchors red, page blue).
There is no difference in the display of the menu items in the transparent header and the sticky header, which is correct.
These observations were made in Firefox, Chrome and Edge – all similar.

Hope this information helps you.

BR, C

December 19, 2023 at 11:18 am #1428483
CJGVD
Participant
Good morning Mike,

I just don’t get it, that the live site displays other menu behaviour than the copies on your and my test servers. Being on the homepage of the live site, only the second anchor link in the menu is/stays active (red), the others are blue. Why is only this one red? I would assume all anchor links on this homepage would be red, just as on my test server. And ideally… only the section shown would have an active menu item…

I just checked again the Quick CSS, the functions.php and other important settings, like the Change WordPress Defaults options. These are all the same…!?

The menu behaviour on the staging website is the same as the one on my test server (all anchors are red, except the page). We could continue our tests on the staging website (which is on the same server as the live site) although here some Change WordPress Defaults options are missing, as discussed earlier.

I am thinking of temporarily deleting all menu-related code (e.g. certain CSS and in functions.php (e.g. to adjust the offset value on landscape view regarding sticky header covering the section title)), just to see what effect this will have on the menu behaviour.

BR, C
- This reply was modified 5 months, 1 week ago by CJGVD.
December 19, 2023 at 12:34 pm #1428495

CJGVD
Participant

Final remarks for today, cause it makes me crazy. :-S

I have deleted on the STAGING site in steps several menu-related code, cleared the cache each time and checked. No changes in “our” menu behaviour occurred. I have deleted some CSS permanently, as it was irrelevant for the current site. I have incorporated this Quick CSS code into the LIVE site. Expecting somehow, that now all anchor links would appear red, but no, on the LIVE site still only one anchor link (the second one) is active.

Please note that I added these colors merely for testing purposes, since originally we worked with the standard header type (with the line) and all menu items having the same blue color (regardless of being active/inactive). On the LIVE site I have turned the color for the active menu item into blue again, so now on the LIVE site all anchors in the menu are displayed blue again. On the STAGING site the active menu items are still red. (However, not reflecting the actual state of the live site, where only one anchor seems active all the time…)

December 19, 2023 at 5:42 pm #1428507

Mike
Moderator

Hi,
Thanks, the reason this is not working correctly is because the class for the active menu item (current-menu-item) is not being adding to the menu items.
When I examine the menu in the browser Dev Tools I can see the menu items classes flashing as if they are trying to change, but they don’t change, so something is preventing the class from updating. I’m not sure what is blocking this, but it is not occurring on my test site.
So it is standard to try to eliminate any possible conflicts by disabling plugins and custom code snippets.

Best regards,
Mike

December 21, 2023 at 2:59 pm #1428667
CJGVD
Participant
Dear Mike,

thanks for your remarks. I don’t know where to see the flashing of the menu items in Dev Tools, but indeed, this suggests that this change is somehow being obstructed.

After my holiday break I will dive into this topic again. If you wish to continue searching for clues, be my guest. :-) The staging site is still available to you (see private content). Here all plugins of the live site are installed as well, but for testing purposes now deactivated. Special code for our menu issue (CSS and/or PHP) is not there anymore and might need to be implemented again.

Wishing you and the rest of the Kriesi-Team merry x-mas and a happy new year!
- This reply was modified 5 months ago by CJGVD.
December 23, 2023 at 6:08 pm #1428823

Mike
Moderator

Hi,
For your information after your holiday break, this is the example of the menu items adding the current-menu-item class when they are clicked, this is a gif so you may need to click the image for the gif to play and wait a few seconds:

this is your page while I click on the menu items, see how the classes flash like in the gif above but the class current-menu-item is not added:

I hope this explains what I meant better.
Happy Holidays and Merry Christmas.

Best regards,
Mike

January 9, 2024 at 8:17 pm #1429665
GoodchildsMedia
Participant
Hi Mike,

The “Elegant Portfolio Demo” it’s not importing. Can you fix this for us please?
- This reply was modified 4 months, 2 weeks ago by GoodchildsMedia.
- This reply was modified 4 months, 2 weeks ago by Mike. Reason: login info public
January 10, 2024 at 12:24 pm #1429710

Mike
Moderator

Hi,
GoodchildsMedia I see that this is not your thread so posting your login here is not safe, please review this info and then open a new thread with you login in the Private Content area.
I see that your PHP ZipArchive Extension is disable please ask your webhost to enable this.
I also see some of your server setting are low please adjust:

after making this changes try again.
what webhost are you using?

Best regards,
Mike
Author

Posts