Updated theme UI and Made the code Clean for navbar

[Hardikdhoot121]

🎨 UI & Layout Improvements

This document details the recent UI bug fixes and layout improvement made to the Home page and NavBar Section .
Please provide a positive review if possible, as I invested a significant amount of time understanding the existing CSS architecture and resolving these issues carefully .

1. The Problems

During the testing of the interface, several layout and styling inconsistencies were identified:

• Asymmetrical Navbar: The main navigation links were pushed to the right side of the screen along with the user profile, making the header look unbalanced on desktop screens. The spacing between the links was also too wide and inconsistent .
• Redundant Mobile Icons: The user icon was not appearing on the screen despite already being present in the codebase provided by the team.
• Hero Button Mismatch: The CTA buttons in the hero section ("Browse Syllabus" and "Previous Papers") had different widths due to text length differences. Additionally, global CSS from other pages was "leaking" into the Home page, overriding the button shapes and colors unexpectedly. (I mean to say that some elements of home.css file was not written properly)

---

2. How I Solved the Problems

Perfectly Centered Navbar

• The Fix: I implemented a 3-column flexbox layout by applying flex: 1 to the Logo container, the Links container, and the Profile container. This forces the middle container to sit dead-center symmetrically. I also reduced the link gap to a cleaner 1.5rem.

The Profile Picture Fix (apparing in both horizontal layout and vertical dropdown in the page)

• The Fix: I added a specific CSS rule (display: none) tied to a mobile Media Query (@media max-width: 768px) , by doing this I made sure that display none in the Horizontal section when width is less than 768px .

Uniform Hero Buttons

• **The Fix:**I added .home prefixes to .btn and .btn-secondary in Home.css to increase CSS specificity, and also set a fixed width of 220px to ensure both buttons look identical while maintaining their flex-wrap responsiveness for mobile.

---

3. Before

• Navbar Layout:

• Unavailability of the User Profile Button

• Mismatched Buttons: [Buttons should be aligned centered and should be symmetric wrt margin]

4. After

• Symmetrical Navbar:

• Clean Mobile Header:

• Uniform Buttons: [ Now the above two buttons are aligned in center and the bottom 2 x 2 cards are symmetric ]

[vercel]

@Hardikdhoot121 is attempting to deploy a commit to the Lovely Mahour's projects Team on Vercel.

A member of the Team first needs to authorize it.