Change navbar height on resize

[SteinTheRuler]

Hi!

I want to alter the navbar height property on devies with small screens, so I created a @media rule but nothing changes on resize.

This is what I have so far:

@media (min-width: @screen-sm-min) {
    .navbar {
        min-height: 20px;
    }

    .navbar-brand {
        padding: 8px;
        height: 20px;
        line-height: 20px;
    }

    .navbar-brand, navbar-nav li > a {
        line-height: 20px;
        height: 20px;
        padding-top: 0px;
    }

    .navbar-toggle {
        margin-right: 18px;
    }
}

So what Im a doing wrong?

Any tips will be highly appreciated

[SteinTheRuler]

Here's the latest code. Butt its still not doing what I want


@media (max-width: 768px) {
.navbar {
min-height: 20px;
}

.main_content_wrapper > .navbar, .main_content_wrapper .navbar-nav {
display: inline-block;
float: none;
position:relative;
}

.main_content_wrapper > .navbar-nav > li > a, .navbar-brand {
padding-top: 0px !important;
padding-bottom: 0 !important;
margin: 0px;
height: 102px;
line-height: 94px;
font-size: 28px;
}

.navbar-toggle {
margin-right: 18px;
}
}

I will really appreciate all the help I can get