"Visit the Curriculum" nav item is partially hidden

[timagixe]

Describe the bug Nav item is partially hidden behind the screen and is not readable, however it stays clickable.

To Reproduce Steps to reproduce the behavior:

1. Go to https://forum.freecodecamp.org/
2. Take a look on Visit the Curriculum item in nav bar

Expected behavior Item is fully readable and is not partially hidden

Screenshots

Desktop (please complete the following information):

• OS: MacOS
• Browser: Chrome
• Version: Chromium Engine Version 122.0.6261.94

[timagixe]

Seems like the issue was introduced within https://github.com/freeCodeCamp/forum-theme/pull/113

@ahmaxed @ojeytonwilliams FYI

[timagixe]

Seems margin-top property with negative value is not required, according to my check. Please refer to the attached video.

https://github.com/freeCodeCamp/forum-theme/assets/60817786/4bc46269-8d17-4745-a89d-7c9b45bc2430

By the way, @ahmaxed what was the issue you tried to fix? The PR https://github.com/freeCodeCamp/forum-theme/pull/113 does not contain enough info about the introduced change and what's it fixing.

[camperbot]

We realize you're looking to get help as soon as possible. Rather than pinging someone directly, which can be considered rude, would you mind joining our Discord and asking your question there? Someone might be more readily available to help.

[ahmaxed]

Thanks for reporting the issue. It seems that the margin-top is behaving differently in different browsers. Setting the top: 38px initially and reducing it to 0px for screens with (min-width: 800px) should do the trick.

[timagixe]

In what browsers did you observe a different behaviour of margin-top property?

Setting the top: 38px initially and reducing it to 0px for screens with (min-width: 800px) should do the trick.

I have just removed margin-top: -19px; and checked Safari, Chrome, Firefox -> the result was the same in all browsers. Why do we need to set top: 39px; for screen width < 800px; and top: 0px; for screen width >= 800px?

Could you please provide some extra details about the issue the https://github.com/freeCodeCamp/forum-theme/pull/113 fixes?

[ahmaxed]

Here is the main issue: https://github.com/freeCodeCamp/forum-theme/issues/112

I double checked it in chrome, it looks like on incognito (without the extensions) I am not getting the issue.

[timagixe]

I have checked in incognito mode in Chrome, and here is how it looks on 1400px width and 798px width right now.

Details

An below you can find out how it looks like when I deleted negative margin - margin-top: -19px; The same applies to Chrome, Firefox, Safari as per my checks.

Details

It looks better without negative margin.