7 Replies Latest reply on Dec 24, 2016 8:38 PM by carolyn@10541

    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.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 -->

        • 1. Re: Dropdown Navbar in Boostrap
          BenPleysier Adobe Community Professional & MVP

          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.

          • 2. Re: Dropdown Navbar in Boostrap
            carolyn@10541 Level 1

            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.

            • 3. Re: Dropdown Navbar in Boostrap
              carolyn@10541 Level 1

              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.

              • 4. Re: Dropdown Navbar in Boostrap
                BenPleysier Adobe Community Professional & MVP

                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.

                • 5. Re: Dropdown Navbar in Boostrap
                  carolyn@10541 Level 1

                  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

                  • 6. Re: Dropdown Navbar in Boostrap
                    osgood_ Level 8

                    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.

                    • 7. Re: Dropdown Navbar in Boostrap
                      carolyn@10541 Level 1

                      Thanks. That's odd the links were okay.

                       

                      Happy Holidays

                       

                      Carolyn

                       

                      Sent from my iPhone