[Bug] Adjust Burger Icon Position and Add Spacing When Active on Small Screens

[wendy640]

Description

On smaller screens, the burger menu icon in the navbar is not optimally positioned. It appears slightly misaligned and should be moved upward a little. Additionally, when the burger menu is hovered over or activated, there is no visible space between the "cc legal database logo" and the div containing the burger icon, making the layout feel cramped.

Reproduction

1. Open the LegalDB page on a small screen device or resize the browser to a smaller width.
2. Observe the position of the burger icon in the navbar.
3. Click or hover over the burger icon to activate the dropdown menu.
4. Notice the lack of spacing between the logo and the burger menu div.

Expectation

The burger icon should be positioned more accurately on smaller screens, with a slight adjustment to move it upward. Additionally, there should be visible space between the logo and the div containing the burger icon when it is hovered over or active, ensuring a cleaner and more balanced layout.

Screenshots

Environment

• Device: (eg. iPhone Xs; laptop)
• OS: (eg. iOS 13.5; Fedora 32)
• Browser: (eg. Safari; Firefox)
• Version: (eg. 13; 73)
• Other info: (eg. display resolution, ease-of-access settings)

Additional context

Improving the burger icon positioning and adding spacing between the logo and the menu will enhance usability and provide a more polished appearance on smaller screens.

Resolution

• I would be interested in resolving this bug.