No "visible" login nav menu for mobile

Open Beginner friendly
#3 0 comments 1 reaction 0 assignees View on GitHub

Nobody has claimed this yet.

Assessment

Difficulty
2/5
Estimated time
1-3 hours
Newbie friendliness
68/100
Issue type
Bug
Clarity
Mostly clear
Activity status
Quiet
Tech stack
css
Domain
frontend

Research direction

Reproduce the navbar at https://rss.chat/ in responsive view at widths 445px and 444px using mobile Safari or Chrome. Inspect the .navbar .nav.pull-right float behavior and confirm the login menu remains visible and correctly positioned at 444px without breaking the wider layout.

Written by the indexing model from the issue text.

Description

Observed this with both mobile Safari & Chrome on my iPhone 17 Pro.

To replicate:

  1. Open https://rss.chat/ with Chrome Inspect.

  2. Select responsive view for dimensions.

  3. Set width to 445px.
    The login menu is visible.

  4. Drop width to 444px.
    The login menu "disappears".

At 444px the login menu has no room, so it's forced below the other nav items (why the container gets taller) and for some reason the float style gets wonky. Image

  1. Toggle off the float style (.navbar .nav.pull-right {float: right;}).
    The login menu will "reappear".
Image

A quick hack might be to override and remove the original float style, then add a media query: @media (width >= 444px) { .navbar .nav.pull-right { float: right; } }.

I hate floats, IMO CSS Flexbox is better for nav bars. Ask Claude to rework the nav to use Flexbox and see if you don't like that better Dave.

Also, again IMO, I like all major page elements to have an id, even if styling is done with classes. I think it helps when debugging.

Dominant language
JavaScript
Stars
37
Forks
7
PR merge metrics
No merged PRs in 30d

Contributor guide

No contributing guide indexed for this repository

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. Open a pull request that references the issue number.

More from scripting/rss.chat

All issues in scripting/rss.chat

Similar issues

More JavaScript issues

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.