Site logo

Archived topic

Changing the font weight of the sticky menu

12 replies · Started by Akash on January 9, 2020

Viewing posts 1–13 of 13

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

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.

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

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

Have you tried something like 700 as David suggested?

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

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

I am confused as to what you want.

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

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.

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?

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.

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

Have you checked with Elementor on this?

This archived topic is closed to new replies.