Styled navbar properly for pricing plans page. #1052
Merged
Conversation
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
👋 Thank you for opening this Pull Request!Your contribution is much appreciated. Our team will review it shortly. 🔎 In the meantime, please:
We look forward to collaborating with you. 🚀 |
Contributor
Author
|
pls check and assign label |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
2 participants
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 current navbar layout on the Pricing Plans page did not maintain consistent alignment with the home page and other sections of the site. Some elements (like the brand logo, navigation links, and theme toggle button) were stacking or misaligned due to positioning and flexbox inconsistencies.
This change introduces a fully responsive, horizontally aligned styled navbar, ensuring all elements appear on the same line and maintain visual uniformity across light and dark themes.
What changes are included in this PR?
Refactored navbar CSS to use flexbox layout for consistent horizontal alignment.
Updated .header .navbar, .navbar-nav, and .navbar-collapse classes to ensure all elements appear in one line.
Applied improved spacing (gap, justify-content, align-items) for better balance.
Ensured theme toggle button, nav links, and logo remain aligned and responsive.
Added support for dark and light themes with seamless background transitions.
Enhanced hover effects, shadow, and gradient consistency with the home page style.
Are these changes tested?
Yes.
Verified across major browsers (Chrome, Edge, Firefox) for layout consistency.
Tested on multiple screen sizes to ensure all navbar items remain aligned on one line.
Checked theme toggle and link hover effects in both light and dark modes.
Are there any user-facing changes?
Yes.
Users will now see a cleaner, more consistent navbar on the Pricing Plans page.
All elements (logo, navigation links, and theme toggle button) stay on the same horizontal line.
The visual design now matches the overall site aesthetic, improving UX consistency.