How to make font size in navigation stay the same when fixed?

Question

On mobile sites, as someone zooms in on the page the navigation text becomes bigger and takes up more room on the navigation bar. The same thing happens when zooming on desktops but I'm ok with that.

/* Navigation
--------------------------------------------------------------------------------*/
.nav-container-fixed {
top: 0;
z-index: 100;
position: fixed;
width: 100%;
min-width:100%;
}

#nav-wrap .nav-container {
float:right;
right:0em;
text-align:left;
padding-left:0%;
position: fixed;
top:0%;
z-index:300;
background:#242424;
border-bottom: 1px solid #fff;
border-top:60px solid #fff;
margin-top:-18px;
min-width:100%;
max-width:100%;
height:2.9em;
max-height:2.9em;
opacity:0.96;   
}

#nav-wrap .nav-container  ul{
float:right;
list-style:none;
position:relative;
left:0%;
z-index:2;
padding-left:0px;
}

#nav-wrap .nav-container  li{float:left;position:relative;}

#nav-wrap .nav-container a{
text-decoration:none;
font:600 16px 'Josefin Sans', sans-serif,bold;
text-transform:inherit;
margin:10px 20px;
float:left;
color:#fff;
letter-spacing:2px;
text-align:right;
white-space:nowrap;
padding-top:5px;
overflow:hidden;
position:relative;
font-size:relative !important;
}
#nav-wrap .nav-container a:hover{
-webkit-animation-name: spaceboots;
-webkit-animation-duration: 0.8s;
-webkit-transform-origin:50% 50%;
-webkit-animation-iteration-count: infinite;
-webkit-animation-timing-function: linear;
border-bottom:1px dashed #ff0000;
}
#nav-wrap .nav-container li#active a {
border-bottom:3px solid #5882FA !important;
}
#nav-wrap .nav-container a:active{
padding:2px 2px 0px;
}
#nav-wrap {overflow:hidden}/* hide horizontal scrollbar*/

.

Answer 1

You should use media queries for maintaining different font sizes in different resolutions. like for h1

h1 {
  font-size: 2em;
  /* 2x body copy size = 32px */
  line-height: 1.25;
  /* 45px / 36px */
}

@media (min-width: 43.75em) {
  h1 {
    font-size: 2.5em;
    /* 2.5x body copy size = 40px */
    line-height: 1.125;
  }
 }

@media (min-width: 56.25em) {
 h1 {
font-size: 3em;
/* 3x body copy size = 48px */
line-height: 1.05;
/* keep to a multiple of the 20px line height 
and something more appropriate for display headings */

} }

Answer 2

I found an alternate solution for my problem, I used a mate tag to disable zooming/pinching on mobile devices, however this meta tag I rewrote myself after finding one similar on the internet. I had to make sure that minimum-scale was set to "0" and maximum-scale was set to "1" without stating the initial-scale.

With this mobile devices will automatically detect the size of your website + on landscape your site grows even clearer!!!