User2037455357 posted
Hello there.
I have the following Master Form with a menu at the top. and i cannot workout how to Left align everything,
I have put the menu inside a table, Could someone point me in right direction please.
<title>HomePage</title>
<script src="scripts/jQuery-3.4.1.min.js"></script>
<link href="Content/bootstrap.min.css" rel="stylesheet" />
<script type="text/javascript">
$(document).ready(function () {
$(".dropdown, .btn-group").hover(function () {
var dropdownMenu = $(this).children(".dropdown-menu");
if (dropdownMenu.is(":visible")) {
dropdownMenu.parent().toggleClass("open");
}
});
});
</script>
<style type="text/css">
@media screen and (min-width: 768px) {
.dropdown:hover .dropdown-menu, .btn-group:hover .dropdown-menu{
display: block;
}
.bs-example{
align-items:center;
}
.dropdown-menu{
margin-top: 0;
}
.dropdown-toggle{
margin-bottom: 2px;
}
.navbar .dropdown-toggle, .nav-tabs .dropdown-toggle{
margin-bottom: 0;
}
/*ALL OTHER STYLES HERE*/
.auto-style1 {
text-align: left;
margin-right: 20%;
width: 100%
}
}
</style>
</head>
<body>
<br />
<div>
<table class="auto-style1">
<tr>
<td>
<div class="auto-style1">
<%--<div class="alert alert-info">
<a href="#" class="close" data-dismiss="alert">×</a>
<%--<strong>Note!</strong> Open the output in a new blank tab if hover feature is not working due to small viewport size. Otherwise you can remove the CSS media query to enable it on all devices.--%>
<%--</div>--%>
<!--Navbar with dropdown menu-->
<nav id="myNavbar" class="navbar navbar-default" role="navigation" style="left: 0px; top: -0px; height: 1px";>
<!-- Brand and toggle get grouped for better mobile display -->
<div class="container" >
<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 class="navbar-brand" href="#">Logo</a>
<!-- 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="#">Home</a></li>
<li><a href="#">Profile</a></li>--%>
<li class="dropdown">
<a href="#" data-toggle="dropdown" class="dropdown-toggle">Menu to Configure <b class="caret"></b></a>
<ul class="dropdown-menu">
<li><a href="#">Inbox</a></li>
<li><a href="#">Drafts</a></li>
<li><a href="#">Sent Items</a></li>
<li class="divider"></li>
<li><a href="#">Trash</a></li>
</ul>
</li>
<li class="dropdown">
<a href="#" data-toggle="dropdown" class="dropdown-toggle">Menu to Configure <b class="caret"></b></a>
<ul class="dropdown-menu">
<li><a href="#">Inbox</a></li>
<li><a href="#">Drafts</a></li>
<li><a href="#">Sent Items</a></li>
<li class="divider"></li>
<li><a href="#">Trash</a></li>
</ul>
</li>
</ul>
</div>
</div>
</nav>
</div>
</td>
</tr>
</table>
</div>
<form id="form1" runat="server">
<div>
<asp:ContentPlaceHolder ID="ContentPlaceHolder1" runat="server">
</asp:ContentPlaceHolder>
</div>
</form>
<script src="scripts/jQuery-3.4.1.min.js"></script>
<script src="Content/bootstrap.min.css"></script>
</body>
</html>
