navbar icons jumping down when the window get smaller

Question

I use bootstrap.my navbar icons jumping down when the window get smaller.when it is too small the menu goes to 3line icon bar. How I can set my icons to appear in one line in small window?

here is my navbar code,

  <nav class="navbar navbar-inverse navbar-fixed-top ">
        <div class="container-fluid">
            <div class="navbar-header">
                <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar">
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>

                </button>
                <a class="navbar-brand" href="#">
                    <img id="brand-image" alt="" src="../image/fullLogo.png"/>
                </a>


            </div>


            <div class=" col-md-offset-2">
                <div class="collapse navbar-collapse" id="myNavbar">
                    <ul class="nav navbar-nav">

                        <li>
                            <a href="../MainPages/avayejavid.html"    class="header-style">
                                <i class="fa fa-home li-header-style" aria-hidden="true" ></i>

                                خانه
                            </a>
                        </li>


                        <li class="dropdown ">
                            <a data-toggle="dropdown" href="#" class="header-style">
                                <i class="fa fa-file-o li-header-style" aria-hidden="true"></i>

                                معرفی <span class="caret "></span>
                            </a>
                            <ul class="dropdown-menu" style=" background-color: #9D763C">
                                <li>
                                    <a href="../MainPages/bio.html" class="header-style">بیوگرافی</a>
                                </li>
                                <li>
                                    <a href="../MainPages/ava-members.html" class="header-style">اعضای گروه</a>
                                </li>

                            </ul>
                        </li>



                        <li>
                            <a href="../MainPages/gallery.html" class="header-style">
                                <i class="fa fa-picture-o li-header-style" aria-hidden="true" ></i>

                                گالری

                            </a>
                        </li>


                        <li class="dropdown">
                            <a data-toggle="dropdown" href="#" class="header-style">
                                <i class="fa fa-file-o li-header-style" aria-hidden="true"></i>

                                ویدئو <span class="caret "></span>
                            </a>
                            <ul class="dropdown-menu" style=" background-color: #9D763C">
                                <li>

                                    <a href="../MainPages/training.html" class="header-style">آموزش</a>
                                </li>
                                <li>

                                    <a href="../MainPages/tasnif1.html" class="header-style">تصنیف خوانی</a>
                                </li>

                                <li>
                                    <a href="../MainPages/saz-va-avaz1.html" class="header-style"> ساز و آواز</a>
                                </li>

                            </ul>
                        </li>

                        <li>
                            <a href="../MainPages/Articles.html" class="header-style">
                                <i class="fa fa-shopping-cart li-header-style" aria-hidden="true"></i>

                                مقالات

                            </a>
                        </li>


                        <li>
                            <a href="../MainPages/movie.html" class="header-style">
                                <i class="fa fa-shopping-cart li-header-style" aria-hidden="true"></i>

                                خرید

                            </a>
                        </li>

                        <li>
                            <a href="#" class="header-style">
                                <i class="fa fa-comments li-header-style" aria-hidden="true"></i>

                                تماس با ما

                            </a>
                        </li>




                    </ul>

                </div>

            </div>

        </div>



    </nav>

and here is my CSS:

 .header-style{
           padding-top:20px !important;
           background-image:url(../images/icon.png);
            background-size: 100% 100% !important;
            padding-left:40px !important;
            padding-right:40px !important;
       }
       .li-header-style{
           color:#ffe766
       }
.navbar-fixed-top .nav {
    padding: 15px 0;
}

@media (max-width:767px) { 
    .navbar-brand {
        padding: 0;        
    }

   .navbar-brand img {
        margin-top: 1px;
        margin-left: 1px;
    }
}


 .navbar-nav li a {
  height:80px;


}

.navbar-nav li a {
  padding-top: 0;
  padding-bottom:0;
}


        .navbar .nav > li.dropdown.open.active > a:hover,
        .navbar .nav > li.dropdown.open > a {
            color: #ffe766 !important;
            background-color: transparent !important;
            border-color: #ffe766 !important;
        }
         #brand-image
        {
            height:100px;

        }

you can minimize the shapes in the menu with some custom css codes and media queries — Sahil Dhir, Mar 30 '17 at 07:17
I added css for navbar to the question.can you explain how I can fix this problem?thanks — mndn, Mar 30 '17 at 07:43

score 0 · Accepted Answer · edited May 23 '17 at 12:25

The problem is the icons are taking up too much space for the designated break-point.

I would advise reading the bootstrap documentation more thoroughly (especially the grid system): http://getbootstrap.com/css/#grid-media-queries

To fix your problem you would need to increase the .navbar breakpoint. This is explained very well here: https://coderwall.com/p/wpjw4w/change-the-bootstrap-navbar-breakpoint.

You can also look at this previous answer to help you: Change bootstrap navbar collapse breakpoint without using LESS

navbar icons jumping down when the window get smaller

1 Answers1