Bootstrap navbar responsivness

Question

I have got a centered logo in my navbar and three menu categories on the side,when i reduce my resolution some categories start to disappear and when i reduce the resolution for navbar collapse things then get really messed up,the whole collapse menu is shown behind the main slider i have got.This is my code.

<nav class="navbar navbar-inverse navbar-fixed-top" role="navigation" style="height:90px;">
    <div class="container-fluid">

        <div class="navbar-header">
            <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
                <span class="sr-only">Toggle navigation</span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
            </button>

        </div>


        <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
            <div class="row">
                <div class="col-md-4">
                    <ul class="nav navbar-nav ">
                        <li class="active menu-item">
                            <a class="menu-link" href="#">Home</a>
                        </li>
                        <li class="menu-item">
                            <a class="menu-link" href="#">About us</a>
                        </li>
                        <li class="menu-item">
                            <a class="menu-link" href="#">Events</a>
                        </li>
                    </ul>
                </div>
                <div class="col-md-4">
                    <img class="img-responsive center-block" src="images/Night-club.png"  title="Night-club logo" alt="Night-club logo">
                </div>  
                <div class="col-md-4">
                    <ul class="nav navbar-nav ">    
                        <li class="menu-item">
                            <a class="menu-link" href="#">Gallery</a>
                        </li>
                        <li class="menu-item">
                            <a class="menu-link" href="#">Reservation</a>
                        </li>
                        <li class="menu-item">
                            <a class="menu-link" href="#">Contact</a>
                        </li>
                    </ul>
                </div>  
            </div>
        </div>


    </div>
</nav>
<div class="main-slider-simple">
        <ul class="img-slider">
            <li>
                <img class="img-responsive" src="images/main-img.jpg" title="Night club " alt="Night club " />
            </li>
            <li>
                <img class="img-responsive" src="images/main-img2.jpg" title="Night club " alt="Night club " />
            </li>
            <li>
                <img class="img-responsive" src="images/main-img3.jpg" title="Night club " alt="Night club " />
            </li>
        </ul>
        <!-- Glavni slider -->
    </div>

And here is css for the menu links i have set up...

.menu-item{
margin-top:50px;
margin-left:30px;
margin-right:20px;
font-size:30px;
}

How can i accomplish normal responsivness?

Here is the jsfiddle that kinda explains my situation.

http://jsfiddle.net/cELuF/

Answer 1

I've changed the css for the div

.col-md-4

http://jsfiddle.net/cELuF/2/

You will be able to see what i've added in the CSS box.