Click here to Skip to main content
15,892,746 members
Please Sign up or sign in to vote.
0.00/5 (No votes)
Hello Everyone.

I've a bootstrap navbar as follows:-

XML
 <nav class="navbar navbar-fixed-top navbar-inverse">
  <div class="container-fluid">
    <!-- Brand and toggle get grouped for better mobile display -->
    <div class="navbar-header">
      <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
        <span class="sr-only">Toggle navigation</span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </button>
      <a class="navbar-brand" style="font-family:Comic Sans MS" href="<%=Page.ResolveUrl( "~/default.aspx") %>">paisadaddy.com</a>
    </div>

    <!-- Collect the nav links, forms, and other content for toggling -->
    <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
      <ul class="nav navbar-nav">


                    <li><a href="<%=Page.ResolveUrl( "~/default.aspx") %>">Home</a></li>
                    <li class="dropdown">
          <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Loan</a>
                          <ul class="dropdown-menu list-group">
                                        <li class="list-group-item"><a href="<%=Page.ResolveUrl( "~/perloan.aspx") %>">Personel Loans</a></li>
                                        <li class="list-group-item"><a href="<%=Page.ResolveUrl( "~/homloan.aspx") %>">Home Loans</a></li>
                                        <li class="list-group-item"><a href="<%=Page.ResolveUrl( "~/lap.aspx") %>">Loan Against Property</a></li>
                                        <li class="list-group-item"><a href="<%=Page.ResolveUrl( "~/autloan.aspx") %>">Vehicle Loans</a></li>
                                        <li class="list-group-item"><a href="<%=Page.ResolveUrl( "~/edu.aspx") %>">Education Loans</a></li>
                                        <li class="list-group-item"><a href="<%=Page.ResolveUrl( "~/buss.aspx") %>">Business Loans</a></li>
                                        <li class="list-group-item"><a href="<%=Page.ResolveUrl( "~/expert.aspx") %>">Expert Advice</a></li>
                          </ul>
        </li>


                           <li><a href="insurace.aspx">Insurance</a></li>
                           <li><a href="insurabce.aspx">Cards</a></li>

                     <li class="dropdown">
          <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">FD / RD </a>

                                      <ul class="dropdown-menu">
                                         <li><a href="<%=Page.ResolveUrl( "~/fd.aspx") %>">Fixed Deposit</a></li>
                                        <li><a href="<%=Page.ResolveUrl( "~/rd.aspx") %>">Recurring Deposit</a></li>
                                    </ul>
                    </li>
                    <li class="dropdown">
          <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Accounts </a>

                                      <ul class="dropdown-menu">
                                          <li><a href="<%=Page.ResolveUrl( "~/saving.aspx") %>">Savings Account</a></li>
                                        <li><a href="<%=Page.ResolveUrl( "~/current.aspx") %>">Current Account</a></li>
                                        <li><a href="ppf.aspx">PPF Account</a></li>
                                        <li><a href="demat.aspx">Demat Account</a></li>
                                    </ul>
                    </li>
                                                        <li><a href="tax.aspx">Taxes</a></li>
                                                        <li><a href="bills.aspx">Bill Payments</a></li>
                                                        <li><a href="<%=Page.ResolveUrl( "~/contact.aspx") %>">Contact Us</a></li>

      </ul>

                              <form class="navbar-form navbar-left" role="search">
                                <div class="form-group pull-right" style="padding-top:8px;">
                                  <input type="text" class="form-control" placeholder="Search" style="width:200px; float:left">
                                <button type="submit" class="btn circle btn-lg" style="float:left; margin-top:2px; padding:5px; line-height:10px"><i class="fa fa-search"></i> </button>
                                </div>
                              </form>

    </div><!-- /.navbar-collapse -->
  </div><!-- /.container-fluid -->
</nav>

and included sources as:-

XML
<link href="<%=Page.ResolveUrl( "~/StyleSheet.css") %>" rel="Stylesheet" type="text/css" />
   <link href="<%=Page.ResolveUrl( "~/bootstrap-3.3.5-dist/css/bootstrap.css") %>" rel="stylesheet" type="text/css" />
   <link href="<%=Page.ResolveUrl( "~/bootstrap-3.3.5-dist/css/bootstrap.min.css") %>" rel="stylesheet" type="text/css" />
   <link href="<%=Page.ResolveUrl( "~/bootstrap-3.3.5-dist/css/bootstrap-theme.css") %>" rel="stylesheet" type="text/css" />
   <link href="<%=Page.ResolveUrl( "~/font-awesome-4.4.0/css/font-awesome.min.css") %>" rel="stylesheet" type="text/css" />
   <link href="<%=Page.ResolveUrl( "~/common.css") %>" rel="Stylesheet" type="text/css" />
   <script src="<%=Page.ResolveUrl( "~/slider/jquery.js") %>" type="text/javascript"></script>
   <script src="<%=Page.ResolveUrl( "~/slider/nslider.js") %>" type="text/javascript"></script>
   <script src="<%=Page.ResolveUrl( "~/auto_complete.js") %>" type="text/javascript"></script>


Now the problem is that for mobile view the navbar combines all links and make it a button. When I click the button it should show the menu links, but it shows nothing.

PLEASE HELP.
Posted
Updated 28-Aug-15 18:27pm
v2
Comments
Deepak Kanswal Sharma 28-Aug-15 23:09pm    
<link href="<%=Page.ResolveUrl( "~/StyleSheet.css") %>" rel="Stylesheet" type="text/css" />
<link href="<%=Page.ResolveUrl( "~/bootstrap-3.3.5-dist/css/bootstrap.css") %>" rel="stylesheet" type="text/css" />
<link href="<%=Page.ResolveUrl( "~/bootstrap-3.3.5-dist/css/bootstrap.min.css") %>" rel="stylesheet" type="text/css" />
<link href="<%=Page.ResolveUrl( "~/bootstrap-3.3.5-dist/css/bootstrap-theme.css") %>" rel="stylesheet" type="text/css" />
<link href="<%=Page.ResolveUrl( "~/font-awesome-4.4.0/css/font-awesome.min.css") %>" rel="stylesheet" type="text/css" />
<link href="<%=Page.ResolveUrl( "~/common.css") %>" rel="Stylesheet" type="text/css" />
<script src="<%=Page.ResolveUrl( "~/slider/jquery.js") %>" type="text/javascript"></script>
<script src="<%=Page.ResolveUrl( "~/slider/nslider.js") %>" type="text/javascript"></script>
<script src="<%=Page.ResolveUrl( "~/auto_complete.js") %>" type="text/javascript"></script>
Deepak Kanswal Sharma 28-Aug-15 23:10pm    
<div class="container-fluid">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
paisadaddy.com
</div>

<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav">


<li>Home</li>
<li class="dropdown">
Loan
<ul class="dropdown-menu list-group">
<li class="list-group-item">Personel Loans</li>
<li class="list-group-item">Home Loans</li>
<li class="list-group-item">Loan Against Property</li>
<li class="list-group-item">Vehicle Loans</li>
<li class="list-group-item">Education Loans</li>
<li class="list-group-item">Business Loans</li>
<li class="list-group-item">Expert Advice</li>
</ul>
</li>


<li>Insurance</li>
<li>Cards</li>

<li class="dropdown">
FD / RD

<ul class="dropdown-menu">
<li>Fixed Deposit</li>
<li>Recurring Deposit</li>
</ul>
</li>
<li class="dropdown">
Accounts

<ul class="dropdown-menu">
<li>Savings Account</li>
<li>Current Account</li>
<li>PPF Account</li>
<li>Demat Account</li>
</ul>
</li>

1 solution

So finally I got a solution for the problem. Everything was correct except that the bootstrap and jquery files were not included in the sub-page.

Happy coding.. :)
 
Share this answer
 

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)



CodeProject, 20 Bay Street, 11th Floor Toronto, Ontario, Canada M5J 2N8 +1 (416) 849-8900