Issue with Navbar Header: Troubleshooting and Solutions

I'm having trouble with my navigation bar. I want to add "3" under the dropdown section and set up multiple menu items, such as Link 4.
I couldn't figure out how to do this in my code... Could it be that Bootstrap doesn't support this feature?
https://i.sstatic.net/0zSOD.png

Can someone show me an example of how to solve this issue? I've included my code for reference.

      <!DOCTYPE html>
            <html lang="en">
            <head>
              <title>Bootstrap Example</title>
              <meta charset="utf-8">
              <meta name="viewport" content="width=device-width, initial-scale=1">
              <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/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.2/js/bootstrap.min.js"></script>
            </head>
            <body>
            
            <div class="container">
              <h2>Pills with Dropdown</h2>
              <ul class="nav nav-pills">
                <li class="nav-item">
                  <a class="nav-link active" href="#">Active</a>
                </li>
                <li class="nav-item dropdown">
                  <a class="nav-link dropdown-toggle" data-toggle="dropdown" href="#">Dropdown</a>
                  <div class="dropdown-menu">
                    <a class="nav-link dropdown-toggle" data-toggle="dropdown" href="#">Dropdown2</a>
                      <div class="dropdown-menu">  
                        <a class="dropdown-item" href="#">Link 3</a>
                          <ul class="nav nav-pills">
                            <a class="nav-link dropdown-toggle" data-toggle="dropdown" href="#">Dropdown3</a>
                              <div class="dropdown-menu">  
                                <a class="dropdown-item" href="#">Link 4</a></ul>
                    
                  
                    </div></div></div>
             
            </body>
            </html>

htmlcsstwitter-bootstrapbootstrap-4

Answer №1

<html lang="en">

<head>
  <title>Bootstrap Example</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/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.2/js/bootstrap.min.js"></script>
<style>
  @media (min-width: 992px){
    .dropdown-menu .dropdown-toggle:after{
        border-top: .3em solid transparent;
        border-right: 0;
        border-bottom: .3em solid transparent;
        border-left: .3em solid;
    }
    .dropdown-menu .dropdown-menu{
        margin-left:0; margin-right: 0;
    }
    .dropdown-menu li{
        position: relative;
    }
    .nav-item .submenu{ 
        display: none;
        position: absolute;
        left:100%; top:-7px;
    }
    .nav-item .submenu-left{ 
        right:100%; left:auto;
    }
    .dropdown-menu > li:hover{ background-color: #f1f1f1 }
    .dropdown-menu > li:hover > .submenu{
        display: block;
    }
}
</style>
</head>

<body>
  <h1>Pills With DropDown</h1>
  <nav class="navbar navbar-expand-lg navbar-dark bg-primary">
    <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#main_nav">
        <span class="navbar-toggler-icon"></span>
    </button>
    <div class="collapse navbar-collapse" id="main_nav">
    
    <ul class="navbar-nav">
    <li class="nav-item"> <a class="nav-link" href="#"> Active </a> </li>
    <li class="nav-item dropdown">
        <a class="nav-link dropdown-toggle" href="#" data-toggle="dropdown"> DropDown  </a>
        <ul class="dropdown-menu">
        <li><a class="dropdown-item dropdown-toggle" href="#"> Second level 2</a>
         <ul class="submenu dropdown-menu">
            <li><a class="dropdown-item" href=""> Third level 1</a></li>
            <li><a class="dropdown-item" href=""> Third level 2</a></li>
            <li><a class="dropdown-item dropdown-toggle" href=""> Third level 3</a>
          <ul class="submenu dropdown-menu">
              <li><a class="dropdown-item" href=""> Fourth level 1</a></li>
              <li><a class="dropdown-item" href=""> Fourth level 2</a></li>
          </ul>
            </li>
         </ul>
        </li>
        <li><a class="dropdown-item" href="#"> Dropdown item 3 </a></li>
        <li><a class="dropdown-item" href="#"> Dropdown item 4 </a>
        </ul>
    </li>
    <li class="nav-item"> <a class="nav-link" href="#"> First level 1 </a> </li>
    <li class="nav-item"> <a class="nav-link" href="#"> First level 2 </a></li>
    </ul>
    
    </div> <!-- navbar-collapse.// -->
    </nav>
</body>
<script>
  // Prevent closing from click inside dropdown
$(document).on('click', '.dropdown-menu', function (e) {
  e.stopPropagation();
});

// make it as accordion for smaller screens
if ($(window).width() < 992) {
  $('.dropdown-menu a').click(function(e){
    e.preventDefault();
      if($(this).next('.submenu').length){
        $(this).next('.submenu').toggle();
      }
      $('.dropdown').on('hide.bs.dropdown', function () {
     $(this).find('.submenu').hide();
  })
  });
}
</script>
</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

Modify the button's color when clicked and add it to an array with JavaScript

I am currently working on changing the color of buttons to indicate a selection. When a button is selected, its value is added to an array. If the same button is clicked again, it becomes unselected and its color reverts back to the original state, with it ...

htmlarraysangularjscss

Can CSS be used to communicate to JavaScript which media queries are currently in effect?

Is there a way for Javascript to detect when a specific CSS media query is active without repeating the conditions of the media query in Javascript? Perhaps something similar to an HTML data attribute, but for CSS. For example: CSS @media (min-width: 94 ...

javascriptcssmedia-queries

Struggling to align Bootstrap toasts in the center horizontally

Currently utilizing Bootstrap 4.6.1 (due to compatibility issues with bootstrap-select and newer versions) and endeavoring to center some toasts horizontally within a page using the code below: <div class="d-flex flex-row justify-content-c ...

cssbootstrap-4bootstrap-toast

Creating a dynamic PHP calculator that provides instant results by taking input from an HTML form

For the sheer joy of coding in PHP, I decided to create a calculator. Take a look at the result: PHPTest Apologies for some German text within. Here's the Code: <?php $umsatz = $_POST['umsatz']; $varkost = $_POST['varkost& ...

phpjavascripthtmlajaxjquery

Display and conceal individual divs using jQuery

Despite my lack of experience with jQuery, I am struggling with even the simplest tasks. The goal is to display/hide specific messages when certain icons are clicked. Here is the HTML code: <div class="container"> <div class="r ...

javascripthtmljquerycssjquery-events

Guide to automating the versioning of static assets (css, js, images) in a Java-based web application

To optimize the efficiency of browser cache usage for static files, I am seeking a way to always utilize cached content unless there has been a change in the file, in which case fetching the new content is necessary. My goal is to append an md5 hash of th ...

javajavascriptcssmavenjakarta-ee

There seems to be an issue with the border displaying correctly within the div element

I am currently working on developing a tag input system, but I am encountering some CSS issues. What I am aiming for is to have a green border that surrounds and contains the 2 divs inside it, however, this is not happening as expected. You can see the fi ...

javascripthtmlcss

Displaying a preloaded image on the canvas

Once again, I find myself in unfamiliar territory but faced with the task of preloading images and then displaying them on the page once all elements (including xml files etc.) are loaded. The images and references are stored in an array for later retrie ...

javascripthtmlcanvas

What is the best way to limit data loading when tabs are clicked in an AngularJS application?

My application has 2 tabs and all data is fetched from an API response. Initially, all data is loaded at once. The two tabs are: Tab 1 Tab 2 By default, Tab 1 is always active. I only want to load data for Tab 1 initially and not for Tab 2. When I c ...

javascripthtmlangularjs

How to Create a Hover Drop Down Menu that Disappears When Not Hovered Over

When I hover over the drop down menus on my Navbar, they display perfectly. However, it's impossible to click on the items in the menu because as soon as I move the cursor away from the main nav, it disappears. I've tried adding display:block and ...

htmlcsshovernavbar

Use the ng-repeat directive to display multiple items and let the user input a quantity for each item. Then, in AngularJs, gather all the form data, including the repeated items and their quantities, and

Hey there! I have a question related to AngularJs: How can I repeat pre-selected items using (ng-repeat) and allow users to enter a quantity for each item in a subsequent step, then submit all the form data? I'm wondering if adding $index to the repe ...

javascripthtmlangularjs

Click on the radio button to delete all selected entries in the option dropdown

After spending the entire day trying to find a solution, I am still struggling with a simple task - how do I clear all selections from a group of select option drop downs at once without removing them? I want the selections to revert back to their default ...

javascriptjqueryhtmljquery-mobile

My Jquery "animate" is only triggered once instead of on each function call. What could be causing this issue?

I have set my navigation to dock at a specific document height on the top of the viewport, and when it docks, it should display a dropdown animation. $(document).scroll(function(){ var x = $(window).scrollTop(); if(x>=700){ $("header ...

javascriptjqueryhtmlcss

A comprehensive guide on creating a package that combines an href link with an <li> element

I am currently using the <li> tag to display href links. The issue I am facing is that when I click on the 'box,' it does not directly link to another page. Instead, I have to click on the href link for it to redirect to another page. Is th ...

javascripthtmlcss

Is there a way to transfer CSS classes to React children and guarantee they take precedence over the child's own class styles?

I am trying to pass a CSS class from the parent component into the child component. Here is an example: <Parent> <Child /> </Parent> In order to apply a class from the parent to the <Child />, I have done this: <Parent> ...

javascriptcssreactjs

Can you please explain the functionality of this CSS code?

*:first-child+html .clearfix{zoom:1px;} Can anyone explain the purpose of this code snippet? I noticed it was causing elements to render at 1px in Internet Explorer 7. This code is present in the style.css file of my WordPress theme (created by ElegantThe ...

cssinternet-explorer-7

Update the Div content with animation on the change

I have mastered the art of refreshing a DIV element, but now I am looking to take it up a notch by incorporating an animation into the transition. The idea is that when a user approves an offer, the div containing a series of boxes should elegantly 'm ...

javascriptjqueryhtmlrefresh

Tips for adding an element based on a CSS attribute's value

Is there a way to dynamically adjust the CSS for an element with opacity less than 0? How can I conditionally hide this element if that scenario occurs? if ($('#rounded_items li').css("opacity") < "0"){ $(this).css('display',&ap ...

jquerycssopacity

What is the best way to display an image and text side by side within a single row in react-table?

I am trying to display an image and text side by side within a single column in a React table. I have successfully added two texts together in a single column using the code below: Header: "Name", id: "User", accessor: (d) => ...

javascripthtmlreactjsnext.jsreact-table

What are the dimensions for maximum picture width and height in the Bootstrap 4 grid class col-4? Additionally, can you provide some tips on minimizing image bl

Hey there! I am trying to arrange 3 screenshots in 3 separate columns in one row, resembling steps 1, 2, and 3. I want them all to have the same size. Can you advise on the maximum width and height I should use before they start getting stretched or comp ...

htmlcssbootstrap-4