Modifying the Collapse Direction of Navigation in Bootstrap 4

Is it possible to change the collapse direction of the Bootstrap 4 navbar from 'top to bottom' to 'right to left'? Here is the code snippet I am currently using:

<nav class="navbar navbar-light bg-faded">
    <button class="navbar-toggler navbar-toggler-right collapsed" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
        <span class="navbar-toggler-icon"></span>
        <i class="fa fa-times close" aria-hidden="true"></i>
    </button>
    <div class="collapse navbar-collapse" id="navbarNav">
        <ul class="navbar-nav flex-row-reverse">
            <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>
        </ul>
    </div>
</nav>

htmlcsstwitter-bootstrapbootstrap-4twitter-bootstrap-4

Answer №1

It is necessary to delete the flex-row-reverse class from the following ul element and include the following CSS:

 <ul class="navbar-nav flex-row-reverse">


 
    .navbar-collapse {
        position: absolute;
        top: 54px;
        left: 100%;
        padding-left: 15px;
        padding-right: 15px;
        padding-bottom: 15px;
        width: 100%;
        transition: all 0.4s ease;
        display: block;
    }
    .navbar-collapse.collapsing {
        height: auto !important;
        margin-left: 50%;
        left: 50%;
        transition: all 0.2s ease;
    }
    .navbar-collapse.show {
        left: 0;
    }
 
 <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js"></script><nav class="navbar navbar-light bg-faded">
    <button class="navbar-toggler navbar-toggler-right collapsed" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
        <span class="navbar-toggler-icon"></span>
        <i class="fa fa-times close" aria-hidden="true"></i>
    </button>
    <div class="collapse navbar-collapse" id="navbarNav">
        <ul class="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>
        </ul>
    </div>
</nav>

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

AngularJS Error: The method serviceName.functionName() is not a valid function

I am trying to implement a function that will go back when the cancel button is clicked. Here is the view code: <div ng-controller="goodCtrl"> <button class="btn" ng-click="cancel()">Cancel</button> </div> And here is the Jav ...

javascripthtmlangularjsmodel-view-controller

CSS: Contain text within a div to dynamically adjust the div's length based on the text content

Check out this code snippet: View the Fiddle <div id="main" style="border:1px solid red;"> <div id="child" style="background-color:#68c5e7; width:170px; margin:0 auto; font-size:30px; background-image:url(https://www.google.by/logos/2012/javelin ...

htmlcssmarginpadding

Is it possible for a user to change the data stored in sessionStorage variables?

Incorporating client-side JavaScript into my project to save certain variables using Web Storage - specifically, the sessionStorage. However, uncertainty exists regarding whether a user holds the capability to alter these variable values. If this is indee ...

javascripthtmlsession-storageweb-storage

Adjust the height of the dropdown list in react-select (React Material UI)

I recently added a dropdown feature using react-select to my project. However, I encountered an issue where the dropdown list was initially too large and taking up the entire page. I am looking for a solution on how to style the react-select dropdown list ...

cssreactjsmaterial-ui

Utilizing regular expressions in Powershell to modify a CSS file

Snippet from my current theme.css file: .actionBlock[selected] { color: var(--gray11); background-color: var(--gray11); } I am trying to modify color: var(--gray11); to color: #FFF; /* UPDATED : var(--gray11) */ After attempting in Po ...

cssregexpowershell

Scrolling the inner container in a CSS flexbox layout: tips and tricks

I'm currently working on designing a flex box based HTML layout like the one shown in the image link provided below. https://i.stack.imgur.com/nBl6N.png The layout should consist of 3 rows within the viewport with the following structure: - top: " ...

htmlcssflexbox

Why is PHP unable to identify the custom-designed CSS button upon submission?

I'm having a design issue where the button on my form is not being detected. I've tried various methods like changing the class name, assigning it a name via HTML, but nothing seems to work. Here is my button: .blue_button { background: #005b66; ...

phpcss

The video is not displaying on the webpage when connected locally, but it appears when the source is a URL

Recently, while practicing some basic tasks on a cloud IDE called Goorm, I encountered an issue with displaying a video on a simple webpage. The EJS file and the video were located in the same folder, but when I set the src attribute of the video tag to "m ...

javascripthtmlnode.jsexpress

Scrolling horizontally through content of unspecified width

Imagine having a content div displaying a long line of text. I want this content to be enclosed within a wrapper div that has a fixed height and the ability to horizontally scroll if the content exceeds the width of the wrapper div. Here are two possible ...

htmlcss

Creating a wide-ranging megamenu with CSS only

I am interested in creating a full-width Mega menu. Here is the link for reference: http://codepen.io/tanmoy911/pen/KzjVdq My CSS code follows a 12 column grid system. .fui-navbar{list-style-type:none;margin:0;padding:0;overflow:hidden} .fui-navbar li{fl ...

htmlcss

The autoplay feature of the Bootstrap video carousel is not functioning as expected

I have implemented a bootstrap video carousel, but I am facing issues with autoplay functionality. The videos do not play automatically when the page loads or when the items on the carousel change. Any suggestions on how to achieve this? My requirement i ...

bootstrap-4carousel

Align the text in the center of the image, which is depicted as a bullet point

I am currently using images as bullet points for my Github Pages (markdown files), following the instructions outlined here. My goal now is to vertically center the text next to the image. This is demonstrated here (cf. lower third of page), however, I am ...

htmlcssmarkdowngithub-pagesinline-styles

immediate removal upon pressing the button

Struggling to remove data from a datatable when clicking the delete button for quick admin side action. My code isn't functioning properly, even after attempted fixes. Here's my code: <div class="table-responsive"> <table id="datas" cl ...

phphtml

Guide on showing long blocks of text in MySQL without formatting restrictions

I've come across a problem that I can't seem to solve anywhere. After storing data from a topic or comment in the database, the message is stored in a longtext format. However, when the longtext shows fine in the table (with enters and multiple ...

phphtmldatabase

Where is the best location to store the image files?

I am currently working on a web application that focuses on Image processing, however I have encountered a basic issue. The images are not loading during the runtime of my HTML page. I have tried placing the image files in the src folder, but it seems li ...

htmleclipse

Tips for creating a responsive iframe without relying on aspect ratio assumptions

Is there a way to create a responsive iframe without relying on a fixed aspect ratio? The width and height of the content are unknown until rendering. Keep in mind, using Javascript is an option. For instance: <div id="iframe-container"> <i ...

javascripthtmlcssiframeresponsive-design

How does margin:auto differ from using justify-content and align-items center together?

If you want to center both horizontally and vertically at the same time, there are two easy methods available: Option One .outer { display:flex; } .inner { margin:auto; } Option Two .outer { display: flex; justify-content: center; align-items ...

htmlcssflexboxcentering

Shift content from side to side with a click

I've been attempting to shift content left and right using an onclick event and I need it to stop at the margins on the left or right. The list-items are generated dynamically. Here's the code I've tried so far, but it's not quite worki ...

javascriptjqueryhtmlonclick

Tips for saving a PHP variable in an HTML attribute

I am working on a page that allows users to select colors from a list using checkboxes. When the user submits their selections, I want all the chosen colors to be displayed with their corresponding color as their font color. Below is the code I have so fa ...

phphtmlcolorsecho

Repetitive use of multiple submit buttons in AngularJS

i'm currently working with AngularJS Currently facing this issue: view screenshot I have utilized the following HTML code to display submit button for two different types of forms. One for TEXT Form and one for ENUM Form: <div ng-controller="g ...

javascriptjqueryhtmlangularjsforms