I made a simple website where i wanted to hide and show div using js everything works fine on desktop, even when the window is reduced But when i try it on mobile the navigation bar start to work in really strange way and sometimes it even make another part of the website disappear

i really don't know where i am doing wrong

here is the complete code

i should have a functioning menu but it is not really usable in mobile because everything lose the place i wanted i think there is some problem with the css, maybe with

display: flex;

and also with

position: sticky;

please help me understand what is wrong here

I made a simple website where i wanted to hide and show div using js everything works fine on desktop, even when the window is reduced But when i try it on mobile the navigation bar start to work in really strange way and sometimes it even make another part of the website disappear

i really don't know where i am doing wrong

here is the complete code https://codepen.io/Giacomo-Petralia/pen/wBwVVOr

i should have a functioning menu but it is not really usable in mobile because everything lose the place i wanted i think there is some problem with the css, maybe with

display: flex;

and also with

position: sticky;

please help me understand what is wrong here

• javascript
• css
• flexbox
• css-position

• Welcome to Stack Overflow. I can see in you codepen what you have a lot of code. Preferably you would include the code in the question, not linking to it. Instead of adding everything try to create a minimal reproducible example. – chrwahl Commented 2 days ago
• @chrwahl the problem is that the menu is not really with link every button has a onclick="myfunction()" that change what you see in the middle i think i can just remove the social part but the rest may have some problem but then.. the site even work in codepen i don't really know what type of problem i created – Giacomo Petralia Commented 2 days ago
• Please edit your question to include a minimal reproducible example so that readers can run your code to answer your question. – DarkBee Commented 18 hours ago

2 Answers 2

It is because your website is not responsible. You should use display: flex as much as you can because it moves elements to next line when the websites width gets smaller. As well as using media queries, it basically applies wanted changes when the websites width (viewport) shrinks

video on media queries: https://www.youtube.com/watch?v=2KL-z9A56SQ

video on flexbox (really good) https://www.youtube.com/watch?v=GteJWhCikCk&t=52s

Just move div .nav-bar-container inside .container like below

<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH" crossorigin="anonymous">
<script src="https://kit.fontawesome.com/ec66f84d89.js" crossorigin="anonymous"></script>

<div class="container">
  <div class="nav-bar-container" id="mynav">
    <button class="index-button" onclick="index()">NOME SITO</button>
    <button class="open-menu-button" id="open-menu" onclick="openMenu()"><i class="fa-solid fa-bars"></i></button>
    <button class="close-menu-button" id="close-menu" onclick="closeMenu()"><i class="fa-solid fa-xmark"></i></button>
    <div class="menu-container" id="menu">
      <button class="menu-button" onclick="index()"><i class="fa-solid fa-house"></i></button>
      <button class="menu-button" onclick="about()"><i class="fa-solid fa-circle-info"></i></button>
      <button class="menu-button" onclick="contact()"><i class="fa-solid fa-address-card"></i></button>
      <button class="menu-button" onclick="shop()"><i class="fa-solid fa-cart-shopping"></i></button>
    </div>
  </div>
  <div class="cover-img"></div>
  <div class="logo-container">
    <div class="logo-img"></div>
  </div>
  <div class="text-change-container">
    <div class="text-box" id="index">
      <h1>Lorem Ipsum</h1>
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce quam eros, pellentesque ac urna sed, cursus congue purus. Etiam vel interdum massa. Suspendisse potenti. Phasellus venenatis quis sapien faucibus tincidunt. Donec blandit, est vitae posuere fermentum, augue urna convallis tortor, vitae maximus massa augue eget odio. Vestibulum lacinia ornare ex, a cursus nulla venenatis quis.</p>
    </div>
    <div class="text-box" id="about">
      <h1>Lorem Ipsum 2</h1>
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce quam eros, pellentesque ac urna sed, cursus congue purus. Etiam vel interdum massa. Suspendisse potenti. Phasellus venenatis quis sapien faucibus tincidunt. Donec blandit, est vitae posuere fermentum, augue urna convallis tortor, vitae maximus massa augue eget odio. Vestibulum lacinia ornare ex, a cursus nulla venenatis quis.</p>
    </div>
    <div class="text-box" id="contact">
      <h1>Lorem Ipsum 3</h1>
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce quam eros, pellentesque ac urna sed, cursus congue purus. Etiam vel interdum massa. Suspendisse potenti. Phasellus venenatis quis sapien faucibus tincidunt. Donec blandit, est vitae posuere fermentum, augue urna convallis tortor, vitae maximus massa augue eget odio. Vestibulum lacinia ornare ex, a cursus nulla venenatis quis.</p>
    </div>
    <div class="text-box" id="shop">
      <h1>Lorem Ipsum 4</h1>
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce quam eros, pellentesque ac urna sed, cursus congue purus. Etiam vel interdum massa. Suspendisse potenti. Phasellus venenatis quis sapien faucibus tincidunt. Donec blandit, est vitae posuere fermentum, augue urna convallis tortor, vitae maximus massa augue eget odio. Vestibulum lacinia ornare ex, a cursus nulla venenatis quis.</p>
    </div>
  </div>
  <div class="social-container">
    <a class="social-button" id="telegram" href="" target="_blank"><i class="fa-brands fa-telegram"></i></a>
    <a class="social-button" id="signal" href="" target="_blank"><i class="fa-brands fa-signal-messenger"></i></a>
    <a class="social-button" id="instagram" href="" target="_blank"><i class="fa-brands fa-instagram"></i></a>
    <a class="social-button" id="x-twitter" href="" target="_blank"><i class="fa-brands fa-x-twitter"></i></a>
  </div>
</div>