Navbar overflows when emulating from phone

Question

Mobile menu should not be visible and it should not overflow when used from phone. When I just decrease the browser on the computer it works as intended. Here is my code. HTML:

document.addEventListener('DOMContentLoaded', function () {
    const toggleButton = document.querySelector('.navbar .mobile-menu-toggle');
    const mobileMenu = document.querySelector('.navbar .mobile-menu-items');

    toggleButton.addEventListener('click', function () {
        mobileMenu.classList.toggle('active');
    })
})

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  font-family: 'Poppins', sans-serif;
  overflow-x: hidden;
}

a {
  text-decoration: none;
  color: #333;
}

li {
  list-style: none;
}

img {
  max-width: 100%;
}

.container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 2rem;
}

.navbar {
  background-color: lightblue;
  padding: 1rem 2rem;
  height: 80px;
}

.navbar .logo {
  width: 50px;
}

.navbar-flex {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.navbar .main-menu-list {
  display: flex;
  gap: 1.5rem;
  align-items: center;
}

.navbar a:hover {
  color: blue;
}

/* Mobile Menu */

.navbar .mobile-menu-items {
  position: absolute;
  top: 80px;
  bottom: 0;
  left: 0;
  width: 100%;
  background: rgba(154, 192, 204, 0.5);
  text-align: center;
  transition: transform 0.3s ease;
  transform: translateX(100%);
}

.navbar .mobile-menu-list {
  display: flex;
  flex-direction: column;
  align-items: center;
  height: 100%;
  padding-top: 300px;
  gap: 2rem;
  font-size: 1.2rem;
}

.navbar .mobile-menu-toggle {
  cursor: pointer;
}

.navbar .mobile-menu-items.active {
  transform: translateX(0);
}

.navbar .mobile-menu {
  display: none;
}

@media (max-width: 768px) {
  .navbar .main-menu {
    display: none;
  }

  .navbar .mobile-menu {


    display: block;
  }
}

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link rel="preconnect" href="https://fonts.googleapis.com" />
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
    <link
      href="https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700;800&display=swap"
      rel="stylesheet" />
    <link
      rel="stylesheet"
      href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css"
      integrity="sha512-DTOQO9RWCH3ppGqcWaEA1BIZOC6xxalwEsw9c2QQeAIftl+Vegovlnee1c9QX4TctnWMn13TZye+giMm8e2LwA=="
      crossorigin="anonymous"
      referrerpolicy="no-referrer" />
    <link rel="stylesheet" href="styles.css" />
    <title>HTML & CSS Sandbox</title>
  </head>
  <body>
    <nav class="navbar">
      <div class="container navbar-flex">
        <img src="./logo.png" alt="Traversy Media" class="logo" />
        <div class="main-menu">
          <ul class="main-menu-list">
            <li>
              <a href="#">Home</a>
            </li>
            <li>
              <a href="#">About</a>
            </li>
            <li>
              <a href="#">Services</a>
            </li>
            <li>
              <a href="#">Blog</a>
            </li>
            <li>
              <a href="#">Contact</a>
            </li>
          </ul>
        </div>
        <!-- Mobile Menu -->
        <div class="mobile-menu">
          <div class="mobile-menu-toggle">
            <i class="fas fa-bars fa-2x"></i>
          </div>
          <div class="mobile-menu-items">
            <ul class="mobile-menu-list">
              <li>
                <a href="#">Home</a>
              </li>
              <li>
                <a href="#">About</a>
              </li>
              <li>
                <a href="#">Services</a>
              </li>
              <li>
                <a href="#">Blog</a>
              </li>
              <li>
                <a href="#">Contact</a>
              </li>
            </ul>
          </div>
        </div>
      </div>
    </nav>
    <script src="./script.js"></script>
  </body>
</html>

When I open inspect element in browser(I tried it in Chrome and Firefox as well as with browserstack app) it overflows and I can see mobile menu when I should not.

Have you tried to check the layout on an actual mobile device? If not, you should. Some layouts may appear broken on desktops but actually work just fine on mobile devices (even if you decrease the window size on your desktop to match your mobile device). — Shreyas Salankimatt
– Shreyas Salankimatt, Commented May 27 at 19:23

David · Accepted Answer · 2025-05-28 14:48:51Z

You forgot to add position: relative to the .navbar element. Without it, the absolute positioned menu items can overflow outside the navbar, causing layout issues.

Also, don’t forget to add overflow-x: hidden to the html tag, to prevent horizontal scrolling caused by off-screen elements.

Here’s how you can fix it:

/* add this new props */
html {
    overflow-x: hidden; 
}

.navbar {
    background-color: lightblue;
    padding: 1rem 2rem;
    height: 80px;
    
    /* and add code below */
    position: relative;
}

Update Solution

base on your issue on comment, that code above will totally remove the mobile menu. so the solution is to remove

html{
    overflow-x: hidden
}

and use this instead

.navbar {
    background-color: lightblue;
    padding: 1rem 2rem;
    height: 80px;
    /* add these 2 code below */
    position: relative;
    overflow-x: clip;
}

I also make your navbar more clean and beauty by adjust some padding and height. so you could use this full code instead (don't worry, I add comment to make sure you know what changes I made)

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: 'Poppins', sans-serif;
    overflow-x: hidden;
}

a {
    text-decoration: none;
    color: #333;
}

li {
    list-style: none;
}

img {
    max-width: 100%;
}

.container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 2rem;
}

.navbar {
    background-color: lightblue;
    padding: 1rem 2rem;
    height: 80px;
    /* add these 2 code below */
    position: relative;
    overflow-x: clip;
}

.navbar .logo {
    width: 50px;
}

.navbar-flex {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.navbar .main-menu-list {
    display: flex;
    gap: 1.5rem;
    align-items: center;
}

.navbar a:hover {
    color: blue;
}

/* Mobile Menu */

.navbar .mobile-menu-items {
    position: absolute;
    top: 80px;
    bottom: 0;
    left: 0;
    width: 100%;
    background: rgba(154, 192, 204, 0.5);
    text-align: center;
    transition: transform 0.3s ease;
    transform: translateX(100%);
    /* add these 2 props bellow */
    height: fit-content;
    padding-block: 25px;
}

.navbar .mobile-menu-list {
    display: flex;
    flex-direction: column;
    align-items: center;
    height: 100%;
    /* padding-top: 300px; comment this code */
    gap: 2rem;
    font-size: 1.2rem;
}

.navbar .mobile-menu-toggle {
    cursor: pointer;
}

.navbar .mobile-menu-items.active {
    transform: translateX(0);
}

.navbar .mobile-menu {
    display: none;
}

@media (max-width: 768px) {
    .navbar .main-menu {
        display: none;
    }

    .navbar .mobile-menu {


        display: block;
    }
}

It fixed this problem but created another: mobile menu doesn't appear when pressing on toggle
@user30652118, hi I've updated the solution. now it should works well. please don't forget to hit upvote button if my solution solve your problem. thanks 😁

Jeffrey Gaydos · Accepted Answer · 2025-05-28 02:45:18Z

I was able to reproduce what I think your issue was by first starting a browser without using the emulation provided by DevTools, refreshing the page, and then activating the emulation which I previously set to a screen size under 768px. I used Edge btw but chrome should react similarly.

The thing I think causes this is the display: none on the .mobile-menu-items element that gets switched to display: block. I removed this technically unnecessary styling change and kept it display: block regardless of screen size. Using the testing method I described earlier, I no longer saw the bug. Hopefully that fixes it for you.

Here's the new CSS you'll need:

.navbar .mobile-menu-toggle {
  display: none;
}

@media (max-width: 768px) {
  .navbar .main-menu {
    display: none;
  }

  .navbar .mobile-menu-toggle {
    display: block;
  }
}

Rohan Kushwaha · Accepted Answer · 2025-05-28 05:42:55Z

0

You're encountering an issue where the mobile menu still causes horizontal overflow even when it's not visible. This happens because you're only using transform: translateX(100%) to hide the menu, but the element still exists in the DOM flow and can affect the layout.

💡 Fix

Update your CSS to completely hide the .mobile-menu-items when it's not active, using visibility, pointer-events, and position: fixed. Here's the improved code:

/* Completely hide mobile menu off-screen */
.navbar .mobile-menu-items {
  position: fixed; /* Better than absolute for hiding */
  top: 80px;
  left: 0;
  width: 100%;
  height: calc(100% - 80px);
  background: rgba(154, 192, 204, 0.95);
  text-align: center;
  transform: translateX(100%);
  transition: transform 0.3s ease;
  z-index: 999;
  overflow-y: auto;
  pointer-events: none; /* Disable interaction */
  visibility: hidden;   /* Hide from screen readers and layout */
}

/* Show the menu when active */
.navbar .mobile-menu-items.active {
  transform: translateX(0);
  pointer-events: auto;
  visibility: visible;
}

Also make sure to prevent body overflow:

body {
  overflow-x: hidden;
}

✅ Optional Enhancement (JS):

To disable background scroll when the menu is open:

toggleButton.addEventListener('click', function () {
  mobileMenu.classList.toggle('active');
  document.body.style.overflow = mobileMenu.classList.contains('active') ? 'hidden' : 'auto';
});

✅ Result:

No overflow on mobile
Menu truly hidden when inactive
Cleaner UX on small devices

answered May 28 at 5:42

Rohan Kushwaha

11 bronze badge

2 Comments

Lã Ngọc Hải May 28 at 6:44

please don't post AI generated content

XuMuK May 28 at 12:08

Your answer is similar to AI generated, please, check if this solution is working. Do not trust AI results without testing.

Collectives™ on Stack Overflow

Navbar overflows when emulating from phone

3 Answers 3

Update Solution

2 Comments

Comments

💡 Fix

✅ Optional Enhancement (JS):

✅ Result:

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Update Solution

2 Comments

Comments

💡 Fix

✅ Optional Enhancement (JS):

✅ Result:

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related