What is the best way to create a drop-up feature for a Bootstrap navbar positioned at the bottom of the

I am experiencing some issues with my navbar. I have a dropdown menu in the third li element that does not seem to work properly. Despite adding the dropup class, it still fails to appear when I hover over it.

<nav class="navbar navbar-expand-lg navbar-light bg-light">
    <a class="navbar-brand" href="#"></a>
    <div class="header-logo header-logo--img">
        <a href="index.html"><img src="assets/img/ht-logo.svg" srcset="assets/img/ht-logo.svg" alt="nec"></a>
    </div>
    <button class="navbar-toggler" type="button" data-toggle="collapse" data-placement="top" data-target="#navbarNavDropdown" aria-controls="navbarNavDropdown" aria-expanded="false" aria-label="Toggle navigation">
        <span class="navbar-toggler-icon"></span>
    </button>
    <div class="collapse navbar-collapse" id="navbarNavDropdown">
        <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="#">Register</a>
            </li>
            <li class="nav-item">
                <a class="nav-link" href="#">Profile</a>
            </li>

            <li class="nav-item dropdown">
                <a class="nav-link dropdown-toggle" href="#" id="navbarDropdownMenuLink" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                    <svg role="img" class="cus">
                        <use xlink:href="assets/img/nec.svg#account" />
                    </svg>
                    <span class="">&#8963;</span>
                </a>
                <div class="dropdown-menu dropup" aria-labelledby="navbarDropdownMenuLink">
                    <a class="dropdown-item" href="#">Home</a>
                    <a class="dropdown-item" href="#">Register</a>
                    <a class="dropdown-item" href="#">Profile</a>
                </div>
            </li>
        </ul>
    </div>
</nav>
htmlcsstwitter-bootstrapbootstrap-4

Answer №1

To enable dropdown functionality, make sure to include jQuery, popper.js, and bootstrap.js in your project.

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css">

<nav class="navbar navbar-expand-lg navbar-light bg-light">
    <a class="navbar-brand" href="#"></a>
    <div class="header-logo header-logo--img">
        <a href="index.html"><img src="assets/img/ht-logo.svg" srcset="assets/img/ht-logo.svg" alt="nec"></a>
    </div>
    <button class="navbar-toggler" type="button" data-toggle="collapse" data-placement="top" data-target="#navbarNavDropdown" aria-controls="navbarNavDropdown" aria-expanded="false" aria-label="Toggle navigation">
        <span class="navbar-toggler-icon"></span>
    </button>
    <div class="collapse navbar-collapse" id="navbarNavDropdown">
        <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="#">Register</a>
            </li>
            <li class="nav-item">
                <a class="nav-link" href="#">Profile</a>
            </li>

            <li class="nav-item dropdown">
                <a class="nav-link dropdown-toggle" href="#" id="navbarDropdownMenuLink" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                    <svg role="img" class="cus">
                        <use xlink:href="assets/img/nec.svg#account" />
                    </svg>
                    <span class="">&#8963;</span>
                </a>
                <div class="dropdown-menu dropup" aria-labelledby="navbarDropdownMenuLink">
                    <a class="dropdown-item" href="#">Home</a>
                    <a class="dropdown-item" href="#">Register</a>
                    <a class="dropdown-item" href="#">Profile</a>
                </div>
            </li>
        </ul>
    </div>
</nav>

<script src="https://code.jquery.com/jquery-3.4.1.slim.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="acdcc3dcdcc9de82c6dfec9d829d9a829c">[email protected]</a>/dist/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"></script>

Answer №2

To create a dropup effect on the navigation, simply apply the dropup class directly to the navigation element.

For example:

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

When attempting to execute a script that includes document.write, it will not function as expected

Our web program is utilizing ajax and jquery, specifically Netsuite. I've been attempting to adjust elements on a page using document.ready and window.load methods in order to load an external script onto the page. Regardless of whether I load this ex ...

javascriptjqueryhtmlnetsuite

Deactivate the Autofill feature on Google Toolbar

Dealing with the Google Toolbar's autofill feature has been a constant frustration in my web development journey over the years. I have resorted to creating a timer control to monitor changes, as the developers overlooked firing change events on contr ...

asp.netjavascripthtmlcss

Moving a blank block to the top using CSS transformation

After trying to implement the translate3d(150px,0px,0px); on my "content" div, I encountered an issue where an empty block appears at the top of the page. Unfortunately, I am unsure about how to resolve this issue. <!DOCTYPE html> <html> <h ...

htmlcsstransformtranslate3d

Having trouble with conditional statements in tpl file on Prestashop (PHP, Smarty)?

I'm having trouble implementing the following: Showing a conditional voucher on the order confirmation page. The voucher depends on two specific conditions: the weight of the order and whether the user has an account Currently, I am working on the f ...

phphtmlprestashopsmarty

Unveiling the Mystery: Why YUI-3 Grids & Google Chrome Cause Overlapping Texts

Although I'm not well-versed in UI design, I find myself having to work on some CSS for a side project. Currently, I am utilizing YUI-3 files such as grids, reset, and fonts, all version 3.9.1. The main issue I am encountering is that the text inside ...

cssgoogle-chromeyui

What is causing the colorful background to not fully cover my page when I make the window smaller?

I'm currently designing a webpage that features a dynamic gradient background. Within this webpage are two columns - one displaying an image of a phone, and the other containing text. In full screen mode, everything looks perfect. The gradient stretch ...

javascripthtmlcss

Is it possible to dynamically render css using Express.js?

I have a need to dynamically generate CSS with each request. For example, in my Express.js application, I've set up a route like this: /clients/:clientId/style.css When a matching request is received, I want to retrieve the Client from the reposito ...

csslessexpressstylus

The sticky navbar remains fixed only within the initial section of the page

Currently, I am working on a Bootstrap website that is supposed to be a one-page site with a navigation bar at the top. However, I am facing an issue where the navbar is sticky only for the first section and then disappears as I scroll down. How can I make ...

htmlcssbootstrap-4

Creating a three-row CSS layout where the middle row aligns to the right side

I am working on developing a mobile device layout with 3 blocks. The first and third blocks contain text fields, while the second block is filled with a map. However, all of my blocks don't look good when they are too wide. The browser window can have ...

javascripthtmlcss

Interactive Gridview feature enables users to rearrange data elements easily by dragging and dropping them into desired

Currently, I am working on a sample project involving the drag and drop functionality of a grid view that allows users to reorder data. My main challenge is figuring out how to retrieve the data from the first column in the order that the user has changed ...

c#htmlasp.netgridview

How can I prevent my website layout from adjusting when the window is resized?

I want my website to remain the same regardless of window resizing, ensuring that no elements on the page shift or change size. Currently, my image and buttons are moving and resizing with the window, which I don't want. * { box-sizing: border-bo ...

htmlcssbuttonresizeresponsive

Yet another inquiry about the inexplicable failure of my jQuery Ajax in Internet Explorer

Just need to double-check if my test code below is correct. I've done some research and it appears that html syntax errors can cause the jquery ajax to not work in Internet Explorer? There are several includes where this code is located, so could the ...

jqueryhtmlajax

Is it necessary to convert PSD files to HTML prior to developing Django templates?

If you want to transform a well-designed PSD file into an attractive website, using a PSD to HTML service may be the way to go. When it comes to a Django site like mine, multiple templates are usually needed to create various sections of the web pages dyn ...

htmldjangodjango-templates

Tips for capturing changes in a "count" variable and executing actions based on its value

I have a counter on my webpage and I'm trying to change the style of an element based on the count variable. I tried using the .change action but I haven't been able to get it working. It might not be the right solution. Can anyone provide some ...

javascripthtmljquerycounter

Bootstrap is an outdated page template that lacks responsiveness

My code below features a page designed using Bootstrap HTML and CSS, but it doesn't look right on all devices. For example, on mobile devices, the grid appears zoomed in and unresponsive. I tried removing grid-template-columns: auto auto;, which fixed ...

htmlcssbootstrap-4

Unable to fetch css file in Node.js

I am currently in the process of learning Node.js, but I have encountered a small issue with retrieving data from a css file. Interestingly, when I directly add the data to the index file's code, it seems to work perfectly. Let me share the relevant ...

javascripthtmlcssnode.js

What is the process for disabling the CSS module feature in Next.js?

In Next.js, Global CSS can only be imported in _App.js. However, importing global CSS in every component is not allowed, so we have to use CSS modules to comply with this restriction imposed by Next.js. Currently, I am in the process of migrating a large ...

javascriptcssreactjsnext.jsserver-side-rendering

The content has been successfully loaded using ajax, but it is not displaying

I've been experimenting with djax and have noticed that when I click on an anchor tag, the URL changes as expected. However, even though the page source reflects this change, the contents of the page itself remain unchanged. Any thoughts on why this m ...

javascriptjqueryajaxhtmlhtml5-history

Tips for creating a side by side layout in Bootstrap modal content

I recently ventured into using Bootstrap and decided to create a simple modal based on the Bootstrap 4 documentation. You can check out the Bootstrap 4 modal for reference. The modal I created consists of two parts - Part 1 and Part 2, with a <hr> t ...

htmlcssbootstrap-4modal-dialogbootstrap-modal

Exclude a particular row from a table when there is no identifier

My PHP code generates a basic table. <table border="1" id="control> <tbody> <tr>...</tr> <tr>...</tr> <tr>...</tr> //Row #3 <tr>...</tr> <tr>... ...

javascripthtmlcss