Home > Mobile >  Menu bar in navbar doesn't work on any html page except for index.html
Menu bar in navbar doesn't work on any html page except for index.html

Time:07-20

For some reason my list popup menu works on my index page but not on any other html page when the code for the nav bar is the exact same in both htmls. Here is my html

<!-- Navigation section
================================================== -->
<div >
   <nav >

      <div >
        <div >
         <div >
            <div >

              <div >
                 <a href="home.html">
                <img src="images/brandl.png" ></a>
            </a>
              </div>

              <div >
                <div >

                  <div >
                    <i ></i>
                  </div>

                  <div >
                    <i ></i>
                    <div >
                      <ul id="nav-menu">
                        <li><a href="index.html">Home</a></li>
                        <li><a href="about.html">About</a></li>
                        <li><a href="blog.html">Blog</a></li>
                        <li><a href="contact.html">Contact</a></li>
                      </ul>
                    </div>
                  </div>
</div>
                </div>
              </div>

            </div>
         </div>
      </div>

   </nav>
</div>
</div>

and my css

.list-menu {
  position: fixed;
  visibility: hidden;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  z-index: 9999999;
  background: rgba(0, 0, 0, 0.9);
  transition: all 0.6s ease;
  -webkit-transition: all 0.6s ease;
  -moz-transition: all 0.6s ease;
  opacity: 0;
  z-index: -1;
}

.list-menu.reveal-modal {
  opacity: 1;
  z-index: 999999;
  visibility: visible;
}

.list-menu .ion-close-round {
  font-size: 31px;
  position: absolute;
  top: 32px;
  right: 32px;
  color: #fff;
  cursor: pointer;
}

Here is what the popup is supposed to look like. https://imgur.com/a/pyq9zis

I've been trying to fix for awhile but can't seem to find a fix.

CodePudding user response:

I couldn't add a comment for a suggestion, but have you checked if all the HTML files have the same CSS as the stylesheet or if you made separate CSS files if they have the code in each of the CSS files.

CodePudding user response:

Sorry for the late reply, but Fixed. Github Link So the reason why it didn't work was because the link you gave for the CSS was css/TheCssFile.css and the JavaScript was js/TheJSFile.js, but your file were in the root folder. Even though I can't fully check if the website is functional because of no images, it looks like the website works now.

  • Related