Bootstrap 3: Hide main navbar on Desktop - css

Question

I know this is fairly simple but I got stuck trying to hide the Bootstrap main navbar on screens greater than 768px.
I don't want to hide the <nav> tag. I just want to hide the <div class="collapse navbar-collapse navbar-default custom-menu" id="navbar-collapse-1">...</div>
jsFiddle
<nav class="navbar-blue" role="navigation">
<div class="container">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header navbar-default">
<button type="button" class="navbar-toggle navbar-menu" data-toggle="collapse" data-target="#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>
<!-- User menu to show on screens < 768px -->
<div class="collapse navbar-collapse navbar-default custom-menu" id="navbar-collapse-1">
<ul class="nav navbar-nav client-nav navbar-right">
<li>My Profile</li>
<li>Account Settings</li>
<li>Sign Out</li>
</ul>
</div>
<!-- /.navbar-collapse -->
</div>
<!-- /.container -->
</nav>

Answer 1

Two things affecting your ability to control this style
The style that sets the display:block for the navbar uses !important. You need to override that with your own !important rule
The style you are using has lower specificity than the one that is making it display:block. The style in effect is .navbar-collapse.collapse (two classes specified), whereas yours is simply .custom-menu (only one class).
To remedy both of these you need a rule similar to this:
#media only screen and (min-width : 768px) {
.navbar-collapse.custom-menu {
display: none!important;
}
}
That will cause the menu to be hidden at those sizes.
Demo: http://jsfiddle.net/4jgL2hfy/