sampadatiwari30/DeshDarshan

Navbar Styling Issue on Small Devices

Aberta

#611 aberto em 20 de ago. de 2025

Ver no GitHubGuia do colaborador
 (2 comentários) (0 reação) (1 responsável)HTML (157 forks)auto 404
buggood first issuegssoc 25

Métricas do repositório

Stars
 (33 estrelas)
Métricas de merge de PR
 (Nenhuma PRs mesclada em 30d)

Description

Description: The current navbar layout breaks or misaligns on smaller screen sizes (e.g., mobile devices). This affects usability and visual consistency across responsive breakpoints.

Expected Behavior: Navbar should remain accessible and visually aligned on all screen sizes Items should stack or collapse appropriately (e.g., hamburger menu) Padding, font size, and spacing should adapt to viewport width

Steps to Reproduce: Open the site on a mobile device or resize browser to <768px Observe navbar layout and item alignment Note any overflow, misalignment, or hidden elements

Suggested Fix: Use responsive utility classes (e.g., md:flex, sm:hidden) Ensure semantic structure and accessibility (e.g., , ARIA roles) Consider implementing a mobile-first layout with collapsible menu

Pls assigne: @janavipandole

Guia do colaborador

Direção de pesquisa
Use as ferramentas de desenvolvedor do navegador para inspecionar a barra de navegação em uma janela pequena. Verifique se há classes utilitárias responsivas ausentes (ex.: md:flex, sm:hidden) e certifique se de que o menu hambúrguer está sendo alternado corretamente. Verifique se as media queries CSS não foram sobrescritas ou estão em conflito.
Pilha de tecnologia
htmlcsstailwindcss
Domain
frontend
Tipo Issue
Bug
DifficultyDificuldade de implementação estimada para um novo contribuidor, de 1 para alterações muito pequenas a 5 para trabalho de nível especializado.
2
Tempo estimadoUm intervalo de tempo aproximado para um colaborador experiente investigar, implementar, testar e preparar um pull request.
1-3 horas
Status da atividadeQuão disponível o issue aparece agora: novo, ativo, obsoleto, bloqueado ou aguardando entrada do mantenedor.
Ativo
ClarityCom que clareza o issue explica a mudança esperada, os critérios de aceitação e a próxima etapa.
Claro
Prerequisites
HTMLCSSResponsive Design
Simpatia para novatosUma pontuação de 1 a 100 que estima o quão acessível este issue é para colaboradores iniciantes.
80