Attempting to seamlessly integrate Caret into this navigation menu

https://jsfiddle.net/alachgar/L0bxjncz/3/

<html>
<head>
<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>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.7.2/css/all.min.css" />
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/simple-line-icons/2.4.1/css/simple-line-icons.css" />
<link href="https://fonts.googleapis.com/css?family=Lato:300,400,700,300italic,400italic,700italic" rel="stylesheet" type="text/css">
<link href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="46242929323532342736067368766874">[email protected]</a>/dist/css/bootstrap.min.css" rel="stylesheet">

</head>

                <a href="#mobileMenu" id="mobileBar" class="d-none ml-auto"> <i class=" "></i></a>
                <div class="collapse navbar-collapse" id="navbarNav">
                    <ul class="navbar-nav ml-md-auto justify-content-end" id="nav">
                        <li class="nav-item active">
                            <a class="nav-link" href="#">Home <span class="sr-only"></span></a>
                        </li>
                        <li class="nav-item dd">
                            <a class="nav-link" href="#">Justice Server <span class="sr-only"></span></a>
                        </li>
                        <li class="nav-item dd">
                            <a class="nav-link" href="#">Westlaw <span class="sr-only"> </span></a>
                            
                        </li>
                        
                        <li>
                            
                            <a class="nav-link dropdown-toggle" data-toggle = "dropdown"  href = "#">LSNC SPN <span class = "caret sr-only"></span></a>
                            <ul class="dropdown-menu">
                                <?php
                                $conn = new mysqli('localhost', '.....', '.......', 'portal') or die("Database Connection Failed");
                                            
                                //Below We are connectin to Database and getting all items for our Menu.
                                $sql = "SELECT * FROM categories";
                                $res = mysqli_query($conn, $sql);
                                    while ($row = mysqli_fetch_array($res)) 
                                        {
                                            echo "<li class='dropdown-item'><a href='$base_url/admin/downloads.php?idx={$row['cat_code']}'><span >{$row['cat_name']}<span></a></li>";
                                        }   
                                ?>
                            </ul>                                   
                            
                        </li>

                        <li class="nav-item dd">
                            <a class="nav-link" href="#"> LSNC Sites <span class="sr-only"> </span></a>
                            <ul class="list-unstyled dropdownMenu">
                                <li>
                                    <a href="#"> LSNC Web</a>
                                </li>
                                <li>
                                    <a href="#"> Calfresh</a>
                                </li>
                                <li>
                                    <a href="#"> Regulations</a>
                                </li>
                                <li>
                                    <a href="#"> Cases</a>
                                </li>
                            </ul>
                        </li>
                        <li class="nav-item dd">
                            <a class="nav-link" href="#"> Pika <span class="sr-only"></span></a>                    
                        </li>
                        <li class="nav-item dd">
                            <a class="nav-link" href="#">Your JS Cases <span class="sr-only"></span></a>                    
                        </li>
                        <li class="nav-item dd">
                            <a class="nav-link" href="#">Events <span class="sr-only"></span></a>                   
                        </li>   
                        <li class="nav-item dd">
                            <a class="nav-link" href="logout.php">Logout <span class="sr-only"></span></a>
                        </li>
                    </ul>
                </div>
            </nav>
        </div>

    </header>

I am attempting to incorporate a dropdown menu into this navbar setup. While most of the elements look good, when querying items from my MySql table, the results shift too far to the left. I would like the items to display directly underneath the main dropdown menu (LSNC SPN). I have tried various combinations with no success. Any assistance is greatly appreciated. Thank you.

htmlcssbootstrap-4

Answer №1

Upon reviewing your code, I noticed that you have successfully implemented everything correctly. However, the only thing missing is adding the "nav-item" class to the parent "li" tag of the "dropdown-menu".

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 the screen size changes, the centrally aligned position of sticky elements does not stay consistent

It has come to my attention that when centrally aligning an element with position sticky, the alignment can start to malfunction upon reducing the screen width past a certain point, depending on the width of the element. Unlike position: fixed, the sticky ...

htmlcsssticky

Can a <style> tag be included in a .css file without issue?

Within one of our projects, there is a <style> tag placed at the beginning of a CSS file (for the purpose of ensuring CSS highlighting in certain text editors): <style> body { ... } .... Although I am aware that this is considered incorrect ...

css

Struggling to delete a table row using jquery

Currently, I am encountering an issue with removing a specific "tr" element within a table using jQuery. Here's the situation: I have a table where rows are clickable. Upon clicking on a row, I can update the data associated with that particular obj ...

javascriptjqueryhtmldatatable

What is the best way to vertically center a column of images on mobile devices in a responsive manner?

Currently, I am developing an application that showcases the 9 newest photos with a specific tag. To ensure consistency in image sizes, I have set each photo to be 240px wide and 200px tall. My query now is how can I vertically center these images so they ...

jqueryhtmlcsstwitter-bootstrap

Utilizing Bresenham's line drawing algorithm for showcasing box contours

I am seeking a similar behavior to what is demonstrated on , but with some modifications to the boxes: div { display: inline-block; width: 100px; height: 100px; border: 1px solid black; cursor: pointer; } div.selected, div:hover { backgroun ...

javascripthtmlcss

communicating between domains - js

Background: My latest project involves creating a web application that can download and display housing prices. The data source can be found at The Initial Plan: I aimed to fetch the data directly from the provided link using javascript, and then conver ...

javascriptjqueryhtmlcross-domainjquery-csv

Successfully executing complex designs using CSS grid or flexbox

I have a specific responsive layout that I need to achieve using a series of div tags. Below is the HTML structure I have: <div class="container"> <div>1</id> <div>2</id> <div>3</id> <div>4& ...

cssflexboxcss-grid

div not recognizing the minimum height specified in percentage

I'm encountering an issue where one of my divs, content_wrap, is not adhering to the CSS property min-height:100% HTML <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd ...

csshtmlheight

Update the appearance based on the dimensions of the parent container with Bootstrap

Here's the situation I'm facing on my webpage: <div id="myDiv"> <p>A</p> <p>B</p> </div> If 'myDiv' is narrower than width X, display A & B vertically. Otherwise, display A and B horizo ...

htmlcssbootstrap-4

Creating CSS Effects for Text Hover and Transition

Looking for help to implement the hover effect 4 on the following site: . I was able to create a test on JSFiddle, check it out here: https://jsfiddle.net/34aaqh70/ Struggling to make it auto-responsive, any tips would be appreciated. If there's a ...

htmlcss

Creating an SQL select statement with a three-level expression is a complex task that requires careful planning and

How can I create a SQL select query with 3 levels of expressions and statements? Typically, my website operates on an SQLite database and the search results are displayed using the following SQL query: "SELECT DISTINCT * FROM amz WHERE Title LIKE \" ...

phphtmlsqlsqlitesearch

Is there a way to incorporate an icon into the heading of an accordion-group in ngx-bootstrap?

Is it possible to include an icon in the heading of an accordion-group using ngx-bootstrap? For instance: <accordion-group heading="<i class='fa fa-users'></i> Users"> The content goes right in the template. </accordion ...

angularbootstrap-4accordionngx-bootstrap

Setting a customized background color for a designated section of a component

I am trying to create a hover effect at the position of a cursor, similar to what is shown in this example: For reference, I have also created a code snippet: https://jsfiddle.net/onnmwyhd/ Below is the code I am using: HTML <div id="container&q ...

javascriptjqueryhtmlcss

Adjust Sidebar Height to Match Document Height (using React Pro Sidebar)

Having an issue with the height of a sidebar component in Next.js using React Pro Sidebar. It seems to be a JavaScript, HTML, and CSS related problem. I've tried several suggested solutions from Stack Overflow, but none of them seem to work. Surprisin ...

javascripthtmlcssreactjsnext.js

Tips for presenting SQL data in a unique style on an HTML page

My Mysql data is structured as follows: name sub ---------------- a maths a science a history b maths b science a computer a english c computer c history b history c maths I want to pre ...

htmlmysqlsqlpivot-table

Is it possible to shift the image within the <canvas> element without having to redraw the entire canvas?

I created a game board and I am trying to implement drag-and-drop functionality for my pieces, which are in .gif format. However, I am struggling with finding a solution that allows me to move the pieces without constantly redrawing the entire board. Cur ...

javascripthtml

Struggling to make @media queries function while customizing Bootstrap 4 with React Bootstrap

Utilizing Bootstrap 4, I am attempting to modify the "custom-select" class to suit my own design preferences. Below is the HTML and SCSS code I have implemented. It may seem like a simple task. <select className="custom-select" id='sortin ...

reactjsbootstrap-4react-bootstrap

Challenges in using HAML5 Canvas for mathematical applications

Hey there! I'm currently working on utilizing the canvas element to form various shapes, but I've encountered a few challenges when it comes to the mathematical aspect. Issue 1: I need to calculate an angle that is relative to the preceding line ...

javascripthtmlcanvas

How can you successfully submit empty <select ... multiple> HTML elements via POST method?

Within my HTML form, I have incorporated a multi-select box that allows users to select multiple options at once. <select id="eng_0" name="eng_0[]" multiple size="3"> <option value="Privilégier">Privilégier</option> <option valu ...

jqueryhtmlmulti-selecthtml-select

Convert a String to JSON using either JavaScript or jQuery

Currently, I am developing a JavaScript animation script and I am aiming to allow individuals to define behavior declaratively within the HTML. This is the format I envision for my HTML: <div data-animation="top: 600, left: 600, opacity: 1, start: 0.2 ...

javascriptjqueryhtmljson