How to Create a Bootstrap 4 Fixed Bottom Navigation with a Dropup Feature?

After thoroughly researching the site, I have not found a solution that works with this particular approach.

In order to create the following template, I utilized Pingendo. 

.dropup .dropdown-menu {
  top: auto;
  bottom: 100%;
  margin-bottom: .125rem;
}
<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <meta content="width=device-width, initial-scale=1" name="viewport">
  <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" type="text/css">
  <link href="https://pingendo.com/assets/bootstrap/bootstrap-4.0.0-beta.1.css" rel="stylesheet" type="text/css">
  <title></title>
</head>

<body>
  <!-- !-->
  <!-- !-->
  <!-- !-->
  <!-- !-->
  
  <!-- START NAVBAR TOP - CUSTOM -->
  <nav class="navbar fixed-top bg-dark navbar-dark">
    <div class="container"><a class="navbar-brand text-warning p-0 py-1" href="/"><i class="fa fa-home fa-lg"></i></a> <a class="navbar-text p-0 text-muted" href="0.html">HOME</a>
      <nav class="nav"><a class="nav-link p-0 py-1 text-warning" href="#!"><i class="fa fa-ellipsis-v fa-lg"></i></a></nav>
    </div>
  </nav>
  
  <!-- END NAVBAR TOP - CUSTOM -->
  
  <!-- START MAIN SECTION - CUSTOM -->
  <div class="py-5">
    <div class="container py-3">
      <div class="row">
        <div class="col-sm-12">
        
          <!-- START FORM - CUSTOM -->
          <form action="" class="text-center mb-2" method="post">
            <div class="input-group">
              <input class="form-control form-control-sm" placeholder="Client, address, phone..." type="text"> <span class="input-group-btn"><button class="btn btn-warning btn-sm border border-warning" type="button"><span class="input-group-btn"><span class="input-group-btn"><span class="input-group-btn"><span class="input-group-btn"> <i class="fa fa-search"></i> </span></span>
              </span>
              </span>
              </button>


            </div>
          </form>
          <!-- END FORM - CUSTOM -->
          
          <p class="p-0 m-0 mb-1 form-control-sm text-center">(n) search results</p>
          
          <!-- START LIST-GROUP SEARCH RESULTS - CUSTOM -->
          <div class="list-group">
            
            <!-- START LIST-GROUP-ITEM - CUSTOM -->
            <a class="list-group-item list-group-item-action form-control-sm flex-column align-items-start mb-1" href="#">
              <div class="d-flex w-100 justify-content-between">
                <p class="mb-0">TESLA, NIKOLA</p>
                <small>3 days ago</small></div>
              <small>123 Main Street, Salt Lake City, UT 84101</small>
              <br>
              <small><i class="fa fa-phone fa-lg"></i>  801-555-1234</small></a>
            <!-- END LIST-GROUP-ITEM - CUSTOM -->
            
            <!-- START LIST-GROUP-ITEM - CUSTOM -->
            <a class="list-group-item list-group-item-action form-control-sm flex-column align-items-start mb-1" href="#">
              <div class="d-flex w-100 justify-content-between">
                <p class="mb-0">TESLA, NIKOLA</p>
                <small>3 days ago</small></div>
              <small>123 Main Street, Salt Lake City, UT 84101</small>
              <br>
              <small><i class="fa fa-phone fa-lg"></i>  801-555-1234</small></a>
            <!-- END LIST-GROUP-ITEM - CUSTOM -->
            
            <!-- START LIST-GROUP-ITEM - CUSTOM -->
            <a class="list-group-item list-group-item-action form-control-sm flex-column align-items-start mb-1" href="#">
              <div class="d-flex w-100 justify-content-between">
                <p class="mb-0">TESLA, NIKOLA</p>
                <small>3 days ago</small></div>
              <small>123 Main Street, Salt Lake City, UT 84101</small>
              <br>
              <small><i class="fa fa-phone fa-lg"></i>  801-555-1234</small></a>
            <!-- END LIST-GROUP-ITEM - CUSTOM -->
            
          </div>
          <!-- END LIST-GROUP SEARCH RESULTS - CUSTOM -->
          
        </div>
      </div>
    </div>
  </div>
  <!-- END MAIN SECTION - CUSTOM -->
  
  <!-- START NAVBAR BOTTOM - CUSTOM -->
  <nav class="navbar fixed-bottom navbar-dark bg-dark">
    <div class="container"><a class="nav-brand p-0 text-muted" href="#client"><i class="fa fa-address-book-o fa-lg mr-2"></i>Last, First</a>
      
      <!-- Default dropup button -->
      <div class="btn-group dropup">
        <button class="btn btn-secondary" type="button">Dropup</button>
        <button aria-expanded="false" aria-haspopup="true" class="btn btn-secondary dropdown-toggle" data-toggle="dropdown" type="button"><span class="sr-only">Toggle Dropdown</span></button>
        <div class="dropdown-menu">
          <!-- Dropdown menu links -->
          <a class="dropdown-item" href="#">Action</a>
          <a class="dropdown-item" href="#">Another action</a>
        </div>
      </div>
      
      <nav class="nav"><a class="nav-link p-1 pl-3 text-warning" href="#view_project"><i class="fa fa-folder-open fa-lg"></i></a> <a class="nav-link p-1 pl-3" href="#switch_project"><span class="badge badge-dark nav-item border border-warning text-warning">00:24</span></a>        <a class="nav-link p-1 pl-1" href="#switch_project_task"><span class="badge border border-warning badge-warning"> PU </span></a></nav>
    </div>
  </nav>
  
  <!-- END NAVBAR BOTTOM - CUSTOM -->
  
  <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js">
  </script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.11.0/umd/popper.min.js">
  </script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/js/bootstrap.min.js">
  </script>
</body>

</html>
htmlcsstwitter-bootstrapbootstrap-4

Answer №1

Don't forget, the Popper.js library is essential for supporting dropdowns within a Bootstrap navbar.

More information on menu alignment here

If you encounter issues, try adding this custom CSS snippet to resolve them:

.dropup .dropdown-menu {
  top: auto;
  bottom: 100%;
  margin-bottom: .125rem;
}

Here's a full example for better understanding:

.dropup .dropdown-menu {
  top: auto;
  bottom: 100%;
  margin-bottom: .125rem;
}
<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <meta content="width=device-width, initial-scale=1" name="viewport">
  <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" type="text/css">
  <link href="https://pingendo.com/assets/bootstrap/bootstrap-4.0.0-beta.1.css" rel="stylesheet" type="text/css">
  <title></title>
</head>

<body>
  <nav class="navbar fixed-top bg-dark navbar-dark">
    <div class="container"><a class="navbar-brand text-warning p-0 py-1" href="/"><i class="fa fa-home fa-lg"></i></a> <a class="navbar-text p-0 text-muted" href="0.html">HOME</a>
      <nav class="nav"><a class="nav-link p-0 py-1 text-warning" href="#!"><i class="fa fa-ellipsis-v fa-lg"></i></a></nav>
    </div>
  </nav>
  <!-- MAIN SECTION -->
  <div class="py-5">
    <div class="container py-3">
      <div class="row">
        <div class="col-sm-12">
          <form action="" class="text-center mb-2" method="post">
            <div class="input-group">
              <input class="form-control form-control-sm" placeholder="Client, address, phone..." type="text"> <span class="input-group-btn"><button class="btn btn-warning btn-sm border border-warning" type="button"><span class="input-group-btn"><span class="input-group-btn"><span class="input-group-btn"><span class="input-group-btn">&nbsp;<i class="fa fa-search"></i>&nbsp;</span></span>
              </span>
              </span>
              </button>
              </span>
            </div>
          </form>
          <p class="p-0 m-0 mb-1 form-control-sm text-center">(n) search results</p>
          <div class="list-group">
            <a class="list-group-item list-group-item-action form-control-sm flex-column align-items-start mb-1" href="#">
              <div class="d-flex w-100 justify-content-between">
                <p class="mb-0">TESLA, NIKOLA</p>
                <small>3 days ago</small></div>
              <small>123 Main Street, Salt Lake City, UT 84101</small>
              <br>
              <small><i class="fa fa-phone fa-lg"></i> &nbsp;801-555-1234</small></a>
            <a class="list-group-item list-group-item-action form-control-sm flex-column align-items-start mb-1" href="#">
              <div class="d-flex w-100 justify-content-between">
                <p class="mb-0">TESLA, NIKOLA</p>
                <small>3 days ago</small></div>
              <small>123 Main Street, Salt Lake City, UT 84101</small>
              <br>
              <small><i class="fa fa-phone fa-lg"></i> &nbsp;801-555-1234</small></a>
            <a class="list-group-item list-group-item-action form-control-sm flex-column align-items-start mb-1" href="#">
              <div class="d-flex w-100 justify-content-between">
                <p class="mb-0">TESLA, NIKOLA</p>
                <small>3 days ago</small></div>
              <small>123 Main Street, Salt Lake City, UT 84101</small>
              <br>
              <small><i class="fa fa-phone fa-lg"></i> &nbsp;801-555-1234</small></a>
          </div>
        </div>
      </div>
    </div>
  </div>
  <nav class="navbar fixed-bottom navbar-dark bg-dark">
    <div class="container"><a class="nav-brand p-0 text-muted" href="#client"><i class="fa fa-address-book-o fa-lg mr-2"></i>Last, First</a>
      <div class="btn-group dropup">
        <button class="btn btn-secondary" type="button">Dropup</button>
        <button aria-expanded="false" aria-haspopup="true" class="btn btn-secondary dropdown-toggle" data-toggle="dropdown" type="button"><span class="sr-only">Toggle Dropdown</span></button>
        <div class="dropdown-menu">
        </div>
      </div>
      <nav class="nav"><a class="nav-link p-1 pl-3 text-warning" href="#view_project"><i class="fa fa-folder-open fa-lg"></i></a> <a class="nav-link p-1 pl-3" href="#switch_project"><span class="badge badge-dark nav-item border border-warning text-warning">00:24</span></a>        <a class="nav-link p-1 pl-1" href="#switch_project_task"><span class="badge border border-warning badge-warning">&nbsp;PU&nbsp;</span></a></nav>
    </div>
  </nav>
  <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js">
  </script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.11.0/umd/popper.min.js">
  </script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/js/bootstrap.min.js">
  </script>
</body>

</html>

Answer №2

To achieve the dropup effect, simply include the dropup class within your existing class="btn-group btn-group-lg" or the wrapper of your button.

Answer №3

Sample HTML Code for Custom Navigation

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" type="text/css">
    <link rel="stylesheet" href="https://example.com/assets/bootstrap/bootstrap-4.0.0-beta.1.css" type="text/css">
    <style media="screen" type="text/css">
        .dropup .dropdown-menu {
            top: auto;
            bottom: 100%;
            left: -100%;
            margin-bottom: .125rem;
        }
    </style>
</head>

<body>
    <nav class="navbar fixed-top navbar-dark bg-dark">
        <div class="container p-0">
            <nav class="nav">
                <a class="nav-link text-warning px-0 pr-4" href="/main"> <i class="fa fa-search fa-2x"></i> </a>
            </nav>
            <nav class="nav">
                <a class="nav-link px-0 text-muted" href="#blank"> Last, First</a>
            </nav>
            <nav class="nav">
                <a class="nav-link text-warning px-0 pl-4" href="#blank"> <i class="fa fa-plus fa-2x text-warning"></i> </a>
            </nav>
        </div>
    </nav>

    <!-- Additional content here -->

    <nav class="navbar fixed-bottom navbar-dark bg-dark">
        <div class="container p-0">
            <nav class="nav">
                <a class="nav-link text-warning px-0 pr-4" href="#blank"> <i class="fa fa-folder-open-o fa-lg"></i> </a>
                <a class="nav-link text-warning px-0 pr-4" href="#blank"> <i class="fa fa-asterisk fa-lg"></i> </a>
                <a class="nav-link text-warning px-0 pr-4" href="#blank"> <i class="fa fa-superscript fa-lg"></i> </a>
                <a class="nav-link text-warning px-0 pr-4" href="#blank"> <i class="fa fa-thermometer-half fa-lg"></i> </a>
                <a class="nav-link text-warning px-0 pr-4" href="#blank"> <i class="fa fa-wrench fa-lg"></i> </a>
            </nav>
            <div class="btn-group dropup btn-group-sm">
                <button type="button" class="btn dropdown-toggle btn-warning" aria-expanded="false" aria-haspopup="true" data-toggle="dropdown">CLOCK IN <span class="sr-only">&nbsp;</span> </button>
                <div class="dropdown-menu text-right">
                    <a class="dropdown-item" href="#">Action</a>
                    <a class="dropdown-item" href="#">Another action</a>
                    <a class="dropdown-item" href="#">Something else here</a>
                    <div class="dropdown-divider"></div>
                    <a class="dropdown-item" href="#">Separated link</a>
                </div>
            </div>
            
        </div>
    </nav>

    <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.11.0/umd/popper.min.js" integrity="sha384-b/U6ypiBEHpOf/4+1nzFpr53nxSS+GLCkfwBdFNTxtclqqenISfwAzpKaMNFNmj4" crossorigin="anonymous"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/js/bootstrap.min.js" integrity="sha384-h0AbiXch4ZDo7tp9hKZ4TsHbi047NrKGLO3SEJAg45jXxnGIfYzk4Si90RDIqNm1" crossorigin="anonymous"></script>
</body>

</html>

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

Angular functions are executed twice upon being invoked within the html file

I decided to kick-start an Angular project, and I began by creating a simple component. However, I encountered a perplexing issue. Every time I call a function in the HTML file from the TypeScript file, it runs twice. TS: import { Component, OnInit } from ...

javascripthtmlangulartypescript

Is it possible to remove content from a Content Editable container?

JSFiddle <div contenteditable="true"> <p>Trying out editing capabilities of this paragraph.</p> <figure> <img src="http://www.keenthemes.com/preview/metronic/theme/assets/global/plugins/jcrop/demos/demo_files/ima ...

javascriptjqueryhtml

Issues are arising with the .mouseover functionality within this particular code snippet

Learning Javascript has been a challenge for me so far. I tried following a tutorial, but the result I got wasn't what I expected based on the video. I'm wondering why that is and how I can fix it. I'm aiming to make a box appear suddenly w ...

javascriptjqueryhtmlcss

Ensure the width of ancestor flexbox divs is limited to the width of its child by setting a specific width

I have a specific element that incorporates flex display and I've defined its width with the flex-basis property like this: .flex-row input { flex: 0 1 450px; } There is a flex-row division nested inside a flex-container division. My goal is for th ...

htmlcssflexbox

Icon not appearing within the input group

Is there a way to design an input group that includes both a text field and an icon placed at the beginning of the text field? The code below demonstrates my attempted implementation, however, it appears that only the text field is visible without the acco ...

htmlcssinputiconsbootstrap-5

Designing divs of the same dimensions with a wrap-around effect

I'm currently working on developing a menu system that incorporates images and text above and below each image. The content is dynamic, so I need the menu layout to display with equal spacing between each image, creating a grid-like pattern both horiz ...

htmlcssflexbox

Would like to conceal an element only if it is currently visible

Currently in the process of developing a website, I have successfully implemented a dropdown menu that is triggered when clicking on an "About Me" link. This reveals additional links such as biography and interests. The issue I am facing now is regarding t ...

jqueryhtmldrop-down-menu

Create a video player in your HTML code using the class "afterglow", and also link a separate class to it for additional styling

I'm encountering some challenges with a project that involves a JS file for a Bootstrap modal popup and an HTML5 video player. The issue I'm facing is that I am unable to link the class for the video player theme. Can anyone here assist me in ide ...

javascripthtmlvideo-player

Deactivate the rest of the buttons by utilizing the e.target.id

I have ten expansion panels. When I click a button in one expansion panel, I want to disable other buttons in the remaining expansion panels. The issue is that when I try to target an id, it does not return e.target.id but instead returns as the value pass ...

javascripthtmlreactjsreduxmaterial-ui

navigation bar: retain link hover state even after displaying sub-menu

My navigation bar has submenus with background images in .png format. Only 3 links in my navbar have these submenus. The issue I am facing is that when the menu link is in a hover state and the submenu is being hovered over, the nav link loses its hover st ...

javascriptjqueryhtmlcss

Switch to a different webpage based on radio button selections in a PHP script

On my webpage, I have two pictures that act as radio buttons, along with a "proceed" button. However, when I click on the button, it does not redirect to the desired page. Below is the code for my form and PHP processing page: <body> <fo ...

phphtmlhttp-redirectradio-button

How can you save the output of console.log in JavaScript to a variable and then use that variable in HTML?

Here is the code snippet I've been working on. The first part consists of JavaScript code, and the second part includes HTML. $('#table').on('check.bs.table', function (e, row) { checkedRows.push({First: row.fname, Second: row ...

javascriptjqueryhtmltwitter-bootstrap

Is there a way to navigate through div text within a stationary container?

My current challenge involves a container that contains an overflow of text, but I desire for the container to remain fixed. The dilemma arises when the text spills out from both the top and bottom edges of the container. Instead of using scroll bars withi ...

jquerycssparallax

Setting up Jplayer as an audio player: A step-by-step guide

I am looking to incorporate a Jplayer audio player into my project, but I am struggling to find any documentation or resources that provide instructions on what components to include and how to set it up. If anyone has experience with using the Jplayer au ...

javascriptjqueryhtmlhtml5-audiojplayer

What can be done to ensure that the a href tag is functioning as clickable?

Having an issue with my HTML and CSS code for a notification dropdown box. I am unable to click the tag, even after attempting to use JavaScript. Can't seem to figure out what's causing this problem. Any advice on how to make the tag clickable? ...

javascriptphpjqueryhtmlcss

The menu field remains open even after clicking on the menu

I have encountered an issue with my code. Here is a DEMO that I created on jsfiddle.net Currently, when you click on the red div, the menu opens. However, if you click on the menu items, the menu area does not close. What do I need to do in order to clo ...

javascriptjquerycssajax

How can I make a DIV occupy the entire vertical space of the page?

I am working on a Google Maps application that takes up the majority of the screen. However, I need to reserve a strip at the top for a menu bar. How can I ensure that the map div fills the remaining vertical space without being pushed past the bottom of ...

csshtml

Searching and categorizing information within a table using jQuery

Can someone help me with merging my html and jquery code for type and filter table data, as well as tag data in the same input box? I have the code for both functionalities separately (http://jsfiddle.net/tutorialdrive/YM488/), but I want to combine them. ...

jqueryhtmljquery-uitags

Animations and transitions for cards

import Section from '@/components/section' import {Card, CardHeader, CardBody, CardFooter, Divider, Link, Image, Button} from "@nextui-org/react"; import { CSSProperties, useState } from 'react'; const Index = () => { c ...

cssreactjsnext.jsjsxprogressive-web-apps

ngSwitchCase provider not found

While following a tutorial and trying to implement what I learned, I encountered an error that I'm having trouble understanding. The browser console shows an error message stating [ERROR ->]<span *ngSwitchCase="true">, but I can't figure ...

javascripthtmlcssangular