header overlaps anker link section

[thomas-8605]

Hello Woodmart Support Team,

today we found a UX-Bug of your theme.

Lets create an header with your header builder.
Now create an blog post and add an anker link into it.

Case:
If visitor click on anker link it will jump to the anker marker.

Problem:
But the header will overlaps the headline (first lines) from content. Check also attached screenshot. You can find our link in privat content section please.

1. Why your theme does not optimized for this case?
2. We using this theme with +40 projects. We need an clean workflow without custom css for every new header to avoid the header overlaps the content.
3. How to solve that case?
4. Most of all modern themes can handle this case and this situation is nothing new.
In 2018 other users start talking about that issue and named other themes that can handle this case out of the box:
https://xtemos.com/forums/topic/scroll-to-anchor-link-needs-position-adjusting-how/
Do you plan to improve woodmart in that basic case soon please?

If not possible please tell me how to cancle all licence codes in bulk on envato/themeforest, because we manage +40 licence/themeforest accounts.

BR
Tommy

• This topic was modified 5 months, 1 week ago by thomas-8605.

Attachments:

You must be logged in to view attached files.

Hi Tommy,

Thank you for reaching out and providing detailed information about the issue.

As we can see, you are using some extra plugin or custom JS script which adds this functionality to the links with #. There is no such smooth effect by default in the WoodMart theme. Could you please clarify if you have added any custom code or plugins to achieve this effect? If you’re unsure, please disable all plugins that are not related to our theme.

Additionally, could you provide us with temporary admin access to your site? This will allow us to check the settings and code directly and find a suitable solution to prevent the header from overlapping the content when using anchor links.

Best regards

Hello,

we do not work or change code on your theme.
You can disable all plugins. It will not help and we test this already. And i can see a lot of other users have the same problem in internet groups after using woodmart.

I added a stage for you to private content. You can do all what you want on this theme to test and debug. 🙂

BR
Tommy

Try to add the following PHP code snippet to the child theme functions.php file to fix this

if ( ! function_exists( 'woodmart_enqueue_custom_scripts' ) ) {
	/**
	 * Add a script that calculates the height of the Sticked Header and subtracts it from the "scrollTop" value in the Elementor widget "Menu_anchor".
	 */
	function woodmart_enqueue_custom_scripts() {
		ob_start();
		?>
		jQuery(document).ready(function() {
			if (window.elementorFrontend) {
			elementorFrontend.hooks.addFilter( 'frontend/handlers/menu_anchor/scroll_top_distance', function(scrollTop) {
				var stickyElementsHeight = 0;
				var stickyRows           = jQuery('.whb-sticky-row');
				
				if (0 === stickyRows.length || ! stickyRows.parents('.whb-header').hasClass('whb-sticked')) {
					return scrollTop;
				}

				stickyRows.each(function() {
					stickyElementsHeight += jQuery(this).height();
				});

				return scrollTop - stickyElementsHeight;
			});
		}
		});
		<?php
		$script = ob_get_clean();

		wp_add_inline_script( 'woodmart-theme', $script );
	}
	add_action( 'wp_enqueue_scripts', 'woodmart_enqueue_custom_scripts', 40 );
}

Hello Friend,

but do you plan to improve your theme by fixing this issue?
Other themes never had his issue years before. And now we need to add custom php to fix basics with your so great and modern theme. 🙁

Hello,

The problem is that this feature comes from Elementor and any other theme that has sticky header will have exactly the same issue. Note that if you use our theme’s anchor links in the navigation it works correctly. Check on our demo for example https://woodmart.xtemos.com/demo-event-agency/demo/event-agency/

Okay got it.
Is that an extra elementor widget from woodmart?

Currently, it is available for the menu made via Appearance -> Menus. https://gyazo.com/f31881638f757beb1ded4dd4ad72f04f
We will consider adding this to other links as well. But as for now, you can continue using Elementor and our fix in the child theme.

[Author]

Posts