How to design header Menu using Bootstrap in ASP.Net

Last Reply on Jan 05, 2017 08:15 AM By Indresh

Posted on Jan 05, 2017 05:24 AM

i want to design same topheader how can i design it

Posted on Jan 05, 2017 05:26 AM

Hi jordan,

Why you are not using masterpage? Just put these section in master page so that this will available in every page as header.


Posted on Jan 05, 2017 05:28 AM

Actually i have tanken screenshot from one website but i want to do same so i want coding


Posted on Jan 05, 2017 08:15 AM Modified on on Jan 05, 2017 08:27 AM

Hi jordan,

I have created sample code which full-fill your requirement.

HTML

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
    <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>
    <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css" />
</head>
<body>
    <form id="form1" runat="server">
    <nav class="navbar navbar-inverse"> 
    <div class="container-fluid"> 
        <div class="navbar-right">
        <ul class="nav navbar-nav"> 
        <li class="active"><a href="#">Home</a></li> <li><a href="#">Link1</a></li> <li><a href="#">Link2</a></li><li><a href="#">Link3</a></li><li><a href="#">Link4</a></li> </ul> 
        </div>
    </div>
    </form>
</body>
</html>

Demo