locked
bootstrap Nav item align to right RRS feed

  • Question

  • User2062956768 posted

    friends

    I have this code but I try many times to align items to right but not success 

    ==================================

    <nav class="navbar navbar-inverse navbar-fixed-top MyNavFontWeight " data-spy="affix" data-offset-top="197" id="Nav2018Top">
    <div class="container-fluid">
    <div class="navbar-header">
    <!--responsive menu button-->
    <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar" id="ShowButtonMenu">
    <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="Start.html" style="font-size:19px;"><span class="glyphicon glyphicon-file !important" style="color:lightgoldenrodyellow;"></span> Contacts DB</a>

    </div>
    <div id="navbar" class="navbar-collapse collapse ">
    <ul class="nav navbar-nav navbar-right">

    <li style="display:inline;"><a href="frm/AboutMe.aspx" style="font-size:19px;display:inline;"> <span class="glyphicon glyphicon-link"></span> About Me </a></li>
    <li style="display:inline;"><a href="frm/MyServices.aspx" style="font-size:19px;display:inline;"> <span class="glyphicon glyphicon-link"></span> My Services </a></li>
    <li style="display:inline;"><a href="frm/MyMission.aspx" style="font-size:19px;display:inline;"> <span class="glyphicon glyphicon-link"></span> My Mission </a></li>
    <li style="display:inline;"><a href="frm/Login.aspx" data-toggle="collapse" data-target=".navbar-collapse.in"><span class="glyphicon glyphicon-log-in" style="color:burlywood"></span><b style="color:red;font-size:19px;display:inline;"> LOG IN </b></a></li>

    </ul>
    </div>


    </div>
    </nav>

    ==========================================

    edit

    the items are moving to the right but not display inline (same line)

    Thursday, May 30, 2019 3:37 PM

Answers

  • User839733648 posted

    Hi mrzoz,

    According to your description and code, I suggest that you coul remove all the display:inline; style from your code.

    Because bootstrap itself has already defined those fit styles.

    Here is the modfied code you could refer to.

    <!DOCTYPE html>
    
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head runat="server">
        <title></title>
        <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css" />
        <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap-theme.min.css" />
        <script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
        <script src="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
    </head>
    <body>
        <form id="form1" runat="server">
            <nav class="navbar navbar-inverse navbar-fixed-top MyNavFontWeight " data-spy="affix" data-offset-top="197" id="Nav2018Top">
                <div class="container-fluid">
                    <div class="navbar-header">
                        <!--responsive menu button-->
                        <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar" id="ShowButtonMenu">
                            <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="Start.html" style="font-size: 19px;"><span class="glyphicon glyphicon-file !important" style="color: lightgoldenrodyellow;"></span>Contacts DB</a>
    
                    </div>
                    <div id="navbar" class="navbar-collapse collapse">
                        <ul class="nav navbar-nav  navbar-right">
                            <li><a href="frm/AboutMe.aspx" style="font-size: 19px;"><span class="glyphicon glyphicon-link"></span>About Me </a></li>
                            <li><a href="frm/MyServices.aspx" style="font-size: 19px;"><span class="glyphicon glyphicon-link"></span>My Services </a></li>
                            <li><a href="frm/MyMission.aspx" style="font-size: 19px;"><span class="glyphicon glyphicon-link"></span>My Mission </a></li>
                            <li><a href="frm/Login.aspx" data-toggle="collapse" data-target=".navbar-collapse.in" style="font-size: 19px;"><span class="glyphicon glyphicon-log-in" style="color: burlywood"></span><b style="color: red; "> LOG IN </b></a></li>
                        </ul>
                    </div>
                </div>
            </nav>
        </form>
    </body>
    </html>
    

    result:

    Best Regards,

    Jenifer

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Friday, May 31, 2019 2:41 AM

All replies

  • User839733648 posted

    Hi mrzoz,

    According to your description and code, I suggest that you coul remove all the display:inline; style from your code.

    Because bootstrap itself has already defined those fit styles.

    Here is the modfied code you could refer to.

    <!DOCTYPE html>
    
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head runat="server">
        <title></title>
        <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css" />
        <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap-theme.min.css" />
        <script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
        <script src="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
    </head>
    <body>
        <form id="form1" runat="server">
            <nav class="navbar navbar-inverse navbar-fixed-top MyNavFontWeight " data-spy="affix" data-offset-top="197" id="Nav2018Top">
                <div class="container-fluid">
                    <div class="navbar-header">
                        <!--responsive menu button-->
                        <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar" id="ShowButtonMenu">
                            <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="Start.html" style="font-size: 19px;"><span class="glyphicon glyphicon-file !important" style="color: lightgoldenrodyellow;"></span>Contacts DB</a>
    
                    </div>
                    <div id="navbar" class="navbar-collapse collapse">
                        <ul class="nav navbar-nav  navbar-right">
                            <li><a href="frm/AboutMe.aspx" style="font-size: 19px;"><span class="glyphicon glyphicon-link"></span>About Me </a></li>
                            <li><a href="frm/MyServices.aspx" style="font-size: 19px;"><span class="glyphicon glyphicon-link"></span>My Services </a></li>
                            <li><a href="frm/MyMission.aspx" style="font-size: 19px;"><span class="glyphicon glyphicon-link"></span>My Mission </a></li>
                            <li><a href="frm/Login.aspx" data-toggle="collapse" data-target=".navbar-collapse.in" style="font-size: 19px;"><span class="glyphicon glyphicon-log-in" style="color: burlywood"></span><b style="color: red; "> LOG IN </b></a></li>
                        </ul>
                    </div>
                </div>
            </nav>
        </form>
    </body>
    </html>
    

    result:

    Best Regards,

    Jenifer

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Friday, May 31, 2019 2:41 AM
  • User-2054057000 posted

    Remove display:inline from li tags because by default Bootstrap Nav aligns on the right itself but your inline styles are changing this position. Recommend you to read this tutorial on Bootstrap menu.

    Friday, May 31, 2019 12:12 PM
  • User2062956768 posted

    Thank you

    Jenifer

    Extremely excellent work 

    Monday, June 3, 2019 4:36 PM