The CSS property overflow-x:hidden; is not functioning properly on mobile devices despite trying multiple solutions recommended online

Seeking help on a persistent issue, but previous solutions haven't worked for me.

Looking to implement a hamburger menu that transitions in from offscreen.

The design appears correctly on desktop and simulating mobile, but actual mobile view requires horizontal scrolling to access the offscreen menu.

I'm relatively new to HTML/CSS.

Here are some approaches I've attempted:

Trying various position values (fixed, absolute, relative) disrupted the navbar layout.

html, body{
      width:100%;
      overflow-x: hidden;
    }

Also experimented with:

#root{
   overflow-x: hidden;
 }

And adding a wrapper element inside the body:

.wrapper{
      position: fixed;
      overflow-x: hidden;
   }

Including specific viewport settings like minimum-scale and user-scalable:

<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1, user-scalable=no">

Excerpt from my index file:

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1, user-scalable=no">
    <link rel="stylesheet" href="style.css" asp-append-version="true" />
    <link href="https://fonts.googleapis.com/css2?family=DM+Sans&display=swap" rel="stylesheet"> 
    <link href="https://fonts.googleapis.com/css2?family=Quicksand:wght@400;500;600&display=swap" rel="stylesheet">
    <title>Justin</title>
</head>

<header>    
  
</header>

<body>
    <div class="wrapper">
<nav>
    <div class="logo">Unique Logo</div>
    <ul class="nav-links">
        <li><a href="#">Home</a></li>
        <li><a href="#">About</a></li>
        <li><a href="#">Content</a></li>
        <li><a href="#">Contact</a></li>
    </ul>
    <div class="burger">
        <div class="line1"></div>
        <div class="line2"></div>
        <div class="line3"></div>
    </div>
</nav>
<script src="app.js"></script>

<div class="card" style="width:fit-content">
    <img src="BW Boathouse16X20.jpg" alt="Avatar">
    <div class="container">
      <h4><b>Justin</b></h4>
      <p>Boathouse</p>
    </div>
  </div> 
    </div>
</body>
</html>

CSS styles including the failed attempts:

 /* The navigation menu */
 *{
    padding: 0;
    margin:0;
    box-sizing: border-box;
    
    font-family: 'Quicksand', sans-serif;
    text-transform: uppercase;
 }

 #root{
   overflow-x: hidden;
 }


html, body{
   width:100%;
   overflow-x: hidden;
}


 nav{
    display:flex;
    justify-content: space-around;
    align-items: center;
    height: 80px;
    background-color: whitesmoke;
    box-shadow: 0 2px 4px -2px rgb(0,0,0,.35);
 }

 .nav-links{
    display:flex;
    width: 30%;
    justify-content: space-around;
 }

 .nav-links a{
    text-decoration: none;
    font-size: 14px;
    font-weight: 500;
    letter-spacing: 2px;
    color: rgb(25, 25, 25)
 }

 .nav-links li{
    list-style: none;
 }

.burger{
    display: none;
}

.burger div{
    width: 25px;
    height: 2px;
    background-color: rgb(25, 25, 25);
    margin: 5px;
    border-radius: 1px; 
    transition: all .25s ease;   
}

 .logo{
    letter-spacing: 5px;
    font-size: 22px;
    font-weight: 600;
    color: rgb(25, 25, 25)
 }

h4{
   font-size: 16px;
}

p{
   font-size: 14px;
}

 .card {
   z-index: -1;
   box-shadow: 0 2px 4px -2px rgb(0,0,0,.35);
   transition: 0.3s;
   position: absolute;
   top: 10%;
   left: 50%;
   transform: translateX(-50%);
 }
 
 .card:hover {
   box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2);
 }
 
 .container {
   display:flex;
   flex-direction: column;
   text-align: center;      
   padding: 8px;
 }

.card img{
   height:35vw;
}


 @media  screen and (max-width:1200px) {
   body{
      overflow-x: hidden;
  }
    .nav-links{
                width: 50%;
             }
 }

 @media  screen and (max-width:900px) {
   .wrapper{
      position: fixed;
      overflow-x: hidden;
   }
    html, body{
      width:100%;
      overflow-x: hidden;
    }
    nav{
        display:flex;
        justify-content: space-around;
        align-items: center;
        height: 7vh;;
        background-color: whitesmoke;
        box-shadow: 0 2px 4px -2px rgb(0,0,0,.35);
        width:100vw;
     }

     
     .card {
      z-index: -1;
      box-shadow: 0 2px 4px -2px rgb(0,0,0,.35);
      transition: 0.3s;
      position: absolute;
      top: 10%;
      left: 50%;
      transform: translateX(-50%);
    }
    
    .card:hover {
      box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2);
    }
    
    .card img{
      width:85vw;
      height:auto;
   }

    .container {
      display:flex;
      flex-direction: column;
      text-align: center;      
      padding: 8px;
    }

.nav-links{
    position:absolute;
    right:0px;  
    height:25vh;
    top: 6vh;
    display: flex;
    flex-direction: column;
    width: 100%;
    background-color: whitesmoke;
    transform: translateX(105%);
    transition: transform 0.5s ease-in;
    box-shadow: 0px 2px 4px -2px rgb(0,0,0,.35);

}

.nav-links li{
   width:100%;
   height: 7vh;
   box-sizing: border-box;
   opacity: 0;  
   text-align: center;  
   display:flex;
   align-items: center;
   justify-content: center;
}

.nav-links li:hover{
   background-color: lightgray;
}

.burger{
    display: block;
}

 }

 .nav-active{
    transform: translateX(0%);
 }

 @keyframes navLinkFade{
    from{
    opacity: 0;
    transform: translateX(50px);
    }

    to{
    opacity: 1;
    transform: translateX(0px);
    }
 }

 @keyframes navLinkFadeOut{
   from{
   opacity: 1;
   transform: translateX(0px);
   }

   to{
   opacity: 0;
   transform: translateX(50px);
   }
}

.toggle .line1{
   transform: rotate(-45deg) translate(-5px,5px);
}
.toggle .line2{ 
   opacity: 0;
}
.toggle .line3{
   transform: rotate(45deg) translate(-5px,-5px);
}

JavaScript code snippet:

const navSlide = () => {
    const burger = document.querySelector('.burger');
    const nav = document.querySelector('.nav-links');
    const navLinks = document.querySelectorAll('.nav-links li');

    burger.addEventListener('click', () => {
        //Toggle Nav
        nav.classList.toggle('nav-active');
        //Animate Links
        navLinks.forEach((link, index) => {
            if(link.style.animation){
                link.style.animation='';
            } else{
                link.style.animation=link.style.animation = `navLinkFade 0.5s ease forwards ${index / 7 +.75}s`;
            }
         });
         //Burger Animate
        burger.classList.toggle('toggle');

    });
    

}

navSlide();

Answer №1

Indeed, the challenges arise when one lacks complete understanding of what they are working on.

By adjusting the placement within the .nav-links section under the specified media query,

@media  screen and (max-width:900px)

by setting it to fixed, the issue was resolved, possibly while keeping some of the other solutions in place. I will need to experiment by removing them one by one until I identify the optimal solution.

.nav-links{
    position:fixed;
    right:0px;  
    height:25vh;
    top: 6vh;
    display: flex;
    flex-direction: column;
    width: 100%;
    background-color: whitesmoke;
    transform: translateX(105%);
    transition: transform 0.5s ease-in;
    box-shadow: 0px 2px 4px -2px rgb(0,0,0,.35);
}

No other adjustments were actually necessary. Simply changing my nav-links to

position: fixed;

solved the problem completely.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Reasons for the failure of file uploads from the React frontend to the backend system

Recently, I embarked on a new project that involves using React for the front-end and Node for the back-end. The main requirement of this project is to upload multiple images from the front-end, with the back-end handling the file uploads to Cloudinary. I ...

Is there a way to efficiently line up and run several promises simultaneously while using just one callback function?

I am currently utilizing the http request library called got. This package makes handling asynchronous http connections fast and easy. However, I have encountered a challenge with got being a promisified package, which presents certain difficulties for me ...

npm unable to locate the specified file

I'm currently following a tutorial on creating a Google Maps clone. After completing the build, I tried running the npm start command but encountered the following errors: npm ERR! code ENOENT npm ERR! syscall open npm ERR! path C:\Users\m ...

Persisting dynamically generated table information into a multidimensional array

I've created a dynamic table and now I'm trying to extract the data from it and store it in a multidimensional array. However, I keep encountering an exception/error that says "Cannot set property of 0 to undefined". https://i.sstatic.net/W8B9j.p ...

adding content to div is becoming less speedy

Currently, I'm developing a drawing board using only html/css/jquery and the drawing functionality is working smoothly. The approach I've taken involves capturing the mousemove events and placing a dot (div) at each point where the event occurs, ...

Highlight and trim lengthy text using React

Imagine I have a lengthy text: Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo con ...

Double f span causing unusual behavior in Chrome browser

Why does the highlight focus on "ort" instead of "fort"? It appears this occurs when there are two f's. When I substitute f with other letters, like d, it shows correctly. Could this be a bug in Chrome? Chrome version is chrome83. add: It seems to be ...

When using Math.floor(Math.random() * val.length), the result will be a letter rather than a number

Looking to implement a feature where a different background image is displayed randomly upon page visit or refresh. Currently, specifying the images in an array like the example below works well, but I want to be able to pull from a folder. $(document).r ...

Creating and sending an email using a contact form in Create-React-App

Currently, I am in the process of developing a website using create-react-app from GitHub. My next task is to create a contact page where user information will be submitted and sent to a designated email address. However, my lack of experience with back-e ...

Switching the menu in mobile view: utilizing vue and pug

Hello, I am having trouble toggling my hamburger menu. When I check the console, it shows an error message: "nav is not defined". header.pug header.site-header div.navbar div.navbar__link.navbar--brand logo div.navbar ...

Using a data loader with react-router

I am currently working on a react app where I have implemented routes using the new data loaders from react-router-dom import { RouterProvider, createBrowserRouter, createRoutesFromElements, Route } from 'react-router-dom'; import Home fr ...

Exploring Data and Models within AngularJS

I am working on a WebApp that has a unique HTML layout Nav-column-| Center Column---- | Right Column Link1---------|Data corresponding|Data Corresponding to Link1-A Link2---------| to Nav-column------| (ie based oon Center Column Link) Link3----- ...

Is there a way to utilize classes in various elements when other jQuery selectors are not functioning properly?

Could someone please clarify or provide an alternative solution to the following situation: The class fruit is present in two different tag elements, and one of these elements has the add class used in a jQuery selector. However, the alert box is not disp ...

Attempting to align multiple images in the center

I'm struggling with this issue, trying to center my images. It seems like the first image referenced in imgTop is centered while the second one goes to the right. I want both to be centered evenly. Any help would be appreciated! #imageContainer { ...

The window.open function is returning a null value after attempting to open the specified

Is there a way to prevent users from opening more than one IFrame window for my application? I have included the following code: <html> <head> <title>Testing Window Opening Limitation</title> <meta http-equiv="Content-Type" cont ...

Trouble with arranging nested bootstrap grid cells

Having a bit of trouble with the bootstrap framework. I am trying to set up a simple box with an image on the left side and some text and other elements on the right side. However, I am encountering issues when it is viewed on smaller screens. Here is ...

How can I set up multiselect values in AngularJS ui-select?

Solution: Success! I managed to resolve the issue by implementing this solution and creating a customized build of the ui-select. Hopefully, this fix will be incorporated into the official master branch soon! Issue Is there a way to set up a select elem ...

the order of initialization in angularjs directives with templateUrl

In my current scenario, I am faced with a situation where I need to broadcast an event from one controller and have another directive's controller receive the message. The problem arises because the event is sent immediately upon startup of the contro ...

The process of utilizing variables to form objects in ES6

My ES5 code contains a variable as shown below. var options = { clientId : clientId, keepAlive : keepAlive, clean : clean, reconnectPeriod : reconnectPeriod, will : lastWillMessage }; If I want to convert this to ES6, I can do so by writing ...

JS receiving a reference to an undefined variable from Flask

I referenced this helpful post on Stack Overflow to transfer data from Flask to a JS file. Flask: @app.route('/') def home(): content = "Hello" return render_template('index.html', content=content) HTML <head> ...