[Support request] Changing the font weight of the sticky menu

[Akash]

when we scroll down font weight will be changed. I have add custom css also but its not solve.
If you have seen a live error display on my website link. please help

[David]

Hi there,

do you mean this CSS:

.main-navigation.navigation-stick .main-nav ul li a, 
.navigation-stick .menu-toggle {
    font-weight: 500 !important;
}

try changing the font-weight: 500 to see the effect.

[Akash]

I have already added this code but it will not see the effect. any other solution

[Leo]

Looks like your static menu is set to 500 as well.

Have you tried something like 700 as David suggested?

[Akash]

when I change font-weight 500 to 700 it will be font text break

[Akash]

on homepage hover any module it will be font-weight small change. refer my website homepage for this issue. this font-weight issue is occur only on chrome browser other browser working fine with this font-weight

[David]

I am confused as to what you want.

Do you want the Font Weight to increase when the Navigation is Sticky?

[Akash]

when static position primary menu in font-weight: 500 but when we scroll down it should be changed font-weight 400.
please check my website techithindi.com homepage
for more error details.
also homepage all font-weights are flickered

when we deactivate generatepress child theme it will be load normal but when we activate child theme it will show an font-weight error.

[David]

If you want the Sticky Navigation font weight to reduce to 400 then you need to edit this CSS:

.main-navigation.navigation-stick .main-nav ul li a, 
.navigation-stick .menu-toggle {
    font-weight: 500 !important;
}

I cannot see the ‘font flickering’ issue – i can see some reflow occuring when the page initially loads but this is more related to the Elementor content taking time to load.

What do you have in your child theme?

[Akash]

Actually, this is not font flickering issues. When loading a page text flash with different font weights. I have used elementor with generatepress
you can see it https://techithindi.com/

Happens in under 200ms.

[David]

Yeah its an issue that can happen with Elementor:

https://docs.elementor.com/article/249-embedded-template-css-loading

[Akash]

add_action( 'wp_enqueue_scripts', function() {
	if ( ! class_exists( '\Elementor\Core\Files\CSS\Post' ) ) {
		return;
	}

	$template_id = 123456;

	$css_file = new \Elementor\Core\Files\CSS\Post( $template_id );
	$css_file->enqueue();
}, 500 );

in this above code how we can find template id in the WordPress homepage. We can design page with elementor with generatepress

[Leo]

Have you checked with Elementor on this?

[Author]

Posts