CODEWITHSUNDEEP
javascriptcssflexboxcss-position
Giacomo Petralia
Giacomo Petralia

Reputation: 1

CSS/JS Website working perfectly fine on desktop but not working correctly on mobile

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

Upvotes: 0

Views: 70

Answers (2)

Altaf Malik
Altaf Malik

Reputation: 13

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>

Upvotes: 0

Snibesto
Snibesto

Reputation: 1

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

Upvotes: 0

Related Questions