Skip to content

Improve navbar style and mobile responsiveness #282

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
ashish-code6 wants to merge 1 commit into
base: develop
Choose a base branch
from
Open

Improve navbar style and mobile responsiveness #282

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
Empty file added cd
View file
Open in desktop
Empty file.
18 changes: 13 additions & 5 deletions css/navbar.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -10,15 +10,23 @@
}

nav {
font-family: 'roboto';
font-weight: 700;
top: 0;
z-index: 1000;
background-color: #1d1283;
padding: 0;
margin: 0;
Comment on lines +13 to +17
Copy link

@coderabbitai coderabbitai bot Jun 19, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

⚠️ Potential issue

Remove ineffective top and z-index properties or add positioning
The nav selector sets top: 0 and z-index: 1000 without a positioning context (position is static by default), so these properties have no effect. Either remove them or add an appropriate position (e.g., sticky/fixed) if intended.

🤖 Prompt for AI Agents 
In css/navbar.css around lines 13 to 17, the `top: 0` and `z-index: 1000`
properties have no effect because the `nav` element lacks a positioning context.
To fix this, add a `position` property such as `sticky` or `fixed` to the `nav`
selector to enable these properties, or remove the `top` and `z-index` lines if
positioning is not needed.

}

.nav-menu {
display: flex;
align-items: center;
list-style-type: none;
Comment on lines +20 to +22
Copy link

@coderabbitai coderabbitai bot Jun 19, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

🧹 Nitpick (assertive)

Consider using gap and cleaning up list-style
The flex layout works, but you can simplify spacing by using the gap property instead of margins on child elements. Also, list-style-type: none and resetting margin/padding are good, but the closing brace marked as changed is noise.

Also applies to: 25-25

🤖 Prompt for AI Agents 
In css/navbar.css around lines 20 to 22 and line 25, improve the flex container
by adding the `gap` property to handle spacing between child elements instead of
using margins on them. Also, clean up the list styling by ensuring
`list-style-type: none` is set and reset both `margin` and `padding` to zero on
the list to remove default spacing. Remove any unnecessary or noisy closing
braces to keep the CSS clean.

margin: 0;
padding: 0;
list-style-type: none;
overflow: hidden;
}
header {
position: sticky;
top: 0;
z-index: 999;
Comment on lines +26 to +29
Copy link

@coderabbitai coderabbitai bot Jun 19, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

🧹 Nitpick (assertive)

Ensure header background covers full width
The header is now sticky, but it has no background, so content beneath may peek through as you scroll. Consider adding a matching background-color (e.g., var(--color-nav)) to avoid transparency artifacts.

🤖 Prompt for AI Agents 
In css/navbar.css around lines 26 to 29, the header element is sticky but lacks
a background color, causing content underneath to show through when scrolling.
Add a background-color property to the header, such as background-color:
var(--color-nav), to ensure the header background covers the full width and
prevents transparency artifacts.

}

nav li {
Expand Down
Empty file added git
View file
Open in desktop
Empty file.
Loading