How do I add a responsive side menu to my web form where there is gridview and a horizontal navigation bar and make the side menu to be in line with the gridview.
This is what I tried
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<meta charset="utf-8"/>
<meta http-equiv="X-UA-Compatible"/>
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"/>
<!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
<title>Admin Dahsboard</title>
<!-- Bootstrap -->
<link href="css/bootstrap.min.css" rel="stylesheet" />
<link href="css/bootstrap.css" rel="stylesheet" />
<!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/html5shiv/3.7.3/html5shiv.min.js"></script>
<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
<![endif]-->
<link href='https://fonts.googleapis.com/css?family=Comfortaa' rel='stylesheet'/>
<link href='https://fonts.googleapis.com/css?family=Nunito' rel='stylesheet'/>
<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<!-- Popper JS -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
<style type="text/css">
.rounded-corners {
-webkit-border-radius: 8px;
-moz-border-radius: 8px;
border-radius: 8px;
overflow: hidden;
}
.vertical-menu {
width: 200px;
}
.vertical-menu a {
background-color: #eee;
color: black;
display: block;
padding: 12px;
text-decoration: none;
}
.vertical-menu a:hover {
background-color: #ccc;
}
.vertical-menu a.active {
background-color: #4CAF50;
color: white;
}
</style>
</head>
<body style=" background-color:#F5F5F5; overflow:hidden;">
<form id="form1" runat="server">
<div class="navbar navbar-default navbar-inverse navbar-fixed-top" role="navigation" style="background-color: #00003D; font-family: 'Comfortaa';">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse" style="background-color: #00003D; border-color: white; border-width: 1px; color: white">
<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="color: white; margin-top: -3%; font-family: 'Nunito';"><span>
<img alt="LOGO22" src="images/LOGO22.png" height="40" /> </span>TRAX</a>
</div>
<div class="navbar-collapse collapse">
<ul class="nav navbar-nav navbar-right">
<li><a href="Home.aspx" style="color: #FFFFFF; font-size: small; border-right: solid 1px #555; border-left: solid 1px #111;">Home</a></li>
<li><a href="AcustomID.aspx" style="color: #FFFFFF; font-size: small; border-right: solid 1px #555; border-left: solid 1px #111;">About</a></li>
<li class="dropdwon">
<a href="#" class="dropdown-toggle" data-toggle="dropdown" style="color: #FFFFFF; font-size: small; border-right: solid 1px #555; border-left: solid 1px #111;">Car<b class="caret"></b></a>
<ul class="dropdown-menu" style="background-color: #00003D;">
<li class="dropdown-header"><a href="RegisterVehicle.aspx" style="color: #FFFFFF; font-size: small; background-color: #00003D;">Register Vehicle</a></li>
<li class="dropdown-header"><a href="Report.aspx" style="color: #FFFFFF; font-size: small; background-color: #00003D;">Report Stolen Car</a></li>
<li class="dropdown-header"><a href="Verification.aspx" style="color: #FFFFFF; font-size: small; background-color: #00003D;">Verify Vehicle</a></li>
</ul>
</li>
<li class="dropdwon">
<a href="#" class="dropdown-toggle" data-toggle="dropdown" style="color: #FFFFFF; font-size: small; border-right: solid 1px #555; border-left: solid 1px #111;">Phone<b class="caret"></b></a>
<ul class="dropdown-menu" style="background-color: #00003D;">
<li class="dropdown-header"><a href="PhoneRegistration.aspx" style="color: #FFFFFF; font-size: small; background-color: #00003D;">Register Phone</a></li>
<li class="dropdown-header"><a href="PhoneReport.aspx" style="color: #FFFFFF; font-size: small; background-color: #00003D;">Report</a></li>
<li class="dropdown-header"><a href="PhoneVerification.aspx" style="color: #FFFFFF; font-size: small; background-color: #00003D;">Phone Check</a></li>
</ul>
</li>
<li><a><asp:Label ID="user" runat="server" Font-Size="smaller" Text="" ForeColor="White"></asp:Label><img alt="" src="images/img1.jpg" height="20" /></a></li>
<li><a><asp:Label ID="Units" runat="server" Font-Size="smaller" ForeColor="White"></asp:Label></a></li>
<li class="dropdown" style="margin-right: 10px;">
<script src="https://js.paystack.co/v1/inline.js"></script>
<asp:Button type="button" ID="paybutton" runat="server" class="btn btn-primary navbar-btn" Text="Wallet Deposit" Style="width: 115px; font-size: smaller;" OnClick="paybutton_Click" />
</li>
<li class="dropdown" style="margin-right: 10px;">
<asp:Button ID="btnSignOut" runat="server" class="btn btn-primary navbar-btn" Text="Sign Out" Style="font-size: smaller" OnClick="btnSignOut_Click" />
</li>
</ul>
</div>
</div>
</div>
<br /> <br /><br />
<div class="container"><h1 style="font-size:x-large;">Profile Dashboard</h1></div>
<div class="container">
<h2 style="font-size: larger;">Users</h2>
<hr />
<div class="row">
<button type="button" runat="server" class="btn btn-primary navbar-btn" data-toggle="modal" style="font-size: small" data-target="#MyModal">Create User</button>
<asp:Label ID="userlabel" runat="server" Text="" Style="text-align: center;"></asp:Label>
</div>
</div>
<div class="row">
<div class="rounded-corners">
<asp:GridView ID="AdminGrid" runat="server" CellPadding="4" ForeColor="#333333" GridLines="None" HorizontalAlign="Center" AutoGenerateColumns="false" ShowHeaderWhenEmpty="true" Width="900px" Height="150px" OnRowDataBound="OnRowDataBound"
DataKeyNames="Uid" AllowPaging="true" OnRowDeleting="OnRowDeleting" OnSelectedIndexChanged="AdminGrid_SelectedIndexChanged">
<AlternatingRowStyle BackColor="White" ForeColor="#284775" />
<EditRowStyle BackColor="#999999" />
<FooterStyle BackColor="#5D7B9D" Font-Bold="True" ForeColor="White" />
<HeaderStyle BackColor="#5D7B9D" Font-Bold="True" ForeColor="White" />
<PagerStyle BackColor="#284775" ForeColor="White" HorizontalAlign="Center" />
<RowStyle BackColor="#F7F6F3" ForeColor="#333333" />
<SelectedRowStyle BackColor="#E2DED6" Font-Bold="True" ForeColor="#333333" />
<SortedAscendingCellStyle BackColor="#E9E7E2" />
<SortedAscendingHeaderStyle BackColor="#506C8C" />
<SortedDescendingCellStyle BackColor="#FFFDF8" />
<SortedDescendingHeaderStyle BackColor="#6F8DAE" />
<Columns>
<asp:TemplateField HeaderText="Email Address" ItemStyle-Width="300">
<ItemTemplate>
<asp:Label ID="Label1" runat="server" Text='<%# Eval("email") %>' />
</ItemTemplate>
<EditItemTemplate>
<asp:TextBox ID="txtname" Text="" runat="server" />
</EditItemTemplate>
<FooterTemplate>
<asp:TextBox ID="footertxtname" Text="" runat="server" />
</FooterTemplate>
</asp:TemplateField>
<asp:TemplateField HeaderText="Role">
<ItemTemplate>
<asp:Label ID="Label2" runat="server" Text='<%# Eval("UserRole") %>' />
</ItemTemplate>
<EditItemTemplate>
<asp:TextBox ID="txtname" Text="" runat="server" />
</EditItemTemplate>
<FooterTemplate>
<asp:TextBox ID="footertxtname" Text="" runat="server" />
</FooterTemplate>
</asp:TemplateField>
<asp:TemplateField HeaderText="Date Created/Time" ItemStyle-Width="300">
<ItemTemplate>
<asp:Label ID="Label3" runat="server" Text='<%# Eval("CreateDate") %>' />
</ItemTemplate>
<EditItemTemplate>
<asp:TextBox ID="txtname" Text="" runat="server" />
</EditItemTemplate>
<FooterTemplate>
<asp:TextBox ID="footertxtname" Text="" runat="server" />
</FooterTemplate>
</asp:TemplateField>
<asp:TemplateField HeaderText="">
<ItemTemplate>
</ItemTemplate>
<EditItemTemplate>
</EditItemTemplate>
<FooterTemplate>
</FooterTemplate>
</asp:TemplateField>
<asp:CommandField ButtonType="Button" ShowDeleteButton="true" ItemStyle-ForeColor="#00003D" ItemStyle-Width="150"
ControlStyle-BackColor="SteelBlue" ControlStyle-BorderStyle="None" ControlStyle-ForeColor="White" />
</Columns>
<EmptyDataTemplate>
<div style="text-align: center;">
No User Records
</div>
</EmptyDataTemplate>
</asp:GridView>
</div>
<div class="vertical-menu">
<a href="#" class="active">Admin Panel</a>
<a href="#">Link 1</a>
<a href="#">Link 2</a>
<a href="#">Link 3</a>
<a href="#">Link 4</a>
</div>
</div>
</form>
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<!-- Include all compiled plugins (below), or include individual files as needed -->
<script src="js/bootstrap.min.js"></script>
</body>
</html>
