Completed navbar responsiveness For all screen sizes in desktops and tablet. #99
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-