DropDown hiding

      <nav class="navbar navbar-inverse navbar-fixed-top">
        <div class="container-fluid">
          <div class="navbar-header">
            <a class="navbar-brand" href="#top">Heading</a>
          </div>
          <ul class="nav navbar-nav">
            <li class="active"><a href="#top">Home</a></li>
            <li><a href="#page1">Page 1</a></li>
            <li><a href="#page2">Page 2</a></li>
            <li class = "dropdown">
              <a href="#page3" class = "dropdown-toggle" data-toggle = "dropdown">3<b class = "caret"></b></a>
              <ul class = "dropdown-menu">
            <li><a href="#page3">Page 3</a></li>
            <li><a href="#page4">Page 4</a></li>
              </ul>              
            </li>
          </ul>
          <ul class="nav navbar-nav navbar-right">
            <li><a id='toggle'><span class="glyphicon glyphicon-heart"></span> things</a></li>
            <li><a href="http://codepen.io/TurtleWolf/" target='blank'><span class="glyphicon glyphicon-user"></span>TurtleWolf</a></li>
          </ul>
        </div>
      </nav>

I’m trying to add a drop down menu to my navbar… three different sites all suggest similiar code, and inspecting the HTML would suggest they are being created… so why are they not being shown… I can’t think of anything in the CSS that would alter this behavior, it should be picking up Boot Strap from Code Pen…

CSS… should be irrelevant, but just in case…

 .block{
    background-color:rgb(231, 166, 26);
  	background-color:rgba(231, 166, 26, .90);
    color:purple;
    padding: 35px;
    padding-bottom:.25%;
    width:75%;
    margin-right:auto;
    margin-left:auto;
    border-radius:15px;
    font-size:1.5em;

text-shadow: 1px 1px 1px rgba(0, 0, 0, 1);   
-webkit-box-shadow: inset 34px 28px 40px -19px rgba(0,0,0,0.89);
-moz-box-shadow: inset 34px 28px 40px -19px rgba(0,0,0,0.89);
box-shadow: inset 34px 28px 40px -19px rgba(0,0,0,0.89);
    border:1px solid black
}

.spacer{  
  padding: 5%;
}
.subSpacer{  
  padding: 2%;
}

body{ 
  background:no-repeat center center fixed;
   -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
 }
p{ 
  text-align: justify;
}

.followTag{ 
    min-height:10px;
    height: 21px;
}

http://codepen.io/TurtleWolf/pen/YZqNpG

You are using JS to add a class of active to the list item when clicked but then you don’t do anything to actually show the menu.

You would need css like this:

.navbar-nav>li.dropdown.active>ul.dropdown-menu{display:block}

You also need to adjust the js to remove the active class if the top level is clicked again otherwise it just stay there until you go to another page.

1 Like

Hi,

I just realised you are missing the bootstrap js.

<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

If you add that link then the menu will work without your extra js or extra css.:slight_smile:

3 Likes

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.