[Bug] : In Mobile Screen Navbar icon not working & not responsible

[harshal050]

Description of the bug/issue

When I open the site on a mobile screen, I notice that the navbar is not working properly. I expected it to be responsive, but it fails to adapt to the mobile screen as it should.

issue : fixed

Steps to reproduce

Go to https://nightwatchjs.org/api/.
Click on the 'Navbar icon'.
Notice that the navbar is not working and is not responsive.

Sample test

module.exports = {
  'Navbar Responsiveness Test': function (browser) {
    const url = 'https://nightwatchjs.org/api/';

    browser
      .url(url) // Open the URL
      .resizeWindow(375, 667) // Set screen size to simulate a mobile device
      .waitForElementVisible('body', 5000) // Ensure the page loads
      .click('.navbar-icon') // Replace '.navbar-icon' with the actual selector for the navbar icon
      .pause(1000) // Wait for navbar to respond
      .assert.visible('.navbar-menu', 'Navbar menu is visible') // Verify the menu appears
      .end();
  }
};

Command to run

npx nightwatch tests/navbarResponsivenessTest.js

Verbose Output

[Sample Test] Test Suite
────────────────────────────────────────────────────────
⠋ Starting ChromeDriver on port 9515...
  Request POST /session
  {
    desiredCapabilities: {
      browserName: 'chrome',
      'goog:chromeOptions': { w3c: true, args: [] },
      name: 'Sample Test'
    },
    capabilities: {
      alwaysMatch: {
        browserName: 'chrome',
        'goog:chromeOptions': { w3c: true, args: [] }
      }
    }
  }

Nightwatch Configuration

module.exports = {
  src_folders: ['tests'], // Path to your test scripts folder
  page_objects_path: ['page-objects'], // Path for page object files
  custom_commands_path: ['custom-commands'], // Custom command files
  custom_assertions_path: ['custom-assertions'], // Custom assertion files
  plugins: [],
  globals_path: 'globals.js', // Global configuration file
  
  webdriver: {
    start_process: true, // Starts the WebDriver process
    server_path: require('chromedriver').path, // ChromeDriver path
    port: 9515, // Default ChromeDriver port
    cli_args: ['--verbose'] // Verbose WebDriver logs
  },

  test_settings: {
    default: {
      launch_url: 'https://nightwatchjs.org/api/',
      globals: {
        waitForConditionTimeout: 5000 // Default timeout for waitForElement
      },
      desiredCapabilities: {
        browserName: 'chrome',
        'goog:chromeOptions': {
          w3c: true, // W3C WebDriver compatibility
          args: ['--headless', '--disable-gpu', '--window-size=375,667'] // Headless mode & mobile dimensions
        }
      }
    }
  }
};

Nightwatch.js Version

3.9.0

Node Version

v20.11.1

Browser

Chrome 104.0.0

Operating System

Windows 11

Additional Information

It should also be responsive on mobile screens.

[Tanishq67m]

Can I work on this?