Skip to content

No "visible" login nav menu for mobile #3

Description

@doug-foster

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.

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions