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 25, 2016

    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.


    Thanks. That's odd the links were okay.

    Happy Holidays

    Carolyn

    Sent from my iPhone

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