Skip to main content
carolyn@10541
carolyn@10541
Known Participant
December 19, 2016
Answered

Dropdown Navbar in Boostrap

  • December 19, 2016
  • 1 reply
  • 1091 views

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.com&ctz=America/New_York" 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 -->

This topic has been closed for replies.
Correct answer BenPleysier

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.

1 reply

BenPleysier
Community Expert
BenPleysierCommunity ExpertCorrect answer
Community Expert
December 20, 2016

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.

Wappler is the DMXzone-made Dreamweaver replacement and includes the best of their powerful extensions, as well as much more!
    carolyn@10541
    carolyn@10541Author
    Known Participant
    December 22, 2016

    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
    carolyn@10541Author
    Known Participant
    December 24, 2016

    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.


    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

    Terms & ConditionsAccessibility statement
    Using the community Terms of use Privacy Cookie preferences Do not sell or share my personal information ad choicesAdChoices