I need help in formatting the navbar menu of bootstrap

Question

Hi, this is the code that i have used

<div class="container">
<nav class="navbar navbar-default" id="my-navbar">
        <div class="container" style="margin-left:60px; margin-right:60px;">

            <div class="navbar-header">
                <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#navbar-collapse">
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>

                </button>
                <a href="">
                    <div class="nav navbar-nav navbar-left" style="margin-top:15px;">
                    <img src="images/logostack.gif" alt="logo">
                    </div>
                </a>
            </div>

            <div class="collapse navbar-collapse" id="navbar-collapse">
                <ul class="nav navbar-nav navbar-center menu_style" > <!--style="font-size:18px; margin-top:25px;"-->
                    <!-- LI STANDS FOR LIST-->
                    <li class="dropdown">
                           <a class="dropdown-toggle" data-toggle="dropdown" href="#">SOMETHING<span class="caret"></span></a>
                           <ul class="dropdown-menu">
                              <li><a href="#">About Something</a></li>
                              <li><a href="#">Meet the Experts</a></li>
                           </ul>
                        </li>
                        <li class="dropdown">
                           <a class="dropdown-toggle" data-toggle="dropdown" href="#">Challenges<span class="caret"></span></a>
                           <ul class="dropdown-menu">
                              <li><a href="#">Shortcomings</a></li>
                              <li><a href="#">Complications</a></li>
                              <li><a href="#">Stakeholders</a></li>
                           </ul>
                        </li>
                        <li class="dropdown">
                           <a class="dropdown-toggle" data-toggle="dropdown" href="#">Prevalence<span class="caret"></span></a>
                           <ul class="dropdown-menu">
                              <li><a href="#">Statistics </a></li>
                              <li><a href="#">Profile Patient</a></li>
                              <li><a href="#">Burden Economical</a></li>
                           </ul>
                        </li>
                        <li class="dropdown">
                           <a class="dropdown-toggle" data-toggle="dropdown" href="#">Protocols<span class="caret"></span></a>
                           <ul class="dropdown-menu">
                              <li><a href="#">Management Approach</a></li>
                              <li><a href="#">Algorithms & Protocols</a></li>
                           </ul>
                        </li>
                        <li class="dropdown">
                           <a class="dropdown-toggle" data-toggle="dropdown" href="#">Care<span class="caret"></span></a>
                           <ul class="dropdown-menu">
                              <li><a href="#">Non Critical</a></li>
                              <li><a href="#">Critical</a></li>
                           </ul>
                        </li>
                        <li class="dropdown">
                           <a class="dropdown-toggle" data-toggle="dropdown" href="#">Resource Center<span class="caret"></span></a>
                           <ul class="dropdown-menu">
                              <li><a href="#">Modules</a></li>
                              <li><a href="#">Videos </a></li>
                              <li><a href="#">Images </a></li>
                           </ul>
                        </li>
                        <li class="dropdown">
                           <a class="dropdown-toggle" data-toggle="dropdown" href="#">Engage <span class="caret"></span></a>
                           <ul class="dropdown-menu">
                              <li><a href="#">Post your Query</a></li>
                              <li><a href="#">Experts Council</a></li>
                           </ul>
                        </li>
                </ul>
            <!--unordered list -->


           </div>


        </div>

I want to place the menu below the logo without using margin on the ul list (since that will spoil the mobile responsiveness and collapse property of bootstrap) .. instead i want to do it with using row and column functions of bootstrap but since im new to it im not able to make it.. any sort of help really appreciated.. thanks in advance..

sure, ive just used bootstrap.min.css and style.css... under style.css ive defined a class ="menu_style"... here is the code:.menu_style { font-family:ARIAL; font-color:#000000; font-size: 15px; } — abby-m7, Sep 08 '16 at 09:31
Please edit your question to add your css instead of giving it in comment — Garf365, Sep 08 '16 at 10:29

score 0 · Answer 1 · edited May 23 '17 at 12:33

0

I've searched and maybe this will help.

.navbar .navbar-nav {
  display: inline-block;
  float: none;
  vertical-align: top;
}

Link to article: Center content in responsive bootstrap navbar

edited May 23 '17 at 12:33

Community

1
1

answered Sep 08 '16 at 09:32

Vincent Toonen

74
1
10

Mr. Perfectionist · Answer 2 · 2016-09-08T09:57:25.497

You have to take a row top of the navbar.

<div class="container">
 <img src="images/logostack.gif" alt="logo" class="img-responsive col-md-2">
 <nav class="navbar navbar-default col-md-10" id="my-navbar">
      // Your navbar code
  </nav>
</div>

Full code according to your question:

<div class="container">
            <img src="images/logostack.gif" alt="logo" class="img-responsive col-md-2">
            <nav class="navbar navbar-default col-md-10" id="my-navbar">
            <div class="container" style="margin-left:60px; margin-right:60px;">

                <div class="navbar-header">
                    <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#navbar-collapse">
                        <span class="icon-bar"></span>
                        <span class="icon-bar"></span>
                        <span class="icon-bar"></span>
                        <span class="icon-bar"></span>

                    </button>

                </div>

                <div class="collapse navbar-collapse" id="navbar-collapse">
                    <ul class="nav navbar-nav navbar-center menu_style" >
                        <!--style="font-size:18px; margin-top:25px;"-->
                        <!-- LI STANDS FOR LIST-->
                        <li class="dropdown">
                            <a class="dropdown-toggle" data-toggle="dropdown" href="#">SOMETHING<span class="caret"></span></a>
                            <ul class="dropdown-menu">
                                <li>
                                    <a href="#">About Something</a>
                                </li>
                                <li>
                                    <a href="#">Meet the Experts</a>
                                </li>
                            </ul>
                        </li>
                        <li class="dropdown">
                            <a class="dropdown-toggle" data-toggle="dropdown" href="#">Challenges<span class="caret"></span></a>
                            <ul class="dropdown-menu">
                                <li>
                                    <a href="#">Shortcomings</a>
                                </li>
                                <li>
                                    <a href="#">Complications</a>
                                </li>
                                <li>
                                    <a href="#">Stakeholders</a>
                                </li>
                            </ul>
                        </li>
                        <li class="dropdown">
                            <a class="dropdown-toggle" data-toggle="dropdown" href="#">Prevalence<span class="caret"></span></a>
                            <ul class="dropdown-menu">
                                <li>
                                    <a href="#">Statistics </a>
                                </li>
                                <li>
                                    <a href="#">Profile Patient</a>
                                </li>
                                <li>
                                    <a href="#">Burden Economical</a>
                                </li>
                            </ul>
                        </li>
                        <li class="dropdown">
                            <a class="dropdown-toggle" data-toggle="dropdown" href="#">Protocols<span class="caret"></span></a>
                            <ul class="dropdown-menu">
                                <li>
                                    <a href="#">Management Approach</a>
                                </li>
                                <li>
                                    <a href="#">Algorithms & Protocols</a>
                                </li>
                            </ul>
                        </li>
                        <li class="dropdown">
                            <a class="dropdown-toggle" data-toggle="dropdown" href="#">Care<span class="caret"></span></a>
                            <ul class="dropdown-menu">
                                <li>
                                    <a href="#">Non Critical</a>
                                </li>
                                <li>
                                    <a href="#">Critical</a>
                                </li>
                            </ul>
                        </li>
                        <li class="dropdown">
                            <a class="dropdown-toggle" data-toggle="dropdown" href="#">Resource Center<span class="caret"></span></a>
                            <ul class="dropdown-menu">
                                <li>
                                    <a href="#">Modules</a>
                                </li>
                                <li>
                                    <a href="#">Videos </a>
                                </li>
                                <li>
                                    <a href="#">Images </a>
                                </li>
                            </ul>
                        </li>
                        <li class="dropdown">
                            <a class="dropdown-toggle" data-toggle="dropdown" href="#">Engage <span class="caret"></span></a>
                            <ul class="dropdown-menu">
                                <li>
                                    <a href="#">Post your Query</a>
                                </li>
                                <li>
                                    <a href="#">Experts Council</a>
                                </li>
                            </ul>
                        </li>
                    </ul>
                    <!--unordered list -->

                </div>

            </div>
        </nav>

        </div>

You have to know about Bootstrap Grid.

thank you for the response.. i tried your code but its giving me the menu in the next row.. whereas i wanted in the same line of the logo ... screenshot image link http://myofficwork123.netne.net/ — abby-m7, Sep 08 '16 at 09:54

score 0 · Answer 3 · answered Sep 08 '16 at 09:36

You can still use the margin property to achieve this, however if you want to eliminate the changed margin for collapsed menu bar, you can use CSS Media queries to change the margin back to zero. Ofcourse, there will be a certain screen size, where the navbar changes to collapsable navbar so you will need Media Queries.

  @media only screen and (max-width:--px)
    {
        //your nav-bar code goes here

    }

I need help in formatting the navbar menu of bootstrap

3 Answers3