Saturday

Google Translate button, disable some links

Issue

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 class="page">
        <nav>
            <div class="logo">
                <img src = "gamedoglogo.png">
                <p> <b> GameDog </b> </p>
            </div>

            <div>
                <ul>
                    <li>
                        <div class="toggle"></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 class="topic"> 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 class="social">
            <ul>
                <li><a href="https://www.facebook.com/LachezarValev"> <img src="facebook%20white.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 class="translate-1">
            <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 class="menu">
        <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 class="social-menu">
            <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 :(

Solution

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 class="page">
    <nav>
      <div class="logo">
        <img src="gamedoglogo.png">
        <p> <b> GameDog </b> </p>
      </div>

      <div>
        <ul>
          <li>
            <div class="toggle"></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 class="topic"> 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 class="social">
      <ul>
        <li>
          <a href="https://www.facebook.com/LachezarValev"> <img src="facebook%20white.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 class="translate-1">
      <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 class="menu">
    <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 class="social-menu">
      <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>

Answered By - AStombaugh

This Answer collected from stackoverflow and tested by AngularFix community admins, is licensed under cc by-sa 2.5 , cc by-sa 3.0 and cc by-sa 4.0

Saturday

Google Translate button, disable some links

Issue

Solution

0 comments:

Post a Comment

Popular Posts

Labels