Google Translate button, disable some links-CodePudding

im doing a website for videogames news and updates.I have to add a translation option, so i decided to add google translate button, but it disables the links in the menu on the right side.Please help!

HTML:


<!DOCTYPE html>
<head>
    <title> GameDog | Video games info </title>
    
    <meta charset = "UTF-8">
    <link rel="stylesheet" type = "text/css" href="style.css">
    <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=Ubuntu&display=swap" rel="stylesheet"> 
    
</head>

<body>
    <section >
        <nav>
            <div >
                <img src = "gamedoglogo.png">
                <p> <b> GameDog </b> </p>
            </div>

            <div>
                <ul>
                    <li>
                        <div ></div>
                    </li>
                    <li id="aboutme"><a href = "aboutme.html">About me</a></li>
                    <li id="news">
                        <a href = "news.html">News about ↓</a>
                        <ul>
                            <li> <a href = "fortnite.html">Fortnite</a></li>
                            <li> <a href = "rl.html">Rocket League</a></li>
                            <li> <a href = "lol.html">League of Legends</a></li>
                            <li> <a href = "cs.html">CS:GO</a></li>  
                        </ul>
                    </li>
                    <li id="main"><a href = "main.html">Home</a></li>
                </ul>
            </div>

        </nav>

        <h1 > Home Page </h1>

        <div class = "card-info">
            <h3> Hey Gamers, </h3>
            <br>
            <h4> welcome to the site. Here you can find the latest news about your favourite games. We provide information about the current updates, changes and improvements. Here, in the site, you can also find the patch notes for the last update of your favourite games. Explore by clicking the button below or the News section above.</h4>
        </div>

        <div class = "button">
            <a href = "news.html"> Explore </a>
        </div>

        <div >
            <ul>
                <li><a href="https://www.facebook.com/LachezarValev"> <img src="facebook white.png", id="facebook-main"></a></li>
                <li><a href="https://www.instagram.com/_lachovalev_/"> <img src="Black-icon-Instagram-logo-transparent-PNG.png", id="instagram-main"></a></li>
                <li><a href="https://twitter.com/LachezarValev"> <img src="Black-icon-Twitter-logo-transparent-PNG.png", id="twitter-main"></a></li>
            </ul>
        </div>

        <div >
            <div id="google_translate_element"></div>
                <span>
                    <script type="text/javascript">
                    function googleTranslateElementInit() {
                        new google.translate.TranslateElement({
                        pageLanguage: 'en', includedLanguages: 'de,it,fr,ru,tr,bg', autoDisplay: false,
                        layout: google.translate.TranslateElement.InlineLayout.SIMPLE
                        }, 'google_translate_element');
                    }
                    </script>
                    <script src="https://translate.google.com/translate_a/element.js?cb=googleTranslateElementInit"></script>
                </span>
        </div>
        
    </section>

    
    
    <div >
        <ul>
            <li> <a href="main.html"> Home </a></li>
            <li> <a href="news.html"> News </a></li>
            <li> <a href="aboutme.html"> About me </a></li>
        </ul>
        
        <div >
            <ul>
                <li><a href="https://www.facebook.com/LachezarValev"> <img src="toppng.com-facebook-black-white-icon-facebook-face-book-png-facebook-icon-for-footer-473x473.png", id="facebook-menu"></a></li>
                <li><a href="https://www.instagram.com/_lachovalev_/"> <img src="Black-icon-Instagram-logo-transparent-PNG.png", id = "instagram-menu"></a></li>
                <li><a href="https://twitter.com/LachezarValev"> <img src="Black-icon-Twitter-logo-transparent-PNG.png", id="twitter-menu"></a></li>
            </ul>
        </div>
            
    </div>
        
    <script>
        const menuToggle = document.querySelector('.toggle')
        const page = document.querySelector('.page')
        
        menuToggle.addEventListener('click', function() {
                                    menuToggle.classList.toggle('active')
                                    page.classList.toggle('active')
                                    })
    </script>
    
    <script>
        window.addEventListener("scroll", function(){
            var navbar = document.querySelector("nav");
            var menu = document.querySelector(".menu");
            navbar.classList.toggle("sticky", window.scrollY > 0);
            menu.classList.toggle("sticky", window.scrollY > 0);
        })
        
    </script>
    
</body>

CSS:


.menu{
    position:absolute;
    background-color:#ffd700;
    top:0;
    right:0;
    width:15.62vw;
    min-height:100vh;
    display:flex;
    justify-content: center;
    align-items:center;
    z-index:-5;
}

.menu.sticky{
    position:fixed;
}

.menu ul{
    position:relative;
    list-style:none;
}

.menu ul li{
    padding:1.04vh 1.04vw;
}

.menu ul li a{
    text-decoration: none;
    color:black;
    font-size:4.5ch;
}

.menu ul li a:hover{
    color:dimgray;
}

.translate-1{
    position:absolute;
    left:3vw;
    top:16vh;
    display:flex;
    justify-content: center;
    align-items:center;
}

.translate-2{
    position:absolute;
    left:3vw;
    top:76vh;
    display:flex;
    justify-content: center;
    align-items:center;
}

Here are some photos: this is the page with the translate button this is the menu on the right, when opened

The links in the menu, should become gray when u hover on them, but due to the google translate button, they don't. When i remove the google translate button, it works, so the problem is there.

JS for the menu is included in the html And also, im really sorry for my bad formatting, im new to this :(

CodePudding user response：

Your menu has a negative z-index value, so it's just falling behind everything. Make it a positive value or remove it altogether and you're set. If you have a specific reason for using the z-index on the menu, then you'll need to add it to the other elements as well so they're layering correctly and the menu items are accessible.

SO's snippet doesn't seem to like the Google translate script so here's a fiddle that shows that it still works with the z-index property modified:

https://jsfiddle.net/astombaugh/hwo73b64/8/

.menu {
  position: absolute;
  background-color: #ffd700;
  top: 0;
  right: 0;
  width: 15.62vw;
  min-height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 1;
}

.menu.sticky {
  position: fixed;
}

.menu ul {
  position: relative;
  list-style: none;
}

.menu ul li {
  padding: 1.04vh 1.04vw;
}

.menu ul li a {
  text-decoration: none;
  color: black;
  font-size: 4.5ch;
}

.menu ul li a:hover {
  color: dimgray;
}

.translate-1 {
  position: absolute;
  left: 3vw;
  top: 16vh;
  display: flex;
  justify-content: center;
  align-items: center;
}

.translate-2 {
  position: absolute;
  left: 3vw;
  top: 76vh;
  display: flex;
  justify-content: center;
  align-items: center;
}

<!DOCTYPE html>

<head>
  <title> GameDog | Video games info </title>

  <meta charset="UTF-8">
  <link rel="stylesheet" type="text/css" href="style.css">
  <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=Ubuntu&display=swap" rel="stylesheet">

</head>

<body>
  <section >
    <nav>
      <div >
        <img src="gamedoglogo.png">
        <p> <b> GameDog </b> </p>
      </div>

      <div>
        <ul>
          <li>
            <div ></div>
          </li>
          <li id="aboutme"><a href="aboutme.html">About me</a></li>
          <li id="news">
            <a href="news.html">News about ↓</a>
            <ul>
              <li> <a href="fortnite.html">Fortnite</a></li>
              <li> <a href="rl.html">Rocket League</a></li>
              <li> <a href="lol.html">League of Legends</a></li>
              <li> <a href="cs.html">CS:GO</a></li>
            </ul>
          </li>
          <li id="main"><a href="main.html">Home</a></li>
        </ul>
      </div>

    </nav>

    <h1 > Home Page </h1>

    <div >
      <h3> Hey Gamers, </h3>
      <br>
      <h4> welcome to the site. Here you can find the latest news about your favourite games. We provide information about the current updates, changes and improvements. Here, in the site, you can also find the patch notes for the last update of your favourite
        games. Explore by clicking the button below or the News section above.</h4>
    </div>

    <div >
      <a href="news.html"> Explore </a>
    </div>

    <div >
      <ul>
        <li>
          <a href="https://www.facebook.com/LachezarValev"> <img src="facebook white.png" , id="facebook-main"></a>
        </li>
        <li>
          <a href="https://www.instagram.com/_lachovalev_/"> <img src="Black-icon-Instagram-logo-transparent-PNG.png" , id="instagram-main"></a>
        </li>
        <li>
          <a href="https://twitter.com/LachezarValev"> <img src="Black-icon-Twitter-logo-transparent-PNG.png" , id="twitter-main"></a>
        </li>
      </ul>
    </div>

    <div >
      <div id="google_translate_element"></div>
      <span>
                    <script type="text/javascript">
                    function googleTranslateElementInit() {
                        new google.translate.TranslateElement({
                        pageLanguage: 'en', includedLanguages: 'de,it,fr,ru,tr,bg', autoDisplay: false,
                        layout: google.translate.TranslateElement.InlineLayout.SIMPLE
                        }, 'google_translate_element');
                    }
                    </script>
                    <script src="https://translate.google.com/translate_a/element.js?cb=googleTranslateElementInit"></script>
                </span>
    </div>

  </section>



  <div >
    <ul>
      <li> <a href="main.html"> Home </a></li>
      <li> <a href="news.html"> News </a></li>
      <li> <a href="aboutme.html"> About me </a></li>
    </ul>

    <div >
      <ul>
        <li>
          <a href="https://www.facebook.com/LachezarValev"> <img src="toppng.com-facebook-black-white-icon-facebook-face-book-png-facebook-icon-for-footer-473x473.png" , id="facebook-menu"></a>
        </li>
        <li>
          <a href="https://www.instagram.com/_lachovalev_/"> <img src="Black-icon-Instagram-logo-transparent-PNG.png" , id="instagram-menu"></a>
        </li>
        <li>
          <a href="https://twitter.com/LachezarValev"> <img src="Black-icon-Twitter-logo-transparent-PNG.png" , id="twitter-menu"></a>
        </li>
      </ul>
    </div>

  </div>

  <script>
    const menuToggle = document.querySelector('.toggle')
    const page = document.querySelector('.page')

    menuToggle.addEventListener('click', function() {
      menuToggle.classList.toggle('active')
      page.classList.toggle('active')
    })
  </script>

  <script>
    window.addEventListener("scroll", function() {
      var navbar = document.querySelector("nav");
      var menu = document.querySelector(".menu");
      navbar.classList.toggle("sticky", window.scrollY > 0);
      menu.classList.toggle("sticky", window.scrollY > 0);
    })
  </script>

</body>