Menu icon Foundation
Top Bar Drop Down Small Screen Issue

Greetings,

I am working on a site that uses the top bar navigation with drop down. The menu works great except on a small screen. It allows you to open the menu and click on each item without a drop down, but the ones with a drop down aren't clickable at all (Companies and History). Not really sure what is causing the issue. I don't need them to be drop down on a small screen, just to at least be able to click into that section of the website. Here is the link to the test site. Any help would be appreciated.

http://depewfire.org/test_site/

Thanks!

Brian

          <section class="top-bar-section" data-topbar>
            <!-- right Nav Section -->
            <ul class="right">
              <!-- <li class="logo"><img src="img/logo.png" width="125px" /></li> -->
              <li class="active"><a href="index.html">News</a></li>
              <li><a href="recruitment.html">Recruitment</a></li>
              <li><a href="fire_prevention.html">Fire Prevention</a></li>
              <li><a href="photos.html">Photos</a></li>
              <li class="has-dropdown">
                <a href="companies.html">Companies</a>
                  <ul class="dropdown">
                    <li><a href="depew.html">Depew Hose Co. #1</a></li>
                    <li><a href="aetna.html">Aetna Hose Co.</a></li>
                    <li><a href="cayuga.html">Cayuga Hose Co. #3</a></li>
                    <li><a href="central.html">Central Hose Co. #4</a></a></li>
                    <li><a href="depewhandl.html">Depew H &amp; L Co. #1</a></a></li>
                    <li><a href="westend.html">West End Hose Co. #6</a></a></li>
                    <li><a href="explorerpost37.html">Explorer Post 37</a></a></li>
                    <li><a href="fire-police.html">Fire Police</a></a></li>
                  </ul>
              </li>
              <li><a href="officers.html">Officers</a></li>
              <li class="has-dropdown">
                <a href="history.html">History</a>
                  <ul class="dropdown">
                    <li><a href="appartus.html">Appartus History</a></li>
                    <li><a href="fire_house.html">Fire House History</a></li>
                    <li><a href="firemens_park.html">Firemen's Park History</a></li>
                    <li><a href="past_chiefs.html">Past Chiefs</a></a></li>
                  </ul>
              </li>
              <li><a href="contact.html">Contact</a></li>
            </ul>


          </section>

            

         

drop downmenutop barsmall screen issues

Greetings,

I am working on a site that uses the top bar navigation with drop down. The menu works great except on a small screen. It allows you to open the menu and click on each item without a drop down, but the ones with a drop down aren't clickable at all (Companies and History). Not really sure what is causing the issue. I don't need them to be drop down on a small screen, just to at least be able to click into that section of the website. Here is the link to the test site. Any help would be appreciated.

http://depewfire.org/test_site/

Thanks!

Brian

          <section class="top-bar-section" data-topbar>
            <!-- right Nav Section -->
            <ul class="right">
              <!-- <li class="logo"><img src="img/logo.png" width="125px" /></li> -->
              <li class="active"><a href="index.html">News</a></li>
              <li><a href="recruitment.html">Recruitment</a></li>
              <li><a href="fire_prevention.html">Fire Prevention</a></li>
              <li><a href="photos.html">Photos</a></li>
              <li class="has-dropdown">
                <a href="companies.html">Companies</a>
                  <ul class="dropdown">
                    <li><a href="depew.html">Depew Hose Co. #1</a></li>
                    <li><a href="aetna.html">Aetna Hose Co.</a></li>
                    <li><a href="cayuga.html">Cayuga Hose Co. #3</a></li>
                    <li><a href="central.html">Central Hose Co. #4</a></a></li>
                    <li><a href="depewhandl.html">Depew H &amp; L Co. #1</a></a></li>
                    <li><a href="westend.html">West End Hose Co. #6</a></a></li>
                    <li><a href="explorerpost37.html">Explorer Post 37</a></a></li>
                    <li><a href="fire-police.html">Fire Police</a></a></li>
                  </ul>
              </li>
              <li><a href="officers.html">Officers</a></li>
              <li class="has-dropdown">
                <a href="history.html">History</a>
                  <ul class="dropdown">
                    <li><a href="appartus.html">Appartus History</a></li>
                    <li><a href="fire_house.html">Fire House History</a></li>
                    <li><a href="firemens_park.html">Firemen's Park History</a></li>
                    <li><a href="past_chiefs.html">Past Chiefs</a></a></li>
                  </ul>
              </li>
              <li><a href="contact.html">Contact</a></li>
            </ul>


          </section>

            

         

This post has been closed. No new replies can be added.

Brian Platter about 5 years ago

Hey Steve,

That worked great. Thanks so much!

Brian

Steve Trask about 5 years ago

Hi Brian,

I think you are missing the top part of the topbar element as the data-topbar goes on the nav element, please see the below code:

http://codepen.io/gosupernova/pen/ewoGC?editors=100

Hope this helps

Steve