The current layout of the secondary navigation bar (ccnav) differs from the IDFC reference site. Specifically:
- IDFC Site: Features a split layout with the navigation menu items aligned to the left and the notification bell icon positioned on the far right.
- Current Project: All items are currently grouped together in the center.
Technical Changes Implemented
To facilitate this layout transition, we are using a specific semantic CSS class for the bell icon: .category-nav-bulletin-card-notification.
By targeting this class, we can decouple the bell icon's positioning from the main navigation list. This allows the icon to be pushed to the far right independently while maintaining the menu items on the left.
Ref: #419
Task Requirements
The goal of this issue is to adjust the CSS and layout to achieve the following:
- Alignment: Push the regular menu items to the left and the bell icon to the far right.
- Width: Match the overall container width of the IDFC reference site (spanning from the IDFC logo edge to the Login button edge).
- Consistency: Ensure the horizontal spacing and padding match the reference design.
The current layout of the secondary navigation bar (ccnav) differs from the IDFC reference site. Specifically:
Technical Changes Implemented
To facilitate this layout transition, we are using a specific semantic CSS class for the bell icon: .category-nav-bulletin-card-notification.
By targeting this class, we can decouple the bell icon's positioning from the main navigation list. This allows the icon to be pushed to the far right independently while maintaining the menu items on the left.
Ref: #419
Task Requirements
The goal of this issue is to adjust the CSS and layout to achieve the following: