Dropdown Navbar in Boostrap

[carolyn@10541]

Hi,

Below is the code for my dropdown navbar and I can see all the submenus, however, they are not clickable and go to that page. I would appreciate help.

Thank you.

Carolyn

<div class="container-fluid">

          <ul class="nav navbar-nav">

         <li class="dropdown"><a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false">Home<span class="caret"></span></a>

              <ul class="dropdown-menu" role="menu">

                <li><a href="historyoftempleisrael.html">History of Temple Israel</a></li>

         </ul>

            </li>

            <li class="active"><li class="dropdown"><a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false">About Us<span class="caret"></span></a>

              <ul class="dropdown-menu" role="menu">

                <li><a href="thetemple.html">The Temple</a></li>

                <li><a href="rabbi.html">Rabbi & Staff</a></li>

                <li class="active"><a href="hebrewschoolprincipal.html">Hebrew School Principal</a></li>

              </ul>

            </li>

              <li class="dropdown"><a href="membership.html" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false">Membership<span class="caret"></span></a>

              <ul class="dropdown-menu" role="menu">

                <li><a href="membership@TIOSM.html">Membership @ TIOSM</a></li>

                <li><a href="executiveboard.html">Executive Board</a></li>

              </ul>

            </li>

               <li class="dropdown"><a href="community.html" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false">Community<span class="caret"></span></a>

              <ul class="dropdown-menu" role="menu">

                <li><a href="sisterhood.html">Sisterhood</a></li>

                <li><a href="mensclub.html">Men's Club</a></li>

                <li><a href="#tikkunolam">Tikkun Olam</a></li>

              </ul>

            </li>

               <li class="dropdown"><a href="education" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false">Education<span class="caret"></span></a>

              <ul class="dropdown-menu" role="menu">

                <li><a href="sundayschool.html">Sunday School</a></li>

                <li class="active"><a href="hebrewschool.html">Hebrew School</a></li>

                <li><a href="barandbatmitzvah.html">Bar/Bat Mitzvah</a></li>

                <li><a href="adulteducation.html">Adult Education</a></li>

              </ul>

            </li>

               <li class="dropdown"><a href="holidaysandfestivals.com" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false">Holidays & Festivals<span class="caret"></span></a>

              <ul class="dropdown-menu" role="menu">

                <li><a href="dailyminyan.html">Daily Minyan</a></li>

                <li><a href="shabbat.html">Shabbat</a></li>

                <li><a href="highholidays.html">High Holidays</a></li>

                <li><a href="sukkot.html">Sukkot</a></li>

                <li><a href="simchattorah.html">Simchat Torah</a></li>

                <li><a href="chanukkah.html">Chanukkah</a></li>

                <li><a href="purim.html">Purim</a></li>

                <li><a href="passover.html">Passover</a></li>

              </ul>

            </li>

               <li class="dropdown"><a href="fundraising.html" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false">Fundraising<span class="caret"></span></a>

              <ul class="dropdown-menu" role="menu">

                <li><a href="fundraising.html">Fundraisers for Temple Israel of South Merrick</a></li>

              </ul>

            </li>

            <li class="dropdown"><a href="upcomingevents.html" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false">Upcoming Events<span class="caret"></span></a>

              <ul class="dropdown-menu" role="menu">

                <li><a href="upcomingevents.html">Upcoming Events for Temple Israel of South Merrick</a></li>

              </ul>

            </li>

            <li class="dropdown"><a href="calendar.html" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false">Calendar<span class="caret"></span></a>

              <ul class="dropdown-menu" role="menu">

<iframe src="https://calendar.google.com/calendar/embed?src=2040oqg3rl1llujf6aaurm68uk%40group.calendar.google.co..." style="border: 0" width="800" height="600" frameborder="0" scrolling="no"></iframe>

              </ul>

            </li>

            <li class="dropdown"><a href="photogallery.html" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false">Photo Gallery<span class="caret"></span></a>

              <ul class="dropdown-menu" role="menu">

               <li><a href="templeisraelofsouthmerrick50anniversarycelebration.html">Temple Israel of South Merrick 50th Anniversary Celebration</a></li>

               <li><a href="melpolay2016purimcarnival.html">Mel Polay 2016 Purim Carnival</a></li>

               <li><a href="2016movingupday.html">Temple Israel of South Merrick 2016 Moving Up Day</a></li>

              </ul>

            </li>

             <li class="dropdown">

            <li class="dropdown"><a href="contactus.html" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false">Contact Us<span class="caret"></span></a></li>

              <ul class="dropdown-menu" role="menu">           

</ul></li></ul></div>

       <form class="navbar-form navbar-left" role="search">

        <div class="form-group">

          <input type="text" class="form-control" placeholder="Search">

        </div>

        <button type="submit" class="btn btn-default">Submit</button>

      </form>

        <!-- /.navbar-collapse -->

        <br /><br />

      <!-- /.container-fluid -->

[BenPleysier · Accepted solution]

There are a couple of serious errors in the code.

1. iframe is not allowed to be a child of the ul element

<ul class="dropdown-menu" role="menu">

     <iframe src="https://calendar.google.com/calendar/embed?src=2040oqg3rl1llujf6aaurm68uk%40group.calendar .google.com&ctz=America/New_York" style="border: 0" width="800" height="600" frameborder="0" scrolling="no"></iframe>

</ul>

2. UL is not allowed to be a child of the ul element

<ul class="dropdown-menu" role="menu">          

</ul></li></ul></div>

3. in the above code, there is a stray li end tag.

When the above has been fixed, there should not be a problem, unless there are irregularities in the code that you have not shown.

[carolyn@10541]

Actually Ben, the error you said is in #1 is not a problem as the calendar for that dropdown menu does work. In fact, the calendar is a dropdown that can be seen from all the other pages. The contact page is the only page that is only accessed from the contact page.

The issue with my dropdown menus is that they work, however, when I try to go from say, Education - Sunday School to About Us - The Temple the links don't always work. I hope that clears up the question

Thank you.

[carolyn@10541]

In addition to the above comment, I can go from link to link, however, when I try to access the "photogallery" and the links below, I get a 404 error.

Thanks again.

[BenPleysier]

The answer is in the code. From the code that we have seen so far, the menu bar should work, but there seems to be other issues involved here.

The best way forward is to supply a link to an online site. That way we can see the file and folder structure as well as see the problem in situ.

[carolyn@10541]

Hi Ben,

the link for the above website is

www.cjdesignandconsulting.com/tiosm/home.html

Happy Holidays to everyone and your families. Wishing you a prosperous 2017!

Carolyn

[osgood_]

carolyn@10541 wrote:

Hi Ben,

the link for the above website is

www.cjdesignandconsulting.com/tiosm/home.html

Happy Holidays to everyone and your families. Wishing you a prosperous 2017!

Carolyn

I would go through and check all of your links in the navigation - they are all over the place. For instance one of the links has a .com extension:

holidaysandfestivals.com

When I assume its meant to be:

holidaysandfestivals.html

IF you DO want to go to a location outside of your website you MUST include the full url:

http://www.holidaysandfestivals.com

Under the fundraising.html page when you click on the 'Community' nav tab there is a stray < above the Sisterhood link.

Temple Israel of South Merrick

You should only need to produce your main navigation code once, which will act as the master navigation throughout the website, and then reproduce that somehow on each of the pages by either using server side includes or a template/library item if you are not familar with server side includes. If you mess around updating and fiddling with the navigation from page to page you will end up in a mess.

[carolyn@10541]

Thanks. That's odd the links were okay.

Happy Holidays

Carolyn

Sent from my iPhone