Wednesday, March 16, 2022

[SOLVED] JS/CSS - Function openNav() not working on Homepage(Only)

Issue

For some reason, this element (Menu Element) is unclickable on the website (XXXXXXXXXXXXXXXXX.com) but ONLY on the homepage.

The element works perfectly fine on other pages and in editors.

I can't put the finger on what causes it to break on the homepage.

I'm inspecting with Chrome's debugger, but I still don't find the issue, even less how to fix it.

Q: What could be possible causes of this issue and what do you think would be a good starting point to troubleshoot?

Website: 

www.somewhatmystical.com

Menu Element: https://www.w3schools.com/code/tryit.asp?filename=GD13CSPL7EEC

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <style>
            body {
                font-family: 'Lato', sans-serif;
            }

            * {
                box-sizing: border-box;
            }

            .column1 {
                color: white;
                float: left;
                width: 50%;
                padding-left: 200px;
                padding-right: 100px;
                padding-top: 200px;
                text-align: right;
                font-size: 50px;
                height: 575px;
                border-right: 1px solid gray;
                background-color: black;
            }

            .column2 {
                color: white;
                float: right;
                width: 50%;
                text-align: left;
                padding: 10px;
                font-size: 22px;
                padding-left: 100px;
                padding-top: 150px;
                text-decoration: none;
                height: 575px;
                background-color: black;
            }

            a:link {
                color: white;
            }

            a:hover {
                color: #C0A539;
            }

            .row:after {
                content: "";
                display: table;
                clear: both;
            }

            .overlay {
                height: 0px;
                width: 100%;
                position: fixed;
                top: 0;
                z-index: 1;
                top: 0;
                left: 0;
                bottom: 0;
                background-color: rgb(0,0,0);
                background-color: rgba(0,0,0);
                overflow-x: hidden;
                transition: 0.5s;
            }

            .overlay-content {
                position: relative;
                top: 25%;
                width: 100%;
                text-align: center;
                margin-top: 30px;
                color: #FFFFFF;
            }

            .overlay a {
                padding: 8px;
                text-decoration: none;
                color: #FFFFFF;
                display: block;
                transition: 0.3s;
            }

            .overlay a:hover, .overlay a:focus {
                color: #C0A539;
            }

            .overlay .closebtn {
                position: absolute;
                top: 20px;
                right: 45px;
                font-size: 60px;
            }

            @media screen and (max-height: 450px) {
                .overlay a {
                    font-size: 20px
                }

                .overlay .closebtn {
                    font-size: 40px;
                    top: 15px;
                    right: 35px;
                }
            }
        </style>
    </head>
    <body>
        <div id="myNav" class="overlay">
            <a href="javascript:void(0)" class="closebtn" onclick="closeNav()">&times;</a>
            <div class="overlay-content">
                <div class="row">
                    <div class="column1">
                        <p>welcome to our online art journey. You can read our thoughts or you can simply write to us</p><br><br>
                    </div>
                    <div class="column2">
                        <a href="#" style="text-decoration: none;">blog</a>
                        <a href="#" style="text-decoration: none;">quotes</a>
                        <a href="#" style="text-decoration: none;">shop</a>
                        <a href="#" style="text-decoration: none;">about</a>
                        <a href="#" style="text-decoration: none;">contact</a>
                        <br><br><br><br><br>
                    </div>
                </div>
            </div>
        </div>

<span style="font-size:50px;cursor:pointer;color:rgba(192,192,192,0);text-align:center;display:block;margin-top: -65px" onclick="openNav()">MENU</span>

        <script>
            function openNav() {
                document.getElementById("myNav").style.height = "100%";
            }

            function closeNav() {
                document.getElementById("myNav").style.height = "0";
            }
        </script>
    </body>
</html>

Solution

The issue was:

Another element was using an ".overlay" class, which conflicted with the menu element ".overlay" class.

I simply renamed the different class to ".overlay1"

  • Credits to JBis for pointing it out.


Answered By - user11867329
Answer Checked By - Robin (WPSolving Admin)
at