What steps should I take to ensure that the navbar is responsive and mobile-friendly?

After creating a navigation bar in an ejs file, I included it in all the files. The issue is that it looks fine on desktop view but does not respond well on mobile devices. There is some space left on the screen and it's not utilizing the entire width on mobile.

<nav class="navbar navbar-expand-lg navbar-dark bg-primary">
 <!--   <a class="navbar-brand" href="#"></a> -->
  <button class="navbar-toggler" type="button" data-toggle="collapse" data- 
  target="#navbarColor01" 
  aria-controls="navbarColor01" aria-expanded="false" aria-label="Toggle 
  navigation">
      <span class="navbar-toggler-icon"></span>
  </button>
  
  <div class="collapse navbar-collapse" id="navbarColor01">
      <ul class="navbar-nav mr-auto">
      <li class="nav-item active">
          <a class="nav-link" href="/users/home">Home <span class="sr-only"> 
   (current)</span></a>
      </li>
 // other menu items...
              
      </% if(objUser.isManager) { %> 
      <li class="nav-item dropdown" >
          <a class="nav-link dropdown-toggle" id="navbarDropdownMenuLink-4" data-toggle="dropdown" 
         aria-haspopup="true"
          aria-expanded="false"> Manage Approvals</a>
          <div class="dropdown-menu dropdown-menu-right dropdown-info" aria- 
        labelledby="navbarDropdownMenuLink-4">
          <a class="dropdown-item" href="/approvals/pldFormApprovals">PLD Form Approval</a>
          <a class="dropdown-item" href="/approvals/expenseApprovals">Expense Approval</a>
          <a class="dropdown-item" href="#">Procurement Approval</a>
          </div>
      </li>
      <% } %>
      
      </ul>
      <form class="form my-2 my-lg-0">
      
 // user details section...

  </div>
  </nav>

On mobile view, it appears like this:

https://i.sstatic.net/PbN6Q.png

I include this file using <% include ./partials/navbar %>

javascripthtmlcssnode.js

Answer №1

If you're looking to customize the style of a page element based on screen size, Media Queries is the way to go.

Check out the code snippet below for an example.

In this code, different background colors are applied to an element depending on the device being used by the visitor.

/* Default background color is blue */
.cool { background-color:blue; } 

 /* Change background color to orange for tablets (640px) */
@media (min-width: 640px) {
  .cool  { background-color:orange; }
}

/* Switch background color to yellow for laptops */
@media (min-width: 1024px) {
  .cool  { background-color:yellow; } 
}

/* For desktops, set background color as red */
@media (min-width: 1280px) {
  .cool  { background-color:red; } 
}

I'm utilizing min-width instead of max-width because it triggers the CSS rule once the screen width hits the specified minimum value.

<div class="cool">
   you are cool!
</div>

Find more information here:

JSFiddle Demo

Learn about @media at W3schools

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

Issue with changing the height of a textarea in a mobile browser when it is

I'm currently facing an issue specific to mobile devices that I have also encountered on Google Chrome (even when using the developer tools in mobile view). The problem is quite straightforward. There is a simple form on the website, consisting of a ...

htmlcssmobile-websitemobile-browsermobile-chrome

Tips for resolving the error message "cannot read property of undefined"

I've been working on coding a Discord bot and I keep encountering an error when trying to check if "mrole" has the property "app". It's not functioning as expected and I'm puzzled by why this is happening. My intention is to retrieve the te ...

javascriptnode.jsdiscord.js

"Angular allows for the creation of nested div elements using its powerful functionalities

In my file, I have the following code: <kendo-chat [messages]="feed | async" [user]="user" (sendMessage)="sendMessage($event)"> </kendo-chat> After it is loaded in the browser, the code looks like this: <kendo-chat> < ...

htmlangular

Challenges associated with Bootstrap toggle switch

I am having some difficulties with using bootstrap switch. I have tried the examples provided on , but regardless of the classes I apply, the buttons remain the same small size and the text for ON and OFF is barely visible. I can't seem to figure out ...

twitter-bootstrapcssbuttontwitter-bootstrap-3

What could be causing my browser to not respond to the JavaScript function for clicking?

I have been struggling to get the images on my browser to change when I click on them. Despite my efforts, I haven't found a solution yet... I've experimented with changing the variables to ".jpg" and also tried removing them altogether. var ...

javascripthtml

React Router updates the URL path without actually rendering the content of the second page

I'm having an issue with my React app where the address changes correctly in the search bar, but the page is not loading. Here is my code: import React from "react"; import ReactDOM from "react-dom"; import "./index.css"; import App from "./App"; i ...

javascriptreactjsreact-router-dom

Encountering the message "Error R10 (Boot timeout) - Web process was unable to bind to $PORT within 60 seconds of launching" while working with Node.js

Currently, I'm in the process of developing an API on NodeJS using express and encountering an issue when trying to deploy it to Heroku: Error R10 (Boot timeout) -> Web process failed to bind to $PORT within 60 seconds of launch Although I&apos ...

node.jsexpressheroku

Rotate each row of the table in sequence with a pause between each flip

I have a table with 3 columns and 10 rows. I would like to flip each row one by one, where each row contains data on both the front and back sides. The flipping animation should be similar to the example provided in this link, but the flipping should sta ...

javascripthtmlcss

Generate a dynamic animation showcasing transparency effects, uncovering the intricate Mesh structure within threejs

Is there a way to achieve a linear animation in THREE.JS that reveals a complex 3D mesh from the bottom to the top, similar to a slideUp effect in 2D jQuery objects? After searching for options such as opacity channels or maps, it seems that they are not ...

javascriptthree.jswebgl

Passing props from pages to components in NextJS: A guide

My nextjs-application has a unique folder structure: components -- layouts --- header.tsx --- index.tsx pages -- index.tsx -- [slug].tsx In the [slug].tsx file, I utilize graphql to fetch data and set the props accordingly: export default ...

javascriptreactjstypescriptnext.js

Is there a way to update the background dynamically?

I'm currently developing a weather application and I want the background to change dynamically based on the data retrieved from an API. Initially, I set up a variable and utilized an if statement for this purpose. However, I encountered difficulty in ...

javascriptreactjs

Tips for effectively sending data using slug.js in React.js

I'm a beginner in Next.js and I'm currently working on integrating the [slug.js] page. I'm wondering how to effectively manage and retrieve data for similar blogs in the sidebar. When it comes to blog details, I have successfully utilized "g ...

javascriptreactjsnext.js

Can the value in a JavaScript object be updated dynamically when a button is clicked?

In my JavaScript code, there is an object named annualPlan. Whenever a user submits the HTML form for a specific month, I aim to update the value in the object for that particular month accordingly. For instance, if someone submits August 21 and 200, I w ...

javascripthtmlcss

Sequelize: Performing a permanent delete and adding new records to a table

For my project, I have a requirement to delete and insert the same data into a table. However, I have noticed that after the delete operation, the data appears to still be present in the database. It seems like a soft-delete was performed, as some items a ...

node.jssequelize.jsazure-functions

What causes Next.JS to automatically strip out CSS during the production build process?

Encountering unpredictability in CSS loading while deploying my Next.JS site. Everything appears fine locally, but once deployed, the CSS rules seem to vanish entirely. The element has the attached class, yet the corresponding styling rules are nowhere to ...

javascriptcssreactjswebpacknext.js

Operating a node server with Express and dist folder, along with an added js folder

I have set up a server using nodeJS and I have successfully integrated the dist folder generated by webpack. In my server.js file, I am using the following code to serve the static files: app.use(express.static(path.join(__dirname, "dist"))) Along with ...

node.jsexpresswebpackfrontendbackend

Retrieve the hostname and port from the req object using Node.js and Express

There are times when I need to send a specific URL in an email from my node application or when I want to assign the content of a phantom page object. In my deployment setup, I receive the complete URL like this: 'http://' + req.hostname + &apo ...

node.jsexpressproxyhostname

The function this.$set is failing to update an array in VueJS

I am facing an issue where the console log shows me the updated array xyz, but when I try to print it in the DOM using {{xyz}}, it does not update. Can anyone shed some light on why this might be happening? data() { return { xyz: [] } }, met ...

javascriptarraysvue.jsvuejs2

Discovering whether x is equal to any value within an array using JavaScript

I am seeking a way to modify my current if statement, which looks like this: if (x==a||x==b||x==c||x==d||x==e) { alert('Hello World!') }; Is there a method to test whether x matches any of the values in an array such as [a,b,c,d,e]? Your as ...

javascriptarraysif-statement

What steps do I need to take to have Greasemonkey execute a function upon the completion of an AJAX call

Whenever I select the trending tab on YouTube, an AJAX call is triggered to retrieve the latest trending videos. I have developed a custom script that filters out any videos I have already watched. Although this script successfully applies to the homepag ...

javascriptajaxevent-handlingyoutubegreasemonkey