Styled read more page navbar properly in blog page. #1053
Merged
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
Rationale for this change
The "Read More" page under the Blog section previously lacked a consistent and visually cohesive navbar design that matched the rest of the website’s aesthetic.
This change introduces a styled, responsive, and theme-adaptive navbar to ensure design uniformity across all pages and enhance user navigation flow.
Additionally, this implementation fixes alignment issues (logo, navigation links, and buttons now appear on the same line) and improves overall visual clarity for both light and dark themes.
What changes are included in this PR?
Implemented a fixed, fully responsive navbar with gradient background and blur effect for a polished look.
Ensured logo, navigation links, and action buttons (e.g., “Login” and “Theme Toggle”) align neatly on one line using Flexbox.
Added dark-theme support to maintain visibility and aesthetic consistency.
Enhanced hover transitions and shadow effects for better interactivity.
Adjusted top padding on the body to accommodate the fixed header.
Maintained a consistent visual hierarchy to match the homepage and pricing pages.
Improved mobile responsiveness (smooth collapse under the toggler icon).
Are these changes tested?
Yes.
Verified in Chrome, Edge, and Firefox for cross-browser compatibility.
Tested on desktop, tablet, and mobile breakpoints to ensure responsive layout.
Validated dark mode transitions and hover animations.
Confirmed alignment of logo, navigation items, and buttons remains consistent at all viewport sizes.
Are there any user-facing changes?
Yes.
Users will now experience:
A visually consistent, modern navbar on the Blog’s "Read More" page.
Seamless dark/light theme transition for better readability.
Improved navigation experience, matching the design of other pages.
No breaking changes were introduced — this update only enhances UI consistency and user experience.
read.more.mp4