Html Question posted in
Some basic documentation can be found here.

Html – 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.

Tags:

2

Answers


  1. 0 
    #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>
    Login or Signup to reply.
  2. 0

    A mobile first approach would work nicely here.

    Start with the font-size you want for mobile then increase it at the desktop min-width:

    #m1 {
    color: darkblue;
    font-weight: 450;
    font-size: 2rem;
    font-weight: bolder;
     @media ( min-width:768px){
      font-weight:bold;
      font-size: 1.25rem;
    }
    
  }
#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>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search