Boot Navigation Issues - Responsible Issues

Question

I am creating a website for a client and encounter some problems. I have a fixed top and left menu and everything works well in the mobile layout. However, when I am in the desktop resolution and I hide the left menu, the navigation in the top menu seems to change right to right (when I decrease the resolution, the links drop out and the menu doubles in size). I made a div identifier for it, but the only thing I really use is the margin on the left to give a room in the search bar.

Can someone help me ??? Website: http://104.193.173.104/modx/index.php?id=1

Here is the code for my top menu:

<div id="main-navbar" class="navbar navbar-inverse" role="navigation">

<!-- Left menu toggle button -->
<button type="button" id="main-menu-toggle">
    <i class="navbar-icon fa fa-bars icon"></i>
</button>

<div class="navbar-inner">

    <div class="navbar-header">
        <div class="nav navbar-nav" style="">
            <!-- SEARCH BAR -->
            [[$searchBar]]
        </div>

        <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#main-navbar-collapse">
            <i class="navbar-icon fa fa-bars"></i>
        </button>
    </div>

    <div id="main-navbar-collapse" class="collapse navbar-collapse main-navbar-collapse">
        <div id="main-navigation-container">
            <!-- MAIN NAVIGATION -->
            [[Wayfinder? &startId=`8` &outerTpl=`outerTplTop` &innerTpl=`innerTplTop` &level=`2`]]

            <!-- LOGIN -->
            <div class="right clearfix">
                <ul class="nav navbar-nav pull-right right-navbar-nav">
                    <li><a href="#"><i class="dropdown-icon fa fa-sign-in"></i>&nbsp; Login</a></li>
                </ul>
            </div>
        </div>
    </div>
</div>

Here is the CSS for the top nav container:

#main-navigation-container {
margin-left: 347px;
width: auto;
max-height: none;
}

I work with Bootstrap 3.3.6 and ModX Revo for my CMS.

! , , .

Answer 1

CSS:

   .navbar-header{
    max-width: 200px;
    }