locked
Formatting navbar menu items in a row with css, bootstrap. RRS feed

  • Question

  • User956626884 posted

    HI,

    I am stucked on this a navigation bar (navbar). Right now each menu item is vertically stacked on top of each other. How can I get the menu items to be aligned next to each other in a row? Thanks.

    <nav class="navbar navbar-inverse main-navigation" >
      <div class="collapse navbar-collapse navbar-main-collapse">
        <ul class="nav navbar-nav">
          <li class="col-sm-2 menu-9395 first"><a href="http://www.google.com" title="Menu 1">Menu 1</a></li>
          <li class="col-sm-2 menu-9442"><a href="http://www.google.com" title="Grants">Menu 2</a></li>
          <li class="col-sm-2 menu-9443"><a href="http://www.google.com" title="Laws">Menu 3</a></li>
        </ul>
      </div>
    </nav>

    Monday, September 17, 2018 10:54 PM

All replies

  • User839733648 posted

    Hi  comicrage,

    I’ve tried your code on my side and the running result you could see from below image.

    Right now each menu item is vertically stacked on top of each other

    It seems that the menu items is aligned next to each other in a row except the number in the item name.

    If you want to also align the number in a row, you may just move the class col-sm-2.

    The class nav and navbar-nav have defined the style to show the menu items aligned in  a row.

    For more about Navbar, you could refer: https://getbootstrap.com/docs/3.3/components/#navbar 

    For more details, you could refer to the code below.

    <html xmlns="http://www.w3.org/1999/xhtml">
    <head runat="server">
        <title></title>
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
        <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
        <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" />
    </head>
    <body>
        <form id="form1" runat="server">
            <div>
                <nav class="navbar navbar-inverse main-navigation">
                    <div class="collapse navbar-collapse navbar-main-collapse">
                        <ul class="nav navbar-nav">
                            <li class="menu-9395 first"><a href="http://www.google.com" title="Menu 1">Menu 1</a></li>
                            <li class="menu-9442"><a href="http://www.google.com" title="Grants">Menu 2</a></li>
                            <li class="menu-9443"><a href="http://www.google.com" title="Laws">Menu 3</a></li>
                        </ul>
                    </div>
                </nav>
            </div>
        </form>
    </body>
    </html>
    

    result:

    If this does not meet your need, please provide more details about your issue like the screenshot of your running result.

    This will be easier for us to help with you.

    Best Regards,

    Jenifer

    Wednesday, September 19, 2018 6:39 AM