bootstrap 3 collapsed navbar - dropdown titles out of screen when expanded

Question

I'm using the default collapse navbar from bootstrap 3, but when I resize the browser window or open the page on a mobile device, the menu will first collapse and reduce nice to just the button and when I hit this button to expand the menu, all the menu items are too far on the left side so you can't read them properly an the language selection (just a flag) disappears completely. I tried several things like inline styling in html (left margin/padding, width, max width etc) and I also tried to remove the negative margin for .navbar-nav in my bootstrap css. I'll attach a screenshot and here is the code for my navigation (of course it's nested in a container div):

 <div class="row formRow">
        <div class="col-sm-12 searchCol">
            <form class="searchBox" action="/en/search.html" method="get">
                <div class="form-group" style="display:inline;">
                    <div class="input-group">
                        <input type="text" name="q" class="form-control" maxlength="2048">
                        <span class="input-group-addon"><span class="glyphicon glyphicon-search"></span></span>
                    </div>
                </div>
            </form>
        </div>
    </div>


    <div class="row">
    <div class="col-xs-12">
    <nav class="navbar navbar-default">

            <div class="navbar-header">
                <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" ><!--aria-controls="navbar"-->
                    <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="/en/"><img class="img-responsive" src="/img/primeralogo.png" alt="Primera Technology Europe Logo"></a>
            </div>
            <div id="navbar" class="collapse navbar-collapse">
                <ul class="nav navbar-nav" style="padding: auto; max-width: 100%;">
                    <li class="dropdown" style="padding: auto; max-width: 100%;">
                        <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">PRODUCTS</a>
                        <ul class="dropdown-menu">
                            <li><a href="/en/signature-slide-printer.html" class="has-submenu navitems">Slide Printer</a></li>
                            <li><a href="/en/signature-cassette-printer.html" class="navitems">Cassette Printer - Autoloader</a></li>
                            <li><a href="/en/signature-cassette-printer-manual.html" class="navitems">Cassette Printer - Manual</a></li>
                            <li><a href="/en/equipment.html" class="navitems">Medical IT Equipment</a></li>
                            <li role="separator" class="divider"></li>
                            <li><a href="/en/lx500e_features.html" class="navitems">LX500e Color Label Printer</a></li>
                            <li><a href="/en/disc_publisher.html" class="navitems">Disc Publishers</a></li>
                            <li role="separator" class="divider"></li>
                            <li><a href="/pdf/211275-Signature-Brochure-EN-A4.pdf" target="_blank" class="navitems">Product Brochure</a></li>                                
                          <li><a href="http://primeratrio.eu/" target="_blank" class="navitems">Portable All-in-One Printer</a></li>
                        </ul>
                    </li>
                    <li class="dropdown" style="padding: auto; max-width: 100%;">
                        <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">SUPPORT</a>
                        <ul class="dropdown-menu">
                            <li><a href="/en/contact_tech_support.html" class="navitems">Contact Support</a></li>
                            <li><a href="/en/knowledgebase.html" class="navitems">Knowledge Base</a></li>
                            <li role="separator" class="divider"></li>
                            <li><a href="/en/registration.html" class="navitems">Product Registration</a></li>
                           <!-- <li><a href="/en/application-form.html" class="navitems">Sign up for training</a></li>-->
                            <li role="separator" class="divider"></li>
                            <li><a href="/en/slideprintersupport.html" class="navitems">Slide Printer</a></li>
                            <li><a href="/en/cassetteprintersupport.html" class="navitems">Cassette Printer</a></li>
                            <li><a href="/en/LISIntegration.html" class="navitems">LIS Integration</a></li>

                        </ul>
                    </li>
                    <li class="dropdown" style="padding: auto; max-width: 100%;">
                        <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">COMPANY</a>
                        <ul class="dropdown-menu">
                            <li><a href="/en/about.html" class="navitems">About Primera </a></li>
                            <li><a href="/en/press.html" class="navitems">Press</a></li>
                            <li><a href="/en/contact.html" class="navitems">Contact Primera </a></li>
                        </ul>
                    </li>
                    <li class="dropdown" style="padding: auto; max-width: 100%;">
                     <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false"><span class="lang-sm" lang="en"></span></a>
                     <ul class="dropdown-menu"> <li><a href="/en/signature-cassette-printer.html" target="_self" class="navitems"><span class="lang-sm lang-lbl-full" lang="en"></span></a></li>
                      <li><a href="/de/signature-cassette-printer.html" target="_self" class="navitems"><span class="lang-sm lang-lbl-full" lang="de"></span></a></li>
                      <li><a href="/fr/signature-cassette-printer.html" target="_self" class="navitems"><span class="lang-sm lang-lbl-full" lang="fr"></span></a></li>
                      <!--<li><a href="/es/signature-cassette-printer.html" target="_self" class="navitems"><span class="lang-sm lang-lbl-full" lang="es"></span></a></li>-->
                      <li><a href="/nl/signature-cassette-printer.html" target="_self" class="navitems"><span class="lang-sm lang-lbl-full" lang="nl"></span></a></li>
                      <li><a href="/bg/signature-cassette-printer.html" target="_self" class="navitems"><span class="lang-sm lang-lbl-full" lang="bg"></span></a></li>
                      <li><a href="/cz/signature-cassette-printer.html" target="_self" class="navitems"><span class="lang-sm lang-lbl-full" lang="cz"></span></a></li>
                     </ul>
                    </li>
                </ul>
            </div><!--/.nav-collapse -->

            </nav>
            </div>
            </div>

    <div class="row formRowBelow">
        <div class="col-sm-12 searchCol">
            <form class="searchBoxAlt" action="/en/search.html" method="get">
                <div class="form-group" style="display:inline;">
                    <div class="input-group">
                        <input type="text" name="q" class="form-control"  value="" maxlength="2048">
                        <span class="input-group-addon"><span class="glyphicon glyphicon-search"></span></span>
                    </div>
                </div>
            </form>
        </div>
    </div>

Screenshot of the problem

EDIT: It seems that if the window gets small enough (320px width) the navigation gets displayed almost correct. As the window gets larger, the text goes to the left and disappears "letter for letter" until it hits the breaking point where it becomes a normal navbar again

Answer 1

If you're using Chrome, then this is a browser bug that I've experienced as well. When moving to a different breakpoint from mobile view sometimes Chrome zooms in. Try just resetting your browser zoom level (Ctrl/Cmnd + 0).

You also have a JS error in your console that you should consider resolving.