Implement Bootstrap navbar Toggle Menu in ASPX Page in ASP.Net

Last Reply on Sep 30, 2015 02:26 AM By Shashikant

Posted on Sep 30, 2015 02:17 AM

I Created a webpage using bootstrap navbar toggle, it is not working. But when i create page in html, it works fine. I need to work on aspx page.

 

                     <nav class="navbar navbar-inverse navbar-fixed-top" role="navigation">        
					<div class="container">
                    
						<div class="navbar-header">
							<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
                                <span class="sr-only">Toggle navigation</span>
                                <span class="icon-bar"></span>
                                <span class="icon-bar"></span>
                                <span class="icon-bar"></span>
							</button> 
                    <a href="index.html" class="logo"><img src="../images/logo.png" alt="ColorsDress Logo"/></a>					
						</div> 
                
						<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
							<ul class="nav navbar-nav navbar-right custom-menu">
                                <li class="active"><a href="index.html">HOME</a></li>
                                <li><a href="collection.html">COLLECTION</a></li>
                                <li><a href="shows.html">SHOWS</a></li>
                                <li><a href="storelocater.html">STORE LOCATOR</a></li>
                                <li><a href="aboutus.html">ABOUT US</a></li>
                                <li><a href="contactus.html">CONTACT US</a></li>
                                <li><a href="#">LIVE INVENTORY</a></li>
							</ul>
						</div>
                        
					</div>
				</nav>         

Thanks in advance.

Posted on Sep 30, 2015 02:26 AM Modified on on Sep 30, 2015 02:34 AM

Hi JaisonJoe,

I have created sample using your code on aspx page.

HTML

<div>
    <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css" />
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
    <script type="text/javascript" src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/js/bootstrap.min.js"></script>
    <nav class="navbar navbar-inverse navbar-fixed-top" role="navigation">       
<div class="container">
     
    <div class="navbar-header">
        <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
            <span class="sr-only">Toggle navigation</span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
        </button>
<a href="index.html" class="logo"><img src="../images/logo.png" alt="ColorsDress Logo"/></a>                 
    </div>
 
    <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
        <ul class="nav navbar-nav navbar-right custom-menu">
            <li class="active"><a href="index.html">HOME</a></li>
            <li><a href="collection.html">COLLECTION</a></li>
            <li><a href="shows.html">SHOWS</a></li>
            <li><a href="storelocater.html">STORE LOCATOR</a></li>
            <li><a href="aboutus.html">ABOUT US</a></li>
            <li><a href="contactus.html">CONTACT US</a></li>
            <li><a href="#">LIVE INVENTORY</a></li>
        </ul>
    </div>         
</div>
</nav>
</div>

Screenshot

I agree, here is the link: https://www.e-iceblue.com/Introduce/spire-office-for-net-free.html