Alter NavBar высота используя @media правило

Question

У меня есть эта Navbar с правилом @media

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

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

    .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; 
     background-color: pink: 
    } 

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

.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-nav > ul > li > a:hover { 
    opacity:0.8; 
} 

.navbar-brand { 
    padding:0px; 
} 

.body-content { 
    width:100%; 
} 
.navbar-collapse { 
    height: 172px !important; 
    text-align: center; 
    background-color: #aaa439; 
} 

.navbar-collapse > navbar-nav { 
    line-height: 14px; 
    font-size: 14px; 
} 

.navbar-brand a:hover { 
    color:white; 
    opacity:0.8; 
} 

И это мой файл макета, где я ссылаться на все CSS и т.д.

<link href="/CSS/theme.pre.css" rel="stylesheet" /> 
<environment names="Development"> 
    <link rel="stylesheet" href="/lib/bootstrap/dist/css/bootstrap.css" /> 
    <link rel="stylesheet" href="/CSS/theme.css" /> 
</environment> 
<environment names="Staging,Production"> 
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" integrity="sha384-rwoIResjU2yc3z8GV/NPeZWAv56rSmLldC3R/AZzGRnGxQQKnKkoFVhFQhNUwEyJ" crossorigin="anonymous" 
      asp-fallback-href="/lib/bootstrap/dist/css/bootstrap.min.css" 
      asp-fallback-test-class="sr-only" asp-fallback-test-property="position" asp-fallback-test-value="absolute" /> 
    <link rel="stylesheet" href="/CSS/theme.min.css" asp-append-version="true" /> 
</environment> 
<link href="/CSS/theme.styles.css" rel="stylesheet" /> 
<link href="/CSS/styles.css" rel="stylesheet" /> 

То, что я хочу заключается в изменении высоты навигационной панели на небольших экранах. Я читал о правилах @media и пытался заставить его работать, но не повезло:/

Любая помощь будет высоко оценена! спасибо

Answer 1

Может попробовать это, но с нужной высоты

@media (max-width: 767px) { 
    .navbar { 
     height: 50px; /* Set a new height for your navbar */ 
    } 
}