Pb de menu mobile ouvert bootstrap au démarche

Bonjour,
Au démarage du site la version mobile a le menu ouvert et jaimerais qu'il soit fermer.

<div class="container">
            <div class="row">

                <nav class="container clearfix padding-top-40">
                    <div class="navbar-header ">
                        <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#navbarhotel" aria-expanded="false" aria-controls="navbarhotel">
                            <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="#">
                            <div class="row"> <div class="col-xs-4 col-sm-3 " ><img src="img/logo.png" alt="" > </div>
                                <div class="col-xs-8 col-sm-9 logo" >
                                    <strong>HÔTEL PERON</strong> <i class="icon-star-full2 red"></i><i class="icon-star-full2 red"></i><i class="icon-star-full2 red"></i><i class="icon-star-full2 red"></i>
                                    <br><small>Une escale marseillaise
                                        <br>Au bord de mer</small></div>
                            </div>
                        </a>
                    </div>
                    <div>
                        <ul class="nav navbar-nav  navbar-inverse padding-top-40" id="navbarhotel" aria-controls="navbarhotel" >
                            <li class="active"><a href="#"><i class="icon-home2 red"></i></a></li>
                            <li><a href="#">CHAMBRES</a></li>
                            <li><a href="#">SERVICES</a></li>
                            <li><a href="#">SEMINAIRES</a></li>
                            <li><a href="#">ACTIVITES</a></li>
                            <li><a href="#">ACTUALITES</a></li>
                            <li><a href="#">ACCES & CONTACT</a></li>
                        </ul>
                    </div>

                </nav>
            </div>

        </div>

pour le css :

.nav > li > a
{
    padding: 10px 0px 10px 15px;
    color: #000000;
    font-weight: bolder;
}
.nav li:hover a
{
    color: #B40033;
}
.nav > li > a:focus, .nav > li > a:hover
{
    text-decoration: none;
    background-color: transparent;
    border-bottom: 4px solid #B40033;
}
.nav .open > a, .nav .open > a:focus, .nav .open > a:hover
{
    background-color: transparent;
    border-color: #B40033;
}
@media (max-width: 767px)
{
    .logo
    {
        font-size: 18px;
        padding-top: 14px;
        position: relative;

    }
    .logo small
    {
        font-size: 10px;
    }
    .padding-top-40
    {
        padding-top: 0px;
    }
     .navbar-toggle .icon-bar
    {
        background-color: #E72626;
    }
    .navbar-inverse
    {
        background-color: #F2F0EE;
        position: relative;
        left: 0px;
        top: -1px;
        width: 100%;
        margin-left: 0;

        position: absolute;
        z-index: 100000;
    }
    .top-responsive
    {
        padding-top: 50px;
    }

}

Capture d'ecran:
http://hpics.li/5c71ee7
merci de votre aide