Distinguish navbar active state from hover state

[Mahnoor-Zaffar]

# References and relevant issues

Closes #(issue-number)

# Description

The hover and active states in the top navigation bar shared the same styling — both showed a `3px` solid bottom border in the text color. This made it confusing to tell which page was currently active when hovering over other nav items.

The fix increases the active state's bottom border from **3px to 4px**, keeping the same color and style, so the active page is visually distinguishable from a hovered item at a glance.

| State   | Before | After  | Font weight |
|---------|--------|--------|-------------|
| Hover   | 3px    | 3px    | 500         |
| Active  | 3px    | **4px** | **700**     |

Fill in the issue number (e.g. Closes #1080) once confirmed.

[TimMonko]

Hi @Mahnoor-Zaffar, thank you for working on this PR! We are grateful for your interest in our project.
I do see the difference, but I think there could be something more, like a color change in the font or something. That said, this change should be upstreamed to https://github.com/napari/napari-sphinx-theme
Please let me know if you need any assistance with this.
It will also be helpful if you could provide a screenshot and accurately fill out the PR description and be sure to follow our AI contribution policy