Viewing 6 posts - 1 through 6 (of 6 total)
  • Author
  • #213575

    I have followed the article on linking to an anchor here. (Purchase code hidden if logged out) -for-single-page-navigation/

    I have followed the steps and it is working, but the transparent menu is covering the top part of the box and covering the heading and other content

    You can see it here:

    This is not the case in your example: (Purchase code hidden if logged out) /#portfolio

    How do I remedy this?

    Thanks in advance!


    Hey brentwestwind!

    Right now this is unfortunately an issue we have no fix for but we are working on one. The anchor is linked to directly but because of the menu being on top of it and not pushing it down it appears as though its in the incorrect place.

    On a single page the anchor links get a smooth scroll bit of javascript which prevents the issue from happening. Its only when going to an anchor from another page that the the menu overlap makes it seem like its incorrect.




    For a temporary fix you can try to insert this code at the very bottom of enfold/js/avia.js:

            setTimeout(function(){jQuery('body').AviaCcrollCorrection({duration: 1000});}, 1500);
    })( jQuery );
    // -------------------------------------------------------------------------------------------
    // Scroll correction which removes the height of the menu if necessary
    // -------------------------------------------------------------------------------------------
        $.fn.AviaCcrollCorrection = function(options)
            var defaults =
                duration: 500,
                easing: 'easeInOutQuint'
            var options = $.extend(defaults, options);
            var fixedMainPadding  = parseInt($('.fixed_header #main').css('padding-top'),10) / 2 || 0;
            fixedMainPadding += parseInt($('html').css('margin-top'),10);
            var hash = window.location.hash;
            if(hash != '' && hash != '#' && hash != '#prev' && hash != '#next')
                var container = $(hash);
                    if(container.offset().top > fixedMainPadding)
                        var target = container.offset().top - fixedMainPadding;
                        $('html:not(:animated),body:not(:animated)').animate({ scrollTop: target }, options.duration, options.easing);



    Wow! Thanks for the fix. This really helps me out!

    If I want to put this in my child theme, where would I put it?



    Add this on the child theme’s functions.php:

     * Register frontend javascripts:
    	add_action('wp_enqueue_scripts', 'avia_register_child_frontend_scripts', 100);
    function avia_register_child_frontend_scripts()
    	$child_theme_url = get_stylesheet_directory_uri();
    	//register js
    	wp_register_script( 'avia-default-child', $child_theme_url.'/js/avia.js', array('jquery'), 1, false );

    Create a js folder on the child theme then add a avia.js file. You can insert Dude’s code on the new avia.js file.



    Next theme update should fix the issue ;)

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

The topic ‘Linking to Anchor – Menue covering’ is closed to new replies.