Styling the font size in a nav bar
You could remove all the duplicate lines in the @media queries and provide only the changes in these tags. This is beacause in CSS, the CSS classes that are interpreted by the browser down-most on your page, are the ones prevailing in your final design. All previous defined CSS rules apply unless overwritten. In your case this means that only the font-size changes and should be redefined:

.navButtonText p {
    text-align: center;
    margin: auto;
    font-family: 'Indie Flower', serif;
    font-weight: 900;
    color: gray;
    font-size: 20px;
    line-height: 20px;
    vertical-align: middle;
    margin-top: 6px;
}
@media only screen and (max-width: 650px) {
    .navButtonText p {
        font-size: 18px;
    }
}
@media only screen and (max-width: 550px) {
    .navButtonText p {
        font-size: 16px;
    }
}
@media only screen and (max-width: 450px) {
    .navButtonText p {
        font-size: 14px;
    }
}
@media only screen and (max-width: 350px) {
    .navButtonText p {
        font-size: 12px;
    }
}


FYI: there is away to prevent this from happening, using the !important tag.