Menu icon Foundation
topnav doesn't work on one page.

         <!-- Navigation -->
            <nav class="top-bar" data-topbar>
              <ul class="title-area">
                <!-- Title Area -->
                <li class="name">
                  <h1>
                    <a href="#">
                      Janet Barrett
                    </a>
                  </h1>
                </li>
                <li class="toggle-topbar menu-icon"><a href="#"><span>menu</span></a></li>
              </ul>
       
              <section class="top-bar-section">
                <ul class="left">
                  <li class="active"><a href="#">Home</a></li>
                  <li class="has-dropdown"><a href="#">Services</a>
                    <ul class="dropdown">
                      <li><a href="appointments.html">Private Appointments</a></li>
                      <li><a href="classes.html">Fuzzy Photons Group Study</a></li>
                    </ul> 
                  </li>
                  <li class="has-dropdown"><a href="#">About</a>
                    <ul class="dropdown">
                      <li><a href="janet-barrett.html">About Janet Barrett</a></li>
                      <li><a href="testimonials.html">Testimonials</a></li>
                      <li><a href="resources.html">Resources</a></li>
                    </ul> 
                  </li>
                  <li class="has-dropdown"><a href="#">In the Media</a>
                    <ul class="dropdown">
                      <li><a href="radio-news.html">Radio + News</a></li>
                      <li><a href="life-in-the-beyond-blog.html">Life in the Beyond Blog</a></li>
                    </ul>
                  </li>
                  <!--li><a href="shop.html">Shop</a></li-->
                </ul>
       
                <!--ul class="right">
                  <li class="search">
                    <form>
                      <input type="search">
                    </form>
                  </li>
       
                  <li class="has-button">
                    <a class="small button" href="#">Search</a>
                  </li>
                </ul-->
              </section>
            </nav>
       
          <!-- End Navigation -->

            

         

topnav works fine on all pages except Home. Compare http://janetandbeyond.com/index.html# to http://janetandbeyond.com/classes.html

I don't see a difference in the topnav code on the pages.

According to W3C validator, index.html has an unclosed div on line 175. The other pages don't have the same syntax error. Could this be it? If so, how to track down. I've experimented with pairing div tags in that section without success.

All recommendations welcome.

html5CSS3topnavnavigation

         <!-- Navigation -->
            <nav class="top-bar" data-topbar>
              <ul class="title-area">
                <!-- Title Area -->
                <li class="name">
                  <h1>
                    <a href="#">
                      Janet Barrett
                    </a>
                  </h1>
                </li>
                <li class="toggle-topbar menu-icon"><a href="#"><span>menu</span></a></li>
              </ul>
       
              <section class="top-bar-section">
                <ul class="left">
                  <li class="active"><a href="#">Home</a></li>
                  <li class="has-dropdown"><a href="#">Services</a>
                    <ul class="dropdown">
                      <li><a href="appointments.html">Private Appointments</a></li>
                      <li><a href="classes.html">Fuzzy Photons Group Study</a></li>
                    </ul> 
                  </li>
                  <li class="has-dropdown"><a href="#">About</a>
                    <ul class="dropdown">
                      <li><a href="janet-barrett.html">About Janet Barrett</a></li>
                      <li><a href="testimonials.html">Testimonials</a></li>
                      <li><a href="resources.html">Resources</a></li>
                    </ul> 
                  </li>
                  <li class="has-dropdown"><a href="#">In the Media</a>
                    <ul class="dropdown">
                      <li><a href="radio-news.html">Radio + News</a></li>
                      <li><a href="life-in-the-beyond-blog.html">Life in the Beyond Blog</a></li>
                    </ul>
                  </li>
                  <!--li><a href="shop.html">Shop</a></li-->
                </ul>
       
                <!--ul class="right">
                  <li class="search">
                    <form>
                      <input type="search">
                    </form>
                  </li>
       
                  <li class="has-button">
                    <a class="small button" href="#">Search</a>
                  </li>
                </ul-->
              </section>
            </nav>
       
          <!-- End Navigation -->

            

         

topnav works fine on all pages except Home. Compare http://janetandbeyond.com/index.html# to http://janetandbeyond.com/classes.html

I don't see a difference in the topnav code on the pages.

According to W3C validator, index.html has an unclosed div on line 175. The other pages don't have the same syntax error. Could this be it? If so, how to track down. I've experimented with pairing div tags in that section without success.

All recommendations welcome.

Robben over 4 years ago

The navigation can easily get disfunctional by missing something elsewhere in the page. I've encountered it many times recently.
So you should really post (the link to) the 100% complete page, IMO, unless someone finds the culprit here.

Or better: just go through it very carefully. Reorganise the code better if you didn't as you check it.

Tools can be completely fooled with regards to the position of the mistake.

Maybe http://viewsourcechart.com could make it clear.

Rafi Benkual over 4 years ago

Works fine here, http://codepen.io/rafibomb/pen/bNmRrB so that tells me it's likely your JS paths.

Also, you dont need this unless you are individually using the plugins:
<script src="js/foundation/foundation.js"></script>

These paths look correct

   <script src="js/vendor/jquery.js"></script> 
  <script src="js/foundation.min.js"></script> 
  <script>