Issue with nav bar of website #884
Description
This translation bar blocks the access of navigation bar, after translating the page to any language, during scrolling down. This can make it difficult for users to navigate the website while using the translation feature.
This issue appears to be a result of the z-index and position properties of the Google Translate bar and the navigation bar. The Google Translate bar has a higher z-index and a fixed position, causing it to overlap the navigation bar when scrolling.
To resolve this issue, I propose the following solution:
- Increase the z-index of the navigation bar so it is larger than the z-index of the Google Translate bar. This will ensure the navigation bar is always on top.
- If the first solution is not feasible, another option would be to add a top margin or padding to the body content when the Google Translate bar is active. This would push down the content of the page, including the navigation bar, so it is not hidden by the Google Translate bar.
Here is a rough example of how this might be implemented in JavaScript:
if (document.querySelector('.goog-te-banner-frame')) { document.body.style.marginTop = '40px'; // adjust this value as needed }
Please note that this is a rough solution and may need to be adjusted based on the actual structure and styles of the