Problems when centering items in navbar-nav when you are in mobile mode (collapsed)

Using the following CSS code, I've managed to centre the navbar-nav content in my navbar within my navbar, in

/* @media (min-width:768px) {  */ Note this comment

.navbar > .container {
    text-align: center;
}
.navbar-header,.navbar-brand,.navbar .navbar-nav,.navbar .navbar-nav > li {
    float: none;
    display: inline-block;
}
.collapse.navbar-collapse {
    float: none;
    display: inline-block!important;
    width: auto;
    clear: none;
}
/* } */ Note this comment

Here's the HTML:

<div class="navbar navbar-inverse navbar-static-top">
    <div class="container">
        <button class="navbar-toggle" data-toggle="collapse" data-target=".navHeaderCollapse"> <span class="icon-bar"></span>
          <span class="icon-bar"></span>
          <span class="icon-bar"></span>
        </button>
        <div class="collapse navbar-collapse navHeaderCollapse">
            <ul class="nav navbar-nav navbar-right">
                <li><a href="#">Link1</a>
                </li>
                <li><a href="#">Link2</a>
                </li>
                <li class="dropdown"> <a href="#" class="dropdown-toggle" data-toggle="dropdown"><span>Link3 (Dropdown)</span><b class = "caret"></b></a>

                    <ul class="dropdown-menu">
                        <li><a href="#">Sublink 1</a>
                        </li>
                        <li><a href="#">Sublink 2</a>
                        </li>
                    </ul>
                </li>
                <li><a href="#">Link 4</a>
                </li>
            </ul>
        </div>
    </div>
</div>

1st problem:

Now, when you view this navbar on your computer in its expanded entirety, it works fine - the items are centred and whatnot. However, when you collapse the kit and caboodle, the 3-icon-bar button is always active and there's no way of hiding the items in the navbar.

2nd problem (ties in with first):

Not to mention, when you click it, it switches between two states - one which causes the Link-3 dropdown menu to overlap Link 4, resulting in another scroll bar to navigate between the sublinks (this state I don't want) - and the other state causes there to be no scroll bar, instead resulting in the dropdown menu overlapping the bottom of the navbar (this I want). Therefore, what I'm trying to do is making it so that the two states are: 1. everything is hidden, 2. Link 3 when hovered over doesn't result in a scroll bar.

3rd problem:

Also, when you click on Link 3, Link 3 gets pushed up, out of its alignment with Links 1 and 2 - I'd just like for it to respond as if nothing happened - you're still just hovering.

Last problem:

This has to do strictly because of the commented out part in the CSS code above, but as a result of this code, the content in the footer navbar (which you can't see) is also centered. For this problem, I just want an explanation because once again, that @media (min-width:768px) stuff does it.

Note: all these problems arise because of @media (min-width:768px) {} being commented out in the CSS. If you suggest uncommenting the commented out part, it's fine by me, but when you go to the mobile view, the formatting of the items in the navbar isn't the same as it is when that part is commented out. Plus, you still have the scroll bar for the dropdown. There's probably an easier way of fixing this all by keeping in the part that I commented out and instead adding something to the CSS that applies similar formatting to the items when the navbar is collapsed without going through all the aforementioned problems, but I can't seem to get it. If you can though, thanks so much.

I know this is a lot to ask but tackle what you can, and thanks in advance! And if there's some additional code you need from me to better understand wtf is going here, just lemme know.

And I'm using Bootstrap 3.2.0.

---

In your design, you are using the following CSS:

.navbar-nav > li:hover > .dropdown-menu {
  display: block;
}

Which is creating that scrollbar/hover deal. In all reality, as discussed in the comments, it may not be a great idea to implement this in a mobile design because hovering is something that is not possible to achieve with touch-only devices.

In other words

The conclusion is to just take out this feature and continue with an easy drop-down. You, however, still have a drop down menu for your desktop devices. An example is below.

DEMO