Switch up the Slide-In Animation for Desktop Navigation in Bootstrap 4

I want to create a toggle button in the desktop version of Bootstrap 4 navigation that can expand and collapse the menu items.

For example, the menu button will minimize the menu items to the left side of the screen when clicked.

[Menu]

[Menu] Link Link Link Link Link

The default Bootstrap settings do not achieve the desired outcome.

        <nav class="navbar navbar-expand-md navbar-light bg-light main-nav">
            <button class="navbar-toggler" type="button" data-toggle="collapse" data-target=".navbar-collapse">
                <span class="navbar-toggler-icon"></span>
            </button>

            <div class="collapse navbar-collapse w-100">
                <ul class="nav navbar-nav w-100">
                    <li class="nav-item active nav-breaker">
                        <a class="nav-link" href="#">Menu</a>
                    </li>

                    <li class="nav-item active">
                        <a class="nav-link" href="#">Shop</a>
                    </li>  
                    <li class="nav-item">
                        <a class="nav-link" href="#">Haircare</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="#">Gallery</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="#">Offers</a>
                    </li>
                    <li class="nav-item nav-breaker">
                        <a class="nav-link" href="#">Blog</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="#">Book Appointment</a>
                    </li>
                </ul>
            </div>

            <a class="navbar-brand order-first order-md-0 mx-0" href="#">Shear Success</a>

            <div class="collapse navbar-collapse w-100">
                <ul class="nav navbar-nav ml-auto">
                    <li class="nav-item">
                        <a class="nav-link" href="#">Sign In</a>
                    </li>
                </ul>
            </div>

        </nav>
javascriptjqueryhtmlcssbootstrap-4

Answer №1

It's not a simple task to change the default navbar animations in Bootstrap. However, I can guide you through most of the process:

  1. Ensure your markup follows Bootstrap standards as outlined here. Make sure to follow the guidelines for "With a toggler on the left... "
  2. Remove the navbar-expand-md class from the nav to have the menu collapsed by default
  3. You'll need to override Bootstrap's default styling to achieve the desired "slide in from the left" effect. It can be challenging, especially since the navbar adds a temporary class .collapsing that is easy to overlook
  4. Be prepared for responsive styling to get messy and require additional attention, such as using media queries

If you want the navbar to behave differently than what's outlined in the documentation, I've found it simpler to write custom styling and scripting from scratch, using basic classes like .navbar and .navbar-nav for styling

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

Transform the MUI Typescript Autocomplete component to output singular values of a specific property rather than a complete object

When utilizing MUI Autocomplete, the generic value specified in onChange / value is determined by the interface of the object set in the options property. For instance, consider an autocomplete with the following setup: <Autocomplete options={top ...

javascriptreactjstypescriptmaterial-ui

Angular Flot Chart Resizing: A Guide to Dynamic Chart S

I have successfully integrated a Flot chart into my HTML using an Angular directive. Here is how it looks: <flot id="placeholder" dataset="dataset" options="options" height="300px" width="100%" style="width:100%;" ng-disabled="graphLoading" ng-class="{ ...

javascriptangularjshtmlangularjs-directive

Firebase and Angular 7 encountered a CORS policy block while trying to access an image from the origin

I am attempting to convert images that are stored in Firebase storage into base64 strings in order to use them in offline mode with my Angular 7/Ionic 4 application! (I am using AngularFire2) However, I encountered an error message stating: Access to i ...

javascriptangularfirebaseangularfire2cross-origin-read-blocking

Issue with applying className to ToggleButton component in React with Material-UI

When utilizing React and Material UI, my goal is to efficiently apply styles to a group of ToggleButtons. At the moment, I am only able to specify the style prop for each individual ToggleButton in order to achieve the desired styling. I am attempting to ...

cssreactjsmaterial-uiclassname

Guide to attaching data to an AJAX request

I'm new to ajax and recently encountered an issue while working on a project where I needed to send a query from an HTML form. However, I've been unable to send any data for some reason. I tried sending FormData through the xmlhttprequest.send() ...

javascriptphphtmlajaxform-data

Display a string variable in a field using JavaScript and JQuery

I am currently coding in JavaScript using JQuery, and I am facing an issue when trying to display the content of variables in a field. Here is my code snippet: function editEvolution(pos, nature, desc, di) { $('#diE').val(di); $(&apo ...

javascriptjquery

Prevent duplicate email submissions to the database by utilizing the jQuery validation plugin with AJAX

Hello everyone, I am currently utilizing the jquery validation plugin and it is functioning properly. However, I am encountering an issue where if an email already exists in the database, the form should not be submitted until a different valid email is ch ...

jqueryajaxjquery-validateajaxform

When jQuery is used to move rows between tables, it can interfere with

When moving rows between tables, everything seems to work fine. However, once the row is moved to the other table, all JavaScript functions related to that row stop working, and the reason remains unknown. The JavaScript code is simple - it involves takin ...

javascriptjqueryhtmltablesorter

Specify the return type based on specific parameter value

I'm facing a situation where I have two definitions that are identical, but I need them to behave differently based on the value of the limit parameter. Specifically, I want the first definition to return Promise<Cursor<T>> when limit is g ...

javascripttypescripttypescript-typings

Executing SQL Query on Button Click Event

I am working with PHP and trying to execute a SQL query when a button is pressed. However, the issue I'm facing is that nothing happens when I click the button! I checked the developer console but there doesn't seem to be any action detected when ...

phpjqueryhtmlajax

"Styling a form input with YAML and implementing a jQuery date picker field

Seeking help with a CSS question related to YAML. I've been struggling all day trying to position a jQuery date field next to a YAML CSS field, but so far I can only manage to have it display underneath the input field... Is there a way for the date ...

cssyaml

Ways to update HTML content generated by Ajax

Having some difficulties modifying the HTML content generated by AJAX. This is the code snippet from the page: @model IEnumerable<WE_SRW_PeerNissen.Models.Reservations> @{ ViewBag.Title = "List"; Layout = "~/Views/Shared/_Layout.cshtml"; } ...

javascriptjqueryhtmlajax

I am having trouble with retrieving and showing Json data in a table using axios within a React component

Struggling to access JSON data using hooks to display it in the <p> tag but encountering an error - "TypeError: states.map is not a function". I attempted utilizing Array.from() to convert my JSON to an array, yet it neither displayed anything nor pr ...

javascriptreactjsreact-hooks

Component fails to trigger @click handler

.vue component <template> <div class="modal"> <div class="modal-dialog"> <div class="modal-content"> <div class="modal-header"> Loading Files </div> < ...

javascriptvue.jsvuejs2

Testing Vue Components - Simulating the return value of a plugin

I have a unique scenario where I need to mock the return value of a custom plugin without importing it directly into my test. By creating a mock function for the plugin, I can easily achieve this goal. However, I am unsure how to change the return value of ...

javascriptunit-testingvue.jsvue-test-utils

"Regardless of whether it is checked or not, the MVC 3 checkbox consistently displays as true

Below is the code snippet I am working with: @foreach (var item in Model.Defaults) { <tr class="CertainCategory"> <td> @item.Item1 </td> <td> @Html.Che ...

jqueryasp.net-mvcasp.net-mvc-3checkbox

The Box element surpasses the height of the Grid component

Homepage Component <Box component="fieldset" sx={{borderRadius:2, height:"100%"}}> Application Structure Component <Grid container> <Grid item xs={4} > <Root/> </Grid> ...

cssreactjsmaterial-uifieldset

Populating the DOM with information from handlebar based on the key's value

I am trying to display specific data from my JSON object in the DOM. Specifically, I want to add the information for keys 100 and 101 only. JSON var school = { "students": { "100": { "name": "abc", "bdate": "02/19/2000" }, "10 ...

jqueryhandlebars.js

Retrieve an array from JSON encoding using AJAX

I have been attempting to retrieve 4 JSON arrays stored in a separate file and include them in my main file using an AJAX request. However, I'm facing difficulties storing these arrays into variables and logging them in the console. Here are the resul ...

javascriptarraysjsonajax

Rendering a Pop-up for a Single Array Item Retrieved from an API in ReactJS

Apologies if my wording is unclear, this is my first question, and I'm relatively new to JS/React... I have successfully mapped through an array from an API call and displayed the necessary information. How can I display a popup for a single element ...

javascriptreactjsarrays