Categories

How to Change Link Font Weight on Hover Without Menu Shift Using CSS

Donate with

82uymVXLkvVbB4c4JpTd1tYm1yj1cKPKR2wqmw3XF8YXKTmY7JrTriP4pVwp2EJYBnCFdXhLq4zfFA6ic7VAWCFX5wfQbCC

Copy Monero Donation Address

Donate with

Donate BAT now

Verified BAT publisher

One common issue when designing navigation menus is the unintended "shift" of menu items caused by font weight changes on hover. This blog post will guide you through solving this problem using a clean and efficient CSS approach. By the end, your menus will have a smooth hover effect without disrupting the layout.

Why Does This Issue Occur?

When a font's weight changes, its dimensions may adjust slightly. This can lead to elements shifting, especially in inline or flex-based layouts. These layout disruptions harm user experience and can make your design feel unpolished.

Solution Overview

To avoid layout shifts, we can use a clever CSS trick. The idea is to simulate the heavier font weight in a hidden pseudo-element, ensuring the layout remains stable when the font weight of the actual text changes on hover.

Key Benefits

• Preserves the layout and spacing of your menu.
• Delivers a smooth and polished hover effect.
• Enhances user experience without additional JavaScript.

Implementation Step-by-Step

HTML Structure

<nav id="main-menu">
    <ul>
        <li><a href="#" data-text="Home">Home</a></li>
        <li><a href="#" data-text="About">About</a></li>
        <li><a href="#" data-text="Services">Services</a></li>
        <li><a href="#" data-text="Contact">Contact</a></li>
    </ul>
</nav>

CSS Styles

Here’s the full CSS code that implements the solution:

#main-menu > li > a {
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-between;
    padding: 7px 0;
    color: var(--color-main);
    transition: font-weight 0.1s ease;
}
#main-menu > li > a:after {
    content: attr(data-text);
    height: 0;
    visibility: hidden;
    overflow: hidden;
    user-select: none;
    pointer-events: none;
    font-weight: bold;
}
#main-menu > li > a:is(:hover, :focus) {
    font-weight: var(--font-bold);
}

Explanation of the Code

• Base Styling: The < a > elements are styled as inline-flex containers, allowing easy alignment of child elements and consistent layout behavior.
• Hidden Pseudo-Element: The :after pseudo-element simulates the bold font weight by rendering the text invisibly but taking up the necessary space.
• Hover and Focus States: On hover or focus, the font weight of the < a > tag changes without affecting the overall layout.

Practical Use Cases

This method is particularly useful in:

• Navigation menus where consistency in spacing is crucial.
• Design systems requiring smooth transitions and accessibility.
• Scenarios where JavaScript is not desired for hover effects.

Common Mistakes to Avoid

• Not using a pseudo-element for layout stabilization.
• Applying the hover effect without testing its impact on spacing.
• Forgetting to test the design on different screen sizes and fonts.

Conclusion

By using this CSS technique, you can create polished and user-friendly navigation menus that deliver a superior experience. Try implementing this in your next project and enjoy the benefits of smooth, accessible designs without layout disruptions!