[SOLVED] Adjust navbar minimum height depending on screen width

I am using bootstrap and have set a minimum height of 150px for the navbar. This works but I want to re-adjust the minimum height to 30px when the screen width is lower than 768px.

I am using the class .navbar-min-height to set the minimum width thus trying to call that class again under @media with the new min-height pixels but the navbar remains the same height of 150px. Anyway I can get around this?

CSS File

/* works */
.navbar-min-height{
    min-height: 150px;
}

@media only screen and (max-width: 768px) {
    /* Not working */
    .navbar-min-height{
        min-height: 30px;
    }
}

Html Page

<nav class="nav navbar navbar-fixed-top navbar-min-height navbar-custom">
    ......
</nav>