Answered by:
Master form Menu alignment

Question
-
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>
Wednesday, May 15, 2019 12:24 PM