Viewing 4 posts - 1 through 4 (of 4 total)
  • Author
    Posts
  • May 19, 2023 at 11:16 am #1407927
    AlbertGunst

    I managed to highlight an active html anchor on a page when the target id is in the address and I am opening the page. But when I want to navigate to an anchor on the same page, the page scrolls to the anchor but it doesn’t get highlighted in the colour I defined in the Quick CSS. For anchors that are on the bottom of a page it is not very clear that you are directed to them because they are not placed at the top of your screen, that’s why I want to highlight them as well. Is there a way that the highlights work for anchors within the page?

    The CSS I used:
    :target {
    background-color: #ecfa73;
    }

    • This topic was modified 1 year, 5 months ago by AlbertGunst.
    May 21, 2023 at 4:00 pm #1408067
    Mike

    Hey AlbertGunst,
    Thank you for your patience, your menu items should be getting the class current-menu-item when each menu item is clicked and you would use this in your css instead of :target Please see our documentation under One Page menu. If you would like more heal please like to your page so we can examine with more context.

    Best regards,
    Mike

    May 23, 2023 at 2:28 pm #1408253
    AlbertGunst

    Hi Mike,

    I probably don’t get what you are saying since I am very much a noob in these things, but I am not trying to highlight menu items. I want to highlight an active HTML anchor, as described on the W3 schools website for example. When I use their ‘Try it yourself’ it does exactly what I want to achieve :) If it is indeed better that I use the current-menu-item class, can you please explain to me how I can achieve the same result? Now I simply added to the Quick CSS:
    .current-menu-item {
    background-color: #ecfa73;
    }
    so I get why that id is always in the background color, but I don’t know how to change that

    I created two examples on one of my pages. The one called ‘Link 1’ is always in the CSS class color, which I do not want. The one called ‘Link 2’ only is highlighted when you enter the full address on the address bar with /#test2 added. Not when you click ‘this goes to link 2’

    Regards,
    Albert

    May 24, 2023 at 4:33 am #1408367
    Ismael

    Hi,

    Thank you for the update.

    We are uncertain about the reason why the CSS selector is not working as expected. However, we have created an alternative solution using jQuery. To implement this solution, please add the following code to your functions.php file:

    
// custom scripts
function ava_custom_script_script()
{
    ?>
    <script type="text/javascript">
        (function($) {
            // adjust style of target element
            $("a[href^=#]").on("click", function(e) {
               var hash = e.currentTarget.hash;
               var target = $(hash);
               var targeted = $('.targeted-el');

               targeted.css('background-color', 'transparent');
               target.addClass('targeted-el');
               target.css('background-color', 'red'); // adjust the background color here
            });
        })(jQuery);
    </script>
    <?php
}
add_action( 'wp_footer', 'ava_custom_script_script', 9999 );

    Best regards,
    Ismael

  • Author
    Posts
Viewing 4 posts - 1 through 4 (of 4 total)
  • You must be logged in to reply to this topic.