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

I've following code in html now the menu is changing when the width size is 750px or less but I want it to change when it is 950px or less.


HTML
<div class="main-navigation animated with-dropdown-buttons" >
                                          <nav class="navbar navbar-default navbar-fixed-top" style="background-color:rgba(57, 66, 69, 0.2); color:#fff; ">
                                                 <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") %>"><img src="<%=Page.ResolveUrl( "~/Img/logo_light_blue.jpeg") %>" alt="" /></a>
                                                        </div>

                                                       <!-- Collect the nav links, forms, and other content for toggling -->


                                                       <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1" style="padding-removed0px">
                              <ul class="nav navbar-nav navbar-right">
                                <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">
                                        <li><a href="<%=Page.ResolveUrl( "~/perloan.aspx") %>">Personel Loans</a></li>
                                        <li><a href="<%=Page.ResolveUrl( "~/homloan.aspx") %>">Home Loans</a></li>

 <li><a href="<%=Page.ResolveUrl( "~/lap.aspx") %>">Loan Against Property</a></li>
                                        <li><a href="<%=Page.ResolveUrl( "~/autloan.aspx") %>">Vehicle Loans</a></li>
                                        <li><a href="<%=Page.ResolveUrl( "~/edu.aspx") %>">Education Loans</a></li>
                                        <li><a href="<%=Page.ResolveUrl( "~/buss.aspx") %>">Business Loans</a></li>
                                        <li><a href="<%=Page.ResolveUrl( "~/expert.aspx") %>">Expert Advice</a></li>
                                  </ul>
                                </li>


                            <li><a href="policy.aspx">Policy</a></li>
                            <li><a href="<%=Page.ResolveUrl( "~/cards/card.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">Account</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="<%=Page.ResolveUrl( "~/contact.aspx") %>">Contact Us</a></li>
     
     
                           <%-- <div class="navbar-form navbar-left pull-right" style="margin:0px">
                                <div class="form-group" style="padding-removed0px; float:right">
                                  
                                  <input type="text" class="form-control" id="q" name="q" />

                                <button type="submit" class="btn btn-danger" value="Search" > </button>
                                </div>
                              </div>--%>
             </ul>
        
    </div>                                  <!-- /.navbar-collapse -->
                                                      </div><!-- /.container-fluid -->
                                          </nav>
                                      </div>
Posted
Updated 29-Sep-15 7:30am
v3
Comments
Sreekanth Mothukuru 29-Sep-15 13:44pm    
Have you checked adjusting media queries for nav in your custom css file to override bootstrap.css file ?
Deepak Kanswal Sharma 29-Sep-15 22:25pm    
Yes I did. Actually they are changing at 750px so I increased the size to 900px in navbar-collapse but nothing happened.

1 solution

If you want to change the Bootstrap media query breakpoints, there's a tool for that[^].
 
Share this answer
 
Comments
Deepak Kanswal Sharma 29-Sep-15 21:37pm    
How can I change them in the navbar?
Richard Deeming 30-Sep-15 8:08am    
The media query breakpoints are global. If you want to change them for just the navbar, then you'll need to create your own set of navbar styles, or go through the CSS file and change the breakpoints for just the navbar styles.

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