locked
navigation bar is not working properly in Bootstrap RRS feed

  • Question

  • User1839056048 posted

    Hi,

    I want to display a navigation bar following is my code

    <nav class="navbar navbar-default">
      <div class="container-fluid">
    <div class="navbar-header">
    <a href="#" class="navbar-brand">Recipe Book</a>
    </div>
    <div class="collapse navbar-collapse">
        <ul class="nav navbar-nav">
            <li><a href="#">Shopping List</a></li>
        </ul>
        <ul class="nav navbar-nav navbar-right">
    <li class="dropdown"></li>
    <a href="#" class="dropdown-toggle" role="button">Manage<span class="caret"></span></a>
    <ul class="dropdown-menu">
        <li><a href="#">Save Data</a></li>
        <li><a href="#">Fetch Data</a></li>
    </ul>
        </ul>
    </div>
      </div>  
    </nav>

    the above displays only  Recipe Book.

    and shopping List and dropdown is not displaying

    I have tried in online editor also

    How to solve this

    Regards

    Baiju

    Thursday, November 8, 2018 6:01 AM

All replies

  • User283571144 posted

    Hi klbaiju,

    According to your description and codes, I found you have used bootstrap navbar. The boostrap navbar have adaptive feature.It will auto hide the ul elements according to the browser window width.

    I suggest you could add three buttons with class. Icon-bar <span> to achieve folding effects for the hided elements.

    More details, you could refer to below sample codes:

    <head>
        <meta charset="utf-8" />
        <link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css">
        <script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
        <script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
        <title></title>
    </head>
    <body>
        <nav class="navbar navbar-default">
            <div class="container-fluid">
                <div class="navbar-header">
                    <button type="button" class="navbar-toggle" data-toggle="collapse"
                          data-target="#example-navbar-collapse">
                        <span class="sr-only"></span>
                        <span class="icon-bar"></span>
                        <span class="icon-bar"></span>
                        <span class="icon-bar"></span>
                    </button>
                    <a href="#" class="navbar-brand">Recipe Book</a>
                </div>
                <div class="collapse navbar-collapse"  id="example-navbar-collapse">
                    <ul class="nav navbar-nav">
                        <li><a href="#">Shopping List</a></li>
                    </ul>
                    <ul class="nav navbar-nav navbar-right">
                        <li class="dropdown">
                        <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button">Manage<span class="caret"></span></a>
                        <ul class="dropdown-menu">
                            <li><a href="#">Save Data</a></li>
                            <li><a href="#">Fetch Data</a></li>
                        </ul>
                        </li>
                    </ul>
                </div>
            </div>
        </nav>
    </body>
    

    Result:

    Best Regards,

    Brando

    Friday, November 9, 2018 7:09 AM
  • User1839056048 posted

    Hi friend ur code is fine and i have tested in online editor.

    but my application is angular6 and it is not working there

    how to check the error there .

    Friday, November 9, 2018 8:04 AM
  • User283571144 posted

    Hi klbaiju,

    Could you please share your angular component codes? 

    Does your angular include some css library and override the bootstrap library?

    If you could post more details information, it will be more easily for us to reproduce the issue and find out the solution.

    Besides, I suggest you could try to use F12 browser develop tool to see if there is any error message or the html elements has used the right css style.

    Best Regards,

    Brando

    Tuesday, November 13, 2018 7:43 AM