-
Problem with Nav responsive
Please I need help fixing the responsiveness of this nav.
This is the code I wrote:
<!DOCTYPE html>
<html lang="en">
<head>
<link href="css/bootstrap.css" type="text/css" rel="stylesheet">
<link href="css/style.css" type="text/css" rel="stylesheet">
<meta charset="UTF-8">
<title>Learning to use Bootstraps</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
</head>
<body>
<div class="wrapper">
<header>
<banner style="text-align:center;"> <img src="img/banner.jpg" class="img-responsive" style="width:100%; height:50%;"></banner>
</header>
<nav class="navbar navbar-default navbar-inverse">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#navbar-collapse-ringer">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>
</div>
<div class="navbar-collapse collapse">
<ul class="nav navbar-nav" id="navbar-collapse-ringer">
<li class="active"><a href="index.html">Home</a></li>
<li class="dropdown">
<a href="#" class="dropdown-toggle " data-toggle="dropdown" data-hover="dropdown" data-delay="0" data-close-others="false">Spirituality <b class=" icon-angle-down"></b></a>
<ul class="dropdown-menu">
<li><a href=" ">Life in Community</a></li>
<li><a href=" ">Priests of the Covenant of Love</a></li>
<li><a href=" ">The Image of Sion</a></li>
</ul>
</li>
<li class="dropdown">
<a href="#" class="dropdown-toggle " data-toggle="dropdown" data-hover="dropdown" data-delay="0" data-close-others="false">What we do <b class=" icon-angle-down"></b></a>
<ul class="dropdown-menu">
<li><a href=" ">Schoenstatt</a></li>
<li><a href=" ">Schools</a></li>
<li><a href=" ">Social Projects</a></li>
<li><a href=" ">Parish works</a></li>
</ul>
</li>
<li class="dropdown">
<a href="#" class="dropdown-toggle " data-toggle="dropdown" data-hover="dropdown" data-delay="0" data-close-others="false">About Us <b class=" icon-angle-down"></b></a>
<ul class="dropdown-menu">
<li><a href=" ">History</a></li>
<li><a href=" ">Mission</a></li>
<li><a href=" ">Organization</a></li>
<li><a href=" ">The Founder</a></li>
</ul>
</li>
<li class="dropdown">
<a href="#" class="dropdown-toggle " data-toggle="dropdown" data-hover="dropdown" data-delay="0" data-close-others="false">Get Involved <b class=" icon-angle-down"></b></a>
<ul class="dropdown-menu">
<li><a href=" ">Vocational Discernment</a></li>
<li><a href=" ">Our Formation</a></li>
<li><a href=" ">Apply</a></li>
</ul>
</li>
<!--<li><a href="portfolio.html">Portfolio</a></li>
<li><a href="blog.html">Blog</a></li>
<li><a href="contact.html">Contact</a></li>-->
</ul>
<!-- end header -->
</div>
</nav>
<script src="js/bootstrap.js"></script>
<script src="js/jquery.js"></script>
</div>
</body>
</html>
The nav bar is working and I am okay with it except that when viewed on smaller screen, the button when clicked doesnt display the menu.
-
PS: The dropdown is not also working please.
Help will be appreciated
Tags for this Thread
Posting Permissions
- You may not post new threads
- You may not post replies
- You may not post attachments
- You may not edit your posts
-
Forum Rules
Reply With Quote