htmlcssnavbar

nav bar font size increase in small screen

I wish to increase the font size of the nav bar menu item on a small screen like a mobile. Normally it works fine on a desktop screen but when the screen collapses to mobile it also works as usual but the menu font size is very small to read. for this, I tried the code below but it didn't work. Note: I am using bootstrap 4

#m1 {
    color: darkblue;
    font-weight: 450;
    font-size: 1.25rem;
    font-weight: bold;
     @media ( min-width:375px){
      font-weight:bolder;
    }
    
  }
#m1:hover {
    text-decoration: underline;
    text-decoration-color: red;
}
.nav-item {
    list-style-type: disc;
    padding: 1.1;
    margin-left: .5cm;
    margin-right: .0cm;
}
<div class="collapse navbar-collapse" id="MyNavBarDiv">
      <ul class="navbar-nav ml-auto" style="margin-right: 60px;" >
        <li class="nav-item">
          <a class="nav-link" id="m1" href="index.html">Home</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" id="m1" href="#">About-us</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" id="m1" href="#">EduCare</a>
        </li>
     </ul>
</div>

Kindly help.

Solution 

  • #m1 {
    color: darkblue;
    font-weight: 450;
    font-size: 1.25rem;
    font-weight: bold;
     @media ( min-width:375px){
      font-weight:bolder;
      font-size : 1 rem;
    }
    
  }
#m1:hover {
    text-decoration: underline;
    text-decoration-color: red;
}
.nav-item {
    list-style-type: disc;
    padding: 1.1;
    margin-left: .5cm;
    margin-right: .0cm;
}
    <div class="collapse navbar-collapse" id="MyNavBarDiv">
      <ul class="navbar-nav ml-auto" style="margin-right: 60px;" >
        <li class="nav-item">
          <a class="nav-link" id="m1" href="index.html">Home</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" id="m1" href="#">About-us</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" id="m1" href="#">EduCare</a>
        </li>
     </ul>
</div>