While using Nav, it is necessary to adjust the height of the drop-down menu to accommodate the content when the sub-menu

My dropdown menu has multiple submenus, and I'm facing an issue where the submenu content overlaps the container when opened. I want the container to scale to the height of the submenu content when opening, and then reduce back when closing the submenu.

https://i.sstatic.net/5IsAF.png

https://i.sstatic.net/otm3S.png

Here's the code snippet:

<link href="https://cdn.jsdelivr.net/npm/bootstrap/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3... </script>
<style>
/* CSS styles here */
</style>
<nav class="navbar navbar-expand-md navbar-dark fixed-top bg-dark">
    <!-- Navbar code -->
</nav>

Certain JavaScript logic was added to handle the submenu behavior:

// JavaScript logic here

If you'd like to see the complete code, you can check it out here.

I could use some assistance in refining the menu layout and functionality for a seamless user experience. Any help would be greatly appreciated!

Although I tried implementing a script to adjust the container height, I couldn't quite get it to shrink back when closing the submenu. Your guidance on this issue would be invaluable.

htmlcssdropdownbootstrap-5nav

Answer №1

.menu-dropdown.expanded {
    height: auto;
}

Consider eliminating this

Answer №2

Success! I’ve finally uncovered the solution to this persistent issue.


document.addEventListener("DOMContentLoaded", function() {
    document.querySelectorAll('.dropdown-menu').forEach(function(element) {
        element.addEventListener('click', function(e) {
            e.stopPropagation();
        });
    });

    const subMenus = [];

    document.querySelectorAll('.dropend .dropdown-toggle').forEach(function(menu, index) {

        subMenus.push(new bootstrap.Dropdown(menu));

        menu.addEventListener('click', function(e) {

            for (let i = 0; i < subMenus.length; i++) {
                if (i !== index) subMenus[i].hide();
            }
            
            if ($(".sub-menu1").hasClass("show")) {
                 $(".navbar .megamenu#solutions-services").addClass("menu-enlarge1");
            } 
            else {
                 $(".navbar .megamenu#solutions-services").removeClass("menu-enlarge1");
            }
           
            // Code goes here...

        });

    });

    // Additional code for smaller screens

});


html {
    overflow-x: hidden;
}

body {
    padding-right: 0 !important;
    font-family: "Cera-PRO-Regular", Arial, sans-serif;
    font-weight: 300 !important;
    font-size: 1rem;
    line-height: 1.6;
    overflow-x: hidden;
    margin-top: 70px;
}

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

Transforming a radio button into a checkbox while successfully saving data to a database (toggling between checked and unchecked)

I have limited experience in web development, but I recently created a webpage that allows users to input data into an SQL database. While my code is functional, I believe there's room for optimization. I pieced it together from various online resourc ...

javascriptphphtml

Using an HTML file as the source for an image in the <img src=""> tag is a simple process that can greatly enhance the visual appeal of your webpage

My goal is to utilize an html file as the source for an image file within the <img src=""> tag in order to prevent mixed-content warnings when using an http image over https. For instance: index.html: <img src="./image.html" > image.htm ...

javascriptjqueryhtmlhttpsmixed-content

Images are not displayed when utilizing font-awesome on a MVC 5 website

I'm having an issue where adding font-awesome to the style bundle is causing images not to display correctly. Instead of showing the right icon, I am getting a transparent box. My style bundle configuration looks like this: bundles.Add(new StyleBund ...

csstwitter-bootstrapasp.net-mvc-5font-awesome

Specialized selection option with disabled function

Looking for assistance with a script to create a custom select box. I have UL and LI elements overlapping a select element, but I want to prevent the UL LI from opening when the select has a "disabled" attribute. Can anyone provide guidance on how to achie ...

javascriptjqueryhtmlselect

What could be causing the issue with ng-include not functioning properly?

Issue with ng-include Organized Directory Structure : ssh_project --public ----templates ------header.html ------footer.html ----views ------index.html Here is the content of my index.html file <body> <h1>Hello</h1> <div ng ...

javascripthtmlangularjs

Get the number of elements that match your XPath expression

Currently engaged in an XML and XSLT project with a challenging task; the query requires me to count the number of open ports with a specific port number using the following path: liste_hotes --) hote --) liste_ports --) port num_p ...

htmlxmlxsltxpath

The functionality of CSS columns is not supported in Firefox browser

Currently, I am working on a web page design inspired by Pinterest. However, I have encountered an issue where the columns property is not functioning properly in Firefox. You can find the example I am trying to replicate here. Feel free to test it in Fir ...

htmlcssfirefox

Choosing an element within a table following a different element using Selenium

On a webpage, a table displays various plain text elements (filenames) on the left side and hyperlinks to PDF files on the right: Red report Download PDF Blue report Download PDF Green report Download PDF These pages have multiple entries, and t ...

htmlselenium

Tips for showcasing a Bootstrap alert

I'm attempting to integrate Bootstrap Alerts into my project, but I'm struggling to display them programmatically. Here is the HTML snippet: <div class="alert alert-success alert-dismissible fade show" role="alert" id="accepted-meal-al ...

javascriptjquerycsstwitter-bootstrap

Altering documents post Bower installation

I took the initiative to manually download the css and js files for an angular module (here). In order to make a small adjustment, I modified the css (specifically changing max-width in the media query): Original: @media only screen and (max-width: 800px ...

htmlcssangularjsbower

Updating a column in a SQL Table via an Ajax request

I am attempting to store the on or off value from a form into an SQL database by calling a JS function with an AJAX request that sends it to a PHP page for processing. I seem to be facing some issues with my code and could really use some assistance as the ...

javascriptjqueryhtmlsqlajax

The navigation bar toggle feature seems to be malfunctioning in Bootstrap 5

I've encountered a problem with the navbar while using Bootstrap 5.0.2 dist. The toggler on the navbar expands and collapses, but it doesn't roll back after clicking the bar icon. I have implemented the fixed-top navbar from the Bootstrap 5 examp ...

htmltwitter-bootstrapnavbartogglebuttonbootstrap-5

The power of PHP's echo function comes alive as it seamlessly connects

I am currently working on developing a product catalog using PHP. Below is the HTML flex-container code: <div class="products"> <?php echo file_get_contents("http://192.168.64.2/CodeWay/Pages/product.php"); ?> & ...

phphtml

Fade out with CSS after fading in

After setting an animation property on an HTML element to display it, I want the same animation in reverse when a button is clicked to hide it. How can I achieve this effect? "Working Animation": .modal { animation: myAnim 1s ease 0s 1 normal fo ...

htmlcss

What is the process for adding a download link to my canvas once I have updated the image?

Is it possible to create a download link for an image that rotates when clicked, and then allows the user to download the updated image? Any help would be appreciated.////////////////////////////////////////////////////////////////////// <!DOCTYPE ht ...

javascriptjqueryhtmlcsscanvas

Display additional text when hovering over an object

Is there a way to make my text expand and display all of its content when hovered over, especially for those sections that are longer than the div size? I currently have some code implemented, but it seems to reveal the text horizontally. I am looking fo ...

htmlcss

What is the best way to utilize a color picker to apply CSS color to a parent element?

When the pencil glyphicon is clicked, a color picker appears. I only want to apply the selected color from the color picker to the list elements that are the grand parent of the pencil glyphicon. Here's a snippet of my Ruby front-end code: <% cat ...

javascriptjqueryhtmlcss

How can we programmatically trigger a click action on an element obtained through an HTTP request with the help of Set

window.addEventListener("load" , () => { setInterval(() => { let xhttp = new XMLHttpRequest(); xhttp.open("GET", "./messagedUsers.php", true); xhttp.onload = () => { if(xhttp.re ...

javascriptphphtmlcss

Need help aligning content with flexbox? Having trouble with align-content and justify-content not working correctly?

First and foremost, I want to express my gratitude in advance for any assistance you can provide. My goal was to neatly align three pieces of content within each row, similar to the image displayed here: https://i.sstatic.net/vtsRj.png To achieve this lay ...

htmlcssreactjsflexbox

Create a distinct CSS animation 'origin' declaration for every <g> element

I am using CSS animation to apply a 'wobble' effect to each letter within a word. The letters are represented by SVG groups <g>. However, in the provided example, the wobbling effect becomes more pronounced with each subsequent letter, wher ...

cssanimationsass