Completed navbar responsiveness For all screen sizes in desktops and tablet. #99
Conversation
This file contains 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
|
The latest updates on your projects. Learn more about Vercel for Git ↗︎
|
|
@samar12-rad is attempting to deploy a commit to the minavkaria's projects Team on Vercel. A member of the Team first needs to authorize it. |
|
Navbar will be according to the colour scheme, this is just for better visualization while developing. |
|
Ok, You open a new issue for mobile navbar, I'll review the code in sometime and then merge it |
|
Sure |
|
I created #107 for mobile version |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
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.
Description: This pull request addresses the responsiveness issues for all navbar versions on desktop and tablet. For issue #63
Changes Made:
The existing navbar system was cluttered, containing an excessive amount of data and div elements within a limited space. The location and delivery buttons occupied significant real estate, hindering the visibility of other essential elements in the navbar.
To improve the design, I merged the delivery and location buttons, drawing inspiration from the layout of Amazon's website to achieve a more elegant appearance. Additionally, I adjusted the CSS for the search bar to ensure it remains responsive based on the available space, enhancing the overall aesthetic.
I implemented a three-div structure within the navbar to facilitate automatic responsiveness. Previously, each button was housed within a single navigation div, which restricted flexibility. Furthermore, I modified the appearance of the buttons and search bar to increase their visibility.
Left side: Logo and Your Mode of access to GMART
Center: SearchBar
Right: Complete info of customer and orders
Benefits : Provides better understanding of UI, so increases UX by separating functions
On screens smaller than 1000px, space constraints persisted; therefore, I repositioned the logo from the left side to the top of the navbar. This adjustment alleviated the feeling of congestion and created a more intuitive layout for the buttons, resulting in a cleaner and more user-friendly experience.
These changes contribute to a more visually appealing and functional navbar, fostering a sense of tranquility in the overall design.
Desktop and Tablet Navbar:
Fixed responsiveness issues across all versions.
Width greater than 1550 :
Width 1549 to 1280:
Width 1280 to 1020:
Width 1020 to 768:
Ensured proper alignment and spacing of navbar elements.
Implemented media queries for better adaptability on different screen sizes.
Testing:
Verified responsiveness on multiple devices and screen sizes.
Ensured functionality of all navbar links and buttons.
Related Issues:
The existing code for the navbar was highly cluttered, making it difficult to maintain and understand. I focused on enhancing consistency throughout the codebase, resulting in a more streamlined and organized navigation structure. Because of that, it was a take to make the mobile navbar, as this alone was 450 additions and deletions of code. I have started working on the mobile navbar.
It would be great if you assign me a new issue for mobile navbar please @MinavKaria?
Current progress of mobile navbar-
