locked
Master form Menu alignment RRS feed

  • 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">&times;</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

Answers

  • User2037455357 posted

    Its ok ive worked out now.

    I need to use nav navbar-bar navbar-right from the bootstrap css styles.

    good example here

    Regards

    Rob

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Wednesday, May 15, 2019 2:00 PM