I am trying to have a menu that reduces in font size as the browser window gets smaller. Here's what I've got:
Css:
@media screen and (max-width : 1115px) {
/*Make font on menu smaller*/
nav a {
font-size: smaller;
}
}
nav a {
text-decoration: none;
display: inline-block;
border-bottom: 3px solid transparent;
transition: 0.5s ease;
white-space: nowrap;
height: 20px;
color: #171581;
padding: 8px 8px 8px 8px;
font-family: HelveticaNeue-Thin;
font-weight: 100;
font-size: medium;
}
HTML
<nav>
<label for="show-menu" class="show-menu"></label>
<input type="checkbox" id="show-menu" role="button">
<ul id="menu">
<li><a href="#" class="top-menu" id="about">About</a></li>
<li><a href="#" class="top-menu" id="residential">Residential & Business</a></li>
<li><a href="#" class="top-menu" id="myaccountdetails">My Accounts Details</a></li>
<li><a href="#" class="top-menu faqs active" id="faq">FAQ</a></li>
<li><a href="#" class="top-menu" id="contactus">Contact us</a></li>
</ul>
</nav>
As far as I can tell from what I've read on the forum this should be working but when I resize the window there is no effect.
This question is not an exact duplicate. This post is asking what was wrong, the other post is asking why it is this way.
font-size: medium; is always applied as it appears after the media query. Simply re-order your styles:
nav a {
text-decoration: none;
display: inline-block;
border-bottom: 3px solid transparent;
transition: 0.5s ease;
white-space: nowrap;
height: 20px;
color: #171581;
padding: 8px 8px 8px 8px;
font-family: HelveticaNeue-Thin;
font-weight: 100;
font-size: medium;
}
@media screen and (max-width : 1115px) {
/*This is later in the order of styles, so will be applied when the screen is <= 1115px */
nav a {
font-size: smaller;
}
}