Alignment of link items within a Bootstrap 4 hamburger menu

Is there a way to display the menu items below instead of to the left? Check out this jsfiddle for more details.

Additionally, I am looking to keep the hamburger icon in place and prevent it from moving when clicked.

Here is a GIF showing the current behavior.

<nav class="navbar navbar-dark bg-dark navbar-expand-lg text-nowrap">
  <div class="container">
    <div class="row align-items-center">
      <div class="col col-lg-3">
        <a href="" class="navbar-brand justify-content-start">
            <h1 class="display-3" id="cont">TEST1<span id="se" class="">.SE</span></h1>
        </a>
      </div>
      <div class="col col-lg-5">
        <div class="navbar-nav">
          <div class="collapse navbar-collapse navbar1">
              <a href="#" class="nav-item nav-link"><!-- Home -->TEST1</a>
              <a href="#" class="nav-item nav-link"><!-- Recipes -->TEST2</a>
              <a href="#" class="nav-item nav-link"><!-- Job seekers -->TEST3</a>
              <a href="#" class="nav-item nav-link"><!-- Reviews -->TEST4</a>
              <a href="#" class="nav-item nav-link"><!-- Tools -->TEST5</a>
            </div>
        </div>
      </div>
      <div class="col col-lg-1"></div>
            <div class="col col-lg-3">
        <div class="navbar-nav collapse navbar-collapse navbar1">
          <a href="#" class="nav-item nav-link mx-1" id="login"><i class="fas fa-user-check mr-1"></i>Login</a>
            <a href="#" class="nav-item nav-link mx-1"><i class="fas fa-user-plus mr-1"></i>Register</a>
        </div>
      </div>
    </div>
    <button class="navbar-toggler" data-toggle="collapse" data-target=".navbar1"><span class="navbar-toggler-icon"></span></button>
  </div>
</nav>
htmlcssbootstrap-4

Answer №1

To implement this styling in your project, include the following CSS:

.navbar-toggler { 
  position: absolute;
  right: 10px;
  top: 10px;
}

In place of using jsfiddle, you have the option to generate functional snippets directly on stackoverflow. An example snippet is shown below:

...

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

In order to ensure JavaScript can be universally applied to all images, it needs to be made more generic

I have developed JavaScript functions to enable zoom in and zoom out functionality for an image through pinching gestures. Now, I aim to refactor the code below so that I can include it in a shared JavaScript file. var scale = 1; var newScale; ...

javascripthtml

Using HTML5 History API to navigate backwards without allowing the user to move forward (can popState?)

My webpage showcases user information with the help of AJAX for seamless data modification without altering the page layout. The process is straightforward: - Users can view their data when they access their profile. - By clicking the Edit button, a form ...

ajaxhtmlbackforwardhtml5-history

What is the best way to showcase HTML content in columns with a horizontal scrolling feature?

I am trying to showcase a list of basic HTML elements such as divs, paragraphs, etc. within a fixed height container, arranged in columns with consistent width. I want them to be horizontally scrollable, similar to the layout displayed in this image. Thi ...

csshtmlscrollinternet-explorer-11

Creating a webpage that utilizes varying headers for each section can help to

When trying to print a multi-page webpage, I encounter an issue with the headers. How can I ensure that different headers appear on each page after the first one? Specifically, my problem arises when a label on the first page spans across to the second pa ...

htmlcssprinting

The scrolling behavior varies in Firefox when using the mouse wheel

Currently, I am working on a website where I want to display large text on the screen and have the ability to scroll two divs simultaneously. This functionality is already in place. I can scroll the divs, but I'm facing an issue with the jumps being t ...

javascriptjquerycssfirefoxscroll

Is there a way to prioritize the table row background color over the cell input elements background color?

After a user selects a table row, the row is assigned the class below: tr.selected { background-color:#FFA76C; } However, if there are input fields in the cells with background colors, they end up overriding the row's background color. (For instance ...

htmlcss

Is it possible for a gradient between accessible colors to also be accessible?

Ensuring accessibility on websites is a top priority for me, with our goal being at least AA standard. We utilize tools like and to test the contrast between background colors and black or white text. For example, let's consider white (#fff) text a ...

csswebcolorsaccessibility

Issue with Google Maps functionality within the jQuery easytabs platform

Upon clicking the contact tab, the gmaps loads but unfortunately only shows the left corner of the map. Quite intriguing... Any thoughts on how to fix this? Here is the corresponding jsfiddle This is the structure of my HTML code: <div id="menu-contai ...

jqueryhtmlcssgoogle-maps

Finding a specific element within a table using xpath in selenium proved to be a challenge

I am trying to click on a specific button inside a table where each row has an update button. Here is what my table looks like: <table _ngcontent-vhp-c82="" datatable="" id="dtOptionsComments" class="display table tabl ...

c#htmlseleniumselenium-webdriverxpath

Is it possible to use the Stop Button on the HTML5 Audio Tag to halt a live MP3 stream

Is there a way to add a stop button as well? Currently, I have play and pause buttons, but the stop function doesn't truly clear the music buffer in the browser; it just stops playback without resetting to the beginning. This is fine for MP3 files but ...

javascripthtmlaudiotags

Achieving vertical center alignment for the label and btn-group in Bootstrap

Is it possible to align other elements with the Bootstrap btn-group? <div class="btn-toolbar text-center"> <div class="pull-left"> <span class="glyphicon glyphicon-envelope " style="font-size:1.5em;"></span> < ...

htmlcsstwitter-bootstrap

Employing the html.validationmessagefor to display a client-side error notification

My text fields have server-side validation messages. The field 'title' is a required field on the server side with a '[Required]' data attribute in the class, but it only seems to be checked on a postback or form submit. I am saving the ...

javascriptjqueryhtmlasp.net-mvcclient-side-validation

Increasing the size of the entire page can be achieved using the three.js dom element

I am currently working on creating a 3D viewer using three.js. My goal is to have the viewer take up the full height of the screen while also leaving space for a side panel. The vertical layout is functioning properly, but once I add the render's dom ...

javascripthtmlcsslayoutthree.js

When attempting to retrieve the innerHTML of a <div> element within a <Script> tag, the value returned is undefined

Utilizing a masterpage to create a consistent header across all content pages, I encountered an issue on one page. I needed to retrieve the innerHTML of a div element and pass it to an input control on the same page in order to access the updated innerHTML ...

javascriptjqueryhtmlasp.net

Creating a square shape in Twitter Bootstrap to frame an item on a webpage

I've been working on creating a webpage that looks similar to the image provided. I've managed to get about 90% of it done, but there are a couple of issues I'm facing: How can I create a square with a triangle at the bottom as shown in th ...

javascripttwitter-bootstrapcsstwitter-bootstrap-3ionic-framework

Ensuring Bootstrap4 columns have a minimum height within a row

How can I adjust the right column in this image layout to crop the height and match it with the left column, aligning the bottoms of the images? This customization should only apply to lg+ screen sizes. An ideal solution using Bootstrap 4 without jQuery i ...

cssbootstrap-4

Is there a reason why I can't load all Google charts on one webpage?

I am trying to use the Google Charts API to display various charts on my web page. However, I seem to be encountering an issue where the last chart is not loading correctly. Can someone point out what I might be missing in my code? I would greatly apprecia ...

javascripthtmljavascript-objectsdom-eventsgoogle-visualization

Issue with multi-level bootstrap navbar: Unable to hover on child elements

Currently, I am working on implementing a multi-level navbar in my project using Bootstrap Navbar along with additional CSS and Jquery. If you want to review the codes, they can be found at: CodePen $(function() { // ------------------------------- ...

javascripthtmlcssbootstrap-4navbar

What is the best way to conceal a modal using jquery?

Click button to open modal: <button type="button" class="btn" onclick="CountClass()" runat="server" data-toggle="modal" data-target="#inlineForm1">OPEN</button> The modal code: <div class="modal fade text-left" id="inlineForm1" tabindex=" ...

javascriptc#jqueryhtmlasp.net

Determine the total cost based on the quantity purchased

I created a webpage for employees to select an item from a dropdown menu, and it will automatically display the price of that item. Check out my code below: <script> $(document).ready(function() { $('#price_input').on('change' ...

javascriptjqueryhtml