Movatterモバイル変換


[0]ホーム

URL:


Skip to content

Navigation Menu

Sign in
Appearance settings

Search code, repositories, users, issues, pull requests...

Provide feedback

We read every piece of feedback, and take your input very seriously.

Saved searches

Use saved searches to filter your results more quickly

Sign up
Appearance settings
This repository was archived by the owner on Aug 16, 2025. It is now read-only.

Fix mobile navbar icon overlap (search and GitHub icons) #487#494

Open
devdattatalele wants to merge1 commit intocoderabbitai:main
base:main
Choose a base branch
Loading
fromdevdattatalele:fix-issue-487-20250811-203421

Conversation

@devdattatalele
Copy link

🐛 Bug Fix: Mobile Navbar Icon Overlap

Fixes:#487

Problem

On mobile devices, the search icon was overlapping with the GitHub icon in the navbar, creating a cluttered UI and potentially affecting usability.

Solution

Added responsive CSS rules specifically targeting mobile viewports (≤996px) to:

  • Proper spacing: Addedgap property to.navbar__items--right for consistent spacing
  • Icon margins: Added explicit margins to prevent overlap between navbar items
  • Search component: Optimized search button sizing and positioning
  • GitHub icon: Added specific styling for the GitHub link with proper padding
  • Small screens: Extra responsive rules for very small screens (≤576px)

Changes

  • Modifiedsrc/css/custom.css with mobile-specific CSS rules
  • Uses Docusaurus's standard breakpoint (996px) for mobile detection
  • Maintains existing desktop functionality while fixing mobile issues

Testing

The fix targets common mobile viewport sizes and should be tested on:

  • Mobile devices in portrait mode
  • Browser DevTools responsive mode
  • Various screen sizes (320px - 768px)

Technical Details

  • Uses CSS Gridgap property for reliable spacing
  • Implements nested media queries for different mobile sizes
  • Targets Docusaurus CSS class names (.navbar__items--right,.DocSearch-Button)
  • Maintains accessibility with proper padding and minimum touch targets

@Mohit5Upadhyay
Copy link

Hi@devdattatalele 👋, thanks for working on this!

Modified src/css/custom.css with mobile-specific CSS rules

It looks like the PR currently shows no file changes, so the fix for the navbar overlap may not have been pushed to this branch yet. Could you please check and push the committed changes to update the PR?

This will help reviewers -- to review changes.

Sign up for freeto subscribe to this conversation on GitHub. Already have an account?Sign in.

Reviewers

No reviews

Assignees

No one assigned

Labels

None yet

Projects

None yet

Milestone

No milestone

Development

Successfully merging this pull request may close these issues.

2 participants

@devdattatalele@Mohit5Upadhyay

[8]ページ先頭

©2009-2025 Movatter.jp