What's the best way to display navigation menu items exclusively for mobile view?

When viewing my navbar on desktop, it appears like this:

The mobile display is working perfectly.

I am looking to have the items in the navbar displayed one by one on desktop and remove the menu icon entirely.

This is my current code:

<nav class="navbar navbar-expand-lg navbar-inverse">
      <div class="navbar-header">
        <img src="vc-transp.png" href="#" height="50px">
        <button class="navbar-toggler" style="background-color: transparent; border-color: transparent; filter: invert(100%); padding-top: 8px;"type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
          <i class="fa fa-bars fa-2x"></i>
        </button>
      </div>
      <div class="collapse navbar-collapse" id="navbarSupportedContent">
        <ul class="navbar-nav mr-auto">
          <li class="nav-item">
            <a class="nav-link" href="#"><b>Dashboard</b></a>
          </li>
          <li class="nav-item">
            <a class="nav-link" href="#">Link</a>
          </li>
          <li class="nav-item"><a class="nav-link" href="#">Protect</a></li>
          <li class="nav-item"><a class="nav-link" href="#">About</a></li>
        </ul>
      </div>
  </nav>

.nav a{
  color: white !important;
  font-size: 20px;
}
.navbar-brand{
  color: white !important;
  font-size: 20px;
  font-family: sans-serif;
}
a:link {
  font-size: 17px;
  color: #D4E1E4;
  text-decoration: none;
}
a:visited {
  font-size: 17px;
  color: #D4E1E4;
  text-decoration: none;
}

Are there any suggestions on how I can address this issue?

htmlcssbootstrap-4navbar

Answer №1

To achieve that layout, you can utilize the default navbar template.

Once the screen width reaches 992px, the hamburger menu icon will disappear, and the menu items will be displayed horizontally.

On screens smaller than 992px, the hamburger menu will be visible, and the menu items will be shown vertically with a collapsing feature.

You can control the responsiveness using the navbar-expand-* class. In this example, I have used the navbar-expand-lg class where 'lg' corresponds to 992px.

.nav a {
  color: white !important;
  font-size: 20px;
}

.navbar-brand {
  color: white !important;
  font-size: 20px;
  font-family: sans-serif;
}

a:link {
  font-size: 17px;
  color: #D4E1E4;
  text-decoration: none;
}

a:visited {
  font-size: 17px;
  color: #D4E1E4;
  text-decoration: none;
}
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css">

<nav class="navbar navbar-expand-lg navbar-light bg-light">
  <a class="navbar-brand" href="#"><img src="vc-transp.png" height="50px"></a>
  <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
    <span class="navbar-toggler-icon"></span>
  </button>

  <div class="collapse navbar-collapse" id="navbarSupportedContent">
    <ul class="navbar-nav mr-auto">
      <li class="nav-item">
        <a class="nav-link" href="#"><b>Dashboard</b></a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Link</a>
      </li>
      <li class="nav-item"><a class="nav-link" href="#">Protect</a></li>
      <li class="nav-item"><a class="nav-link" href="#">About</a></li>
    </ul>
  </div>
</nav>

<script src="https://code.jquery.com/jquery-3.4.1.slim.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="26564956564354084c5566170817100816">[email protected]</a>/dist/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"></script>

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

Assistance with Javascript Objects Using JSON and AJAX

Currently, I am utilizing Ajax to retrieve data from my Json file. A problem I am facing is that in one particular div of my html, I need to include both a heading and a paragraph. I attempted to create a property like so: "headingpara": "<h1> blah ...

javascripthtmljsonajax

Enhancing bar border with the addition of a separator

Our current situation is similar to this: https://i.stack.imgur.com/Luj1S.png but our goal is to have a chart with separators on both sides of the age brackets, like this: https://i.stack.imgur.com/03UpO.png In order to achieve this, we have utilized t ...

jqueryhtmlcss

Resolve background image alignment issue in Firefox browser for Bootstrap carousel

I am currently utilizing this particular bootstrap template. My goal is to have the carousel background images fixed, however, when I include the following CSS: background-attachment: fixed; like so: <div class="carousel-item active" style=&q ...

htmlcssbootstrap-4

Guide on capturing JSON objects when the server and client are both running on the same system

I created an HTML page with a form that triggers JavaScript when submitted using the following event handler: onClick = operation(this.form) The JavaScript code is: function operation(x) { //url:"C:\Users\jhamb\Desktop\assignmen ...

javascriptjqueryhtmlajaxjson

Displaying CSS image slideshow images side by side

Currently I am a student studying the fundamentals of HTML and CSS. My latest project involved creating a website showcasing my work from digital arts class, complete with a simple CSS slideshow. The original intention was to have each image displayed on i ...

htmlcssimagesliderslideshow

When Electron.Net is launched, the default menu is displayed first and then switches to a custom menu upon

Currently, I am using Electron.Net to wrap an ASP.Net MVC webpage and my objective is to replace the default menu with a custom one. I have successfully implemented the custom menu code, but there seems to be an issue when running the program using electro ...

c#htmlasp.netelectronelectron.net

Exploring ways to retrieve checkbox values instead of boolean values upon submission in Angular

I am currently working with a template-driven form and facing an issue. Despite receiving true or false values, I actually need to retrieve the value of checkboxes. <form #f = "ngForm" (ngSubmit) = "onClickSubmit(f.value)"> ...

htmlangulartypescript

What is the best way to alter the state of a button when it is clicked in React, and then return it to its original state when

I'm working on a button that I've defined like this: <button className={class} onClick={() => changeClassProperty()}> {classText} </button> My goal is to update both the CSS styling class and the text of the button A when ...

javascriptcssreactjsuse-state

Require checkboxes in AngularJS forms

Currently, I have a form that requires users to provide answers by selecting checkboxes. There are multiple checkboxes available, and AngularJS is being utilized for validation purposes. One essential validation rule is to ensure that all required fields a ...

javascripthtmlangularjscheckbox

Ways to ensure the row occupies the entire height available

I am attempting to create a layout that consists of: A row with a fixed height of 3em A second row that will expand to take up the remaining available space, anywhere from almost 100% to 0% A third row with a fixed height of 3em My goal is to achieve a s ...

htmlcssbootstrap-5

Having issues with implementing the Bootstrap form-check-inline feature

I have been attempting to utilize the form-check-inline feature from Bootstrap Forms without success, as it seems to be stacking checkboxes vertically instead of inline: https://i.sstatic.net/paLTC.png This is the code snippet I am working with: <h1& ...

htmlcssbootstrap-4

OpenLayers' circular frames surrounding the icons

I am currently using openlayers and trying to implement a feature that creates a circle around the icons on the map. I have been referring to this example on Stack Overflow but unable to draw the circle successfully. Can someone please assist me with this? ...

javascripthtmlmapsopenlayersopenstreetmap

Trigger a function when a button is clicked

This is an ongoing project that includes a calculator and other features. Right now, I am working on a functionality where when you input a number into the calculator results and press "+", it should trigger onClick to check if the input was an integer o ...

javascripthtmlonclick

How to center align two child divs within a parent div using flexbox in Bootstrap 5

I'm attempting to center two child divs within a parent div, but they're displaying side by side in the center. html <div class="container mt-5 box d-flex justify-content-center align-items-center"> <i class="fa-solid f ...

htmlcssbootstrap-5

managing CSS class names containing spaces

Hey there! I'm currently working on a Django powered project. Here's a snippet of code from my HTML file (template): {% for l in items %} <td style="text-align: center" id=" ...

pythonhtmlcssdjangodjango-templates

Change the CSS property to override the text-overflow with ellipsis

In my specific scenario, I need to override the default ellipsis behavior that adds '...' to text when using 'text-overflow: ellipsis', and instead use two stars **. Is there a way to achieve this using only Pure CSS? It is important t ...

css

Is it advisable to break down views into smaller components in Vuejs?

I'm currently managing a project with two folders for components - 1) src/components/ and 2) src/views. The general components like a drawer or nav are stored in the first folder, while the pages (views) are stored in the second. Now I face a challen ...

htmlvue.jsvuejs2vuejs3components

What is the best method for adding a   character within the @Html.DisplayFor() method when referencing m.EventDetailSection.ContactAccountTel?

At the moment, my code looks like this: @Html.DisplayFor(m => m.EventDetailSection.ContactAccountTel), which displays the phone number without any spaces, such as +3194949494. I want to format it with spaces after every 2 numbers and then after every ...

javascriptc#html.netdisplayfor

Press the button to copy the content to the clipboard with JavaScript

I am struggling with copying email text in HTML within an href tag. I want the email value to be copied when a user clicks on the icon next to it, but for some reason it is not working as expected. Instead of just copying the email address, my code seems ...

javascriptc#htmljquery.net

Adjust the background color of Bootstrap 4 checkboxes

I'm trying to figure out how I can modify the background color of a Bootstrap 4 checkbox in this specific scenario. .custom-control-label::before, .custom-control-label::after { top: .8rem; width: 1.25rem; height: 1.25rem; } <link rel="style ...

htmlcssbootstrap-4