Inconsistent navbar on workbench section

[JayashTripathy]

Describe the bug
the contents inside of navbar is not adapting with different screen sizes in workbench section

To Reproduce
Steps to reproduce the behavior:

1. Start the development environment
2. Go to 'http://localhost:4010/apps/landing/landing.html'
3. Click on 'hamburger menu'
4. Select 'Workbench'
5. See the bug

Expected behavior
workbench text should adapt its position according to screen size

Current behavior

• Browser [e.g. chrome, firefox]

Can I work on this issue ?

[Naseem010]

can be resolved using media query or can be solved by detect the screen size using the window.innerWidth property.Check if the screen size is less than or equal to the width of your navbar.If the screen size is less than or equal to the navbar width, add a class to your navbar that will change its position from static to fixed using the position CSS property. You can also add other styles to adjust the position and size of the navbar.When the screen size is larger than the navbar width, remove the class from the navbar to restore its original position.

Sampled code:-

// Get the navbar element
const navbar = document.querySelector('.navbar');

// Set the navbar width
const navbarWidth = 768; // adjust this value as needed

// Function to handle screen size changes
function handleResize() {
// Get the screen width
const screenWidth = window.innerWidth;

// Check if the screen is small enough to modify the navbar
if (screenWidth <= navbarWidth) {
// Add the "fixed" class to the navbar
navbar.classList.add('fixed');
} else {
// Remove the "fixed" class from the navbar
navbar.classList.remove('fixed');
}
}

// Add a listener for screen size changes
window.addEventListener('resize', handleResize);

// Call the function on page load
handleResize();

[Naseem010]

Should i work on this issue?

[prashulkale]

Is this issue still open ? If yes, i would love to work on it.

[ShivamKaushik316]

Can i be assigned for the issue as i have fixed it already ?

[Purnima3]

can I work on this issue?

[abhijain2003]

I have already worked on it, waiting for maintainers to raise pull request

[farmannaseem]

Hi @JayashTripathy can i work on this ?