Increase the font size of the navigation bar on smaller screens

On smaller screens like mobile devices, I am having trouble increasing the font size of the navigation bar menu items. While it displays well on desktop screens, the font size becomes very small and difficult to read when the screen collapses to a mobile view.

I attempted the code below to address this issue, but unfortunately, it did not work. Note: The website is built 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>
htmlcssnavbar

Answer №1

To optimize for mobile devices, consider adopting a mobile-first approach.

Begin by setting the desired font size for mobile displays and then adjust it for larger desktop screens using media queries:

#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>

Answer №2

#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>

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Accessing information from a database and showcasing it within a tooltip

I have successfully implemented a tooltip feature using JavaScript and integrated it into an HTML page. Check out the code snippet below: $(document).ready(function () { //Tooltips $(".tip_trigger").hover(function (e) { tip = $(this).find('.tip&a ...

phpjavascriptjqueryhtmlcss

Sending the value from a for loop through AJAX and populating it into a form field

Currently, I have implemented a piece of JavaScript code that captures user input, sends a request to an endpoint using AJAX, and appends a specific field from the returned results as an option within a datalist. This functionality is working perfectly fin ...

javascripthtmljsonajax

apply full width styling to bootstrap select dropdown

<div align="center" class="form-group"> <select v-model="subject" class="form-control"> <option v-for="n in papertypes" class="">{{ n.type }}</option> </select> <br> By default, Bootstrap makes the s ...

cssbootstrap-4

Get notified about the number of cells you've selected by simply dragging on a table

Is there a way to display the number of selected cells in a table when dragging with the mouse? I have a table set up, and I'd like to create an alert that shows how many cells are selected while dragging. Here is the link to my fiddle: http://jsfiddl ...

jqueryhtmlcssarrays

What would be your approach to incorporating code highlighting while scrolling?

Is there a library available or what would be the best way to create a blog page with code highlighting similar to Stripe's documentation? I want the code on the page to highlight as the user scrolls, just like in the Stripe documentation. Any recomme ...

javascripthtml

Ensure that images in a browser maintain their proportions without distortion on all device screens and orientations by setting their height and width to match the

I'm working on a slideshow component in React and I want the images to dynamically adjust to fit any device screen size and orientation. The goal is for the image to resize proportionally until it reaches either the top and bottom edges or left and ri ...

javascriptcssreactjsscreenfullscreen

Flexible layout of perfectly square elements

I am currently working on creating a responsive grid layout consisting of squares that are positioned absolutely within their parent element. The goal is to ensure that when the page is resized, the squares scale proportionally with their parent container ...

javascripthtmlcss

Scaling of SVG elements with a fixed canvas size across different end-user resolutions

I am currently using Power BI and the HTML Content visual to create a .svg image. The canvas default size is 1280x720, which cannot be changed. I designed the .svg in Canva at 1920x1080 resolution to accommodate both 720P and 2K users. To make the .svg dyn ...

htmlxmlimagesvgpowerbi

Tips for centering a video vertically within a cell

I need assistance with aligning a video in the center of a fixed height cell while hiding the overflow at the top and bottom. Here is what I have so far: <table width="100%" border="0" cellspacing="0" cellpadding="0"> <tr> <td height ...

htmlcsshtml5-video

Customize the appearance of every other column in an asp gridview

Looking for help with formatting rows and columns in an ASP GridView. The rows are automatically colored alternating, and I want to make the content in every first column bold and every second column normal. I have heard about using CSS nth-child() to achi ...

c#javascriptjqueryasp.netcss

Adjusting the quantity of buttons in real-time following an ajax request

Creating buttons dynamically in an Ajax success function can be a challenge when the number of buttons varies each time. I am able to create the buttons, but since the exact number is unknown, adding the correct number of button listeners becomes tricky. ...

javascripthtmlajax

Implementing Click function to selectively display a single object within a JSON array

In my JQUERY code, I've created a .each loop that iterates through data in a JSON file and populates the content into small thumbnails. When you click on a thumbnail, it should display the corresponding content on the post page. The issue I'm fa ...

jqueryhtmljsonajax

Updating a Div on your webpage using a JQuery UI dialog: A step-by-step guide

I am currently trying to update my webpage from a JQuery UI dialog, but the code I have so far does not seem to be working. Any assistance or guidance would be greatly appreciated. function submit_new_site() { // These are the input text IDs on the ...

javascriptjqueryhtmljquery-ui

Arrange the array in chronological order based on the month and year

I'm looking for assistance with sorting an array by month and year to display on a chart in the correct order. Array1: ['Mar19','Apr18','Jun18','Jul18','May18','Jan19'....]; Desired Output: ...

javascripthtmlarrayssorting

Error encountered: Unrecognized media in CSS validation and parsing issue

I've been having trouble validating my CSS and keep encountering error messages. Despite ensuring I have closing brackets, there are parse errors on line 39 and unrecognized media issues on lines 79 and 81. Additionally, lines 70 and 89 also trigger p ...

htmlcss

Enhancing VueDraggable (sortable.js) with drag out feature

I am currently utilizing VueDraggable for effortless and efficient sorting of elements. However, I am in need of a feature that detects when a dragged element leaves its parent so that a particular function can be executed. To provide some context, think o ...

htmlvue.jsdrag-and-drop

activating the web element located using Selenium in Java

What is the best way to click on a webelement based on the data-key in the class _3d5d? Specifically, if a user inputs the value 2002, an error message should inform the user "no such year, please enter again" and allow for a re-entry of the value. If the ...

javahtmlseleniumif-statement

Substitute the division

Can I make the old div change its position and move to the side when I add a new div? And can all the old divs be hidden when adding four new divs? This is for my full news website and I want this applied to all four pages. First page: https://i.sstatic. ...

javascripthtmljquerycss

What is the best way to incorporate a custom HTML tag into this PHP array?

Is there a way to integrate my own HTML tag into a section of PHP code? Specifically, I'm referring to the portion "This part needs an HTML tag". <div id="downbarek2"> <?php $vid = 59; function termSort($a, $b) {return st ...

phphtmlarraysdrupal

Unexpected behavior of Codeigniter sessions

In my system, I am storing various session data such as id, type, isloggedin and a session called comp_city where I keep the name of a city. Recently, I set the value of comp_city to 'San Francisco' successfully. However, when I redirected to an ...

phpjavascripthtmlcssphpmyadmin