Is it possible to achieve Bootstrap 3-style for the mobile navbar menu in Bootstrap 4?

In the world of Bootstrap 4

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

Comparing to Bootstrap 3

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

Seeking to replicate Bootstrap 3's menu in Bootstrap 4?

This code snippet showcasing Bootstrap 4's menu can be found at :

<div class="container">
      <nav class="navbar navbar-light bg-faded">
        <button class="navbar-toggler hidden-sm-up" type="button" data-toggle="collapse" data-target="#navbar-header" aria-controls="navbar-header">
          &#9776;
        </button>
        <div class="collapse navbar-toggleable-xs" id="navbar-header">
          <a class="navbar-brand" href="#">Navbar</a>
          <ul class="nav navbar-nav">
            <li class="nav-item active">
              <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
            </li>
            <li class="nav-item">
              <a class="nav-link" href="#">Features</a>
            </li>
            <li class="nav-item">
              <a class="nav-link" href="#">Pricing</a>
            </li>
            <li class="nav-item">
              <a class="nav-link" href="#">About</a>
            </li>
          </ul>
          <form class="form-inline pull-xs-right">
            <input class="form-control" type="text" placeholder="Search">
            <button class="btn btn-outline-success" type="submit">Search</button>
          </form>
        </div>
      </nav> <!-- /navbar -->
</div><!-- /container -->
htmlcsstwitter-bootstraptwitter-bootstrap-4bootstrap-4

Answer №1

To implement custom styling in Bootstrap 4, you will need to incorporate CSS and media queries to control the behavior of the menu at different screen sizes. Here is an example of how you can achieve this:

Check out this fiddle with customized styles for the Bootstrap 4 navbar: Bootstrap 4 Navbar Fiddle

@media(max-width:33.9em) {
  .navbar .collapse {max-height:250px;width:100%;overflow-y:auto;overflow-x:hidden;}
  .navbar .navbar-brand {float:none;display: inline-block;}
  .navbar .navbar-nav>.nav-item { float: none; margin-left: .1rem;}
  .navbar .navbar-nav {float:none !important;}
  .nav-item{width:100%;text-align:left;}
  .navbar .collapse .dropdown-menu {
    position: relative;
    float: none;
    background:none;
    border:none;
  }
}

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

Implement a jQuery feature to gradually increase opacity as the user scrolls and the page loads

On a dynamically loaded page via pjax (except in IE), there are several links at the bottom. Whenever one of these hyperlinks is clicked, the page scrolls to the top while still loading. Although I am okay with this behavior, I'm curious if it' ...

javascriptjqueryhtmlcsspjax

When an HTML table utilizes both rowspan and colspan attributes, it may encounter issues with being overlapped by the

I'm working on a straightforward table that showcases the properties of a data element. Each row will represent an element from the AJAX response in a list format. The table is designed with "rowspan" and "colspan" to expand specific cells. However, ...

htmlcsshtml-table

The PowerShell script has misplaced the HTML formatting

I am a beginner in scripting and I have two questions. I wrote a .ps1 script to identify devices with less than 10% free space: Get-Content "C:\temp\servers.txt" | Sort | ForEach { $computer = $_ $disks = @(Get-WmiObject Win32_LogicalDisk -Com ...

htmlpowershell

Generating safe HTML output in PHP requires adding 4 spaces before the code

I'm currently designing a form that generates basic HTML and other plain text output for users to copy and paste into a content management system. For setting up the variables, I follow this structure: $date1 = $_POST['date1']; $city1 = $_ ...

phphtml

Acquire HTML content and save it in a MYSQL database: A Step-by-Step Guide

How can I effectively store an HTML page with CSS in a MYSQL database? Is this even feasible? What type of column should be used for storage? And how can I retrieve the stored formatted HTML and display it correctly using PHP? If the page contains imag ...

phpmysqlhtml

Shorten certain text in Vuetify

Here's an example of a basic select component in Vuetify: <v-select :items="selectablePlaces" :label="$t('placeLabel')" v-model="placeId" required ></v-select> I'm looking to apply a specific style to all selec ...

javascriptcssvue.jsvuetify.js

What sets the Virtual DOM apart from the Shadow DOM?

During my exploration of Vue.js, I delved into the realm of shadow DOM to grasp the essence of a fundamental Vue.js Component. As I studied shadow DOM and its similarities to virtual DOM, I embarked on a quest for diverse information pertaining to both con ...

htmlreactjsdomvue.js

Responsive design

Is it possible to change the background-color of the h1 element when the browser ratio is 4:3? I've attempted using the aspect-ratio property in my media query, but it doesn't seem to be working. Any suggestions on how to resolve this issue? Che ...

cssmedia-queriesaspect-ratio

Executing an .exe file directly through a web browser (using any method)

Currently, I am managing various devices within a local network through a page. However, there are certain advanced settings that can only be accessed by using an .exe file located on the computer where the configuration page is run. I would like to stream ...

htmlflashbrowserexe

I am having trouble displaying my mysqli table correctly. I could use some help troubleshooting my code as I am unable to locate the error

After implementing Bootstrap, I am facing an issue with the table display on my new page. The code works perfectly fine on the old page, but for some reason, it's not showing correctly on the new one. Upon inspection, I suspect that mysqli_close and a ...

phphtmlmysqlmysqli

AngularJS Bootstrap directive not properly displaying template

Utilizing a custom directive to dynamically generate two columns in a row, I have successfully achieved the desired design using Bootstrap. The layout can be viewed in the image linked below. https://i.sstatic.net/MWX8v.png Below is the HTML code: <d ...

angularjsbootstrap-4

Generating an HTML table using data from a specified URL source

As a beginner, I am working on creating a dashboard for my smart home using OpenHab2.0. One of the key features I want to include is a widget that displays the next 5 tram departures from my local stop. The table structure for this information looks like: ...

htmlopenhab

I am looking to transfer the value of one textbox to another textbox within a dynamic creation of textboxes using JavaScript

var room = 1; function add_fields() { room=$('#row_count').val()-1; room++; var objTo = document.getElementById('education_fields'); var divtest = document.createElement("div"); divtest.setAttribute("class", "form- ...

javascriptjqueryhtmlajaxtwitter-bootstrap

Tips on assigning a value to a dynamically generated drop-down element

I used arrays of strings to populate drop-down menus. Is there a way to automatically set the value of each option to match the text content? el.value = opt; seems to be ineffective. var validCoursesKeys = ['opt 1','opt 2','opt ...

javascripthtml

making the div tag invisible when the if statement is satisfied

Is there a way to hide a <div> element if my data equals zero? I have an if condition set up as follows: if ($_SESSION['m1'] == 0) { I want the <div> tag to be deactivated, here is the code snippet for the <div> in question: ...

phpjavascripthtml

Guide on Generating Dynamic JSON to Set and Retrieve Values for Forms and Displaying the Bound Values

I'm a beginner in Ionic 3 and I'm having trouble creating a page that redirects to another page without validation. I want to display the data on the new page, but it's not working. Please help! I also want to create a dynamic JSON object a ...

javascripthtmlangularionic-framework

Remove the initial DIV element from the HTML code

I have created a unique chat interface by combining JScript, php, and jquery. The chat messages are saved in an HTML document that gets displayed in the text area. Each user input message is contained within its individual div tag: <div>Message</ ...

javascriptjqueryhtml

What is the method for showing the comment associated with a particular row that I wish to modify?

A commenting system is being implemented using jQuery, Ajax, PHP, MySQL, and HTML. There seems to be an issue where clicking the Edit button displays the comment of the first row in the MySQL table instead of the selected row. However, after editing, it do ...

phpjqueryhtmlmysqlajax

Please indicate the decimal separator for the Number() function

UPDATE : TITLE IS MISLEADING as testing showed that Number() returned a dot-separated number and the HTML <input type="number"/> displayed it as a comma due to locale settings. I changed to using an <input type="text"/> and filtered keydown lik ...

javascripthtmlangularjs

Transitioning classes in Vue elements

Is it achievable to create a smooth transition between two CSS classes with different background images? That's the challenge I'm currently facing. Here is the Vue code snippet I am working on: <div id="flip-list-demo" class="demo"> & ...

javascriptcssvue.jstransition