Results 1 to 2 of 2

Thread: Problem with Nav responsive

  1. #1
    Junior Member
    Join Date
    Feb 2017
    Posts
    4

    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.

  2. #2
    Junior Member
    Join Date
    Feb 2017
    Posts
    4
    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
  •