Take charge of Bootstrap 4 dropdown transformation class while creating a Megamenu

I am currently working on creating a Megamenu using Bootstrap 4's dropdown Component.

The issue I'm facing is related to Javascript adding CSS styles with transform, such as 

transform: translate3d(9px, 5px, 0px);

This is causing disruption in my layout. Here is the markup for my Megamenu:

<div class="dropdown-menu megamenu">
  <div class="row">
    <div class="col-sm-4">
      {{ menus.menu_links(item.below, attributes.addClass('mega-menu-item'), menu_level + 1) }}
    </div>
    <div class="col-sm-4">
      {{ view_megamenu(item.url, 'first_column') }} 
    </div>
    <div class="col-sm-4">
     {{ view_megamenu(item.url, 'second_column') }}
    </div>
   </div>
  </div>

Given that my website's layout is fluid, I want the Megamenu to always be centered full-width with some margin on either side.

Can you suggest the most effective and stable way to achieve this while using both Bootstrap 4 and the Dropdown component?

jqueryhtmlcssbootstrap-4megamenu

Answer №1

In order to avoid this issue, make sure your "dropdown-menu" element is contained within an element with the "navbar" class)

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">
<div class="navbar dropdown">
  <button class="btn btn-primary dropdown-toggle" type="button"
    id="about-us" data-toggle="dropdown" aria-haspopup="true" 
    aria-expanded="false">List</button>
  <div class="dropdown-menu" aria-labelledby="about-us">
    <a class="dropdown-item" href="#">item1</a>
    <a class="dropdown-item" href="#">item2</a>
    <a class="dropdown-item" href="#">item3</a>
  </div>
</div>
<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.12.9/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>

jsfiddle.net

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

The SVG image exceeds the boundaries of the parent column div in bootstrap

I am struggling to make a SVG fit inside a column in a bootstrap div with col-lg-4. I tried using img-fluid, but it did not work as expected. The SVG should automatically adjust its size to fit the parent div. However, that is not happening. .star-ratin ...

htmlcsstwitter-bootstrapsvgbootstrap-4

Select one href by clicking and apply addClass

I have a one-page HTML document with links in the header. I want to make it so that when I click on a link (<a>), only that specific link changes its class to (.links). I've tried various methods, but the current jQuery method I'm using ad ...

javascriptjqueryonclick

"Using jQuery's each method on an array can retrieve items that are not present

I am currently working on a dropdown list of categories that have specific id's and names associated with them. My main goal with this jQuery script is to loop through the category id's in the list. If it doesn't find the category id, I wan ...

jquery

Exploring Symfony2 controller integration with Javascript arguments

I am currently working on a project with Symfony2 and I have a question regarding receiving arguments from a template in a controller. My goal is to take the value of the argument and store it in the database. The argument's value will be generated by ...

phpjavascriptjquerysymfony

Get rid of the drop-down shadow effect

Currently working on a website project for a client and looking to remove the blue "shadow" effect from the dropdown menus. I believe the code that needs editing is as shown below: .main_nav ul.sub-menu { position: absolute; top: 65px; width: ...

cssmenushadow

Hide a div using jQuery by implementing an if statement and adding a new class

I am trying to find a solution for hiding a div generated by a plugin when disabled=true. I have been researching on SO and came across the idea of using .attr to locate disabled=true and then adding a CSS class with display: none to hide it. Unfortunately ...

jqueryif-statementaddclass

Triggering an Ajax request by clicking on a link

In the scenario where you have a specific word on a webpage that you would like to trigger an onclick event and initiate an ajax request, what is the best approach to accomplish this? ...

javascripthtmlajax

The Bootstrap Vue Pagination feature seems to be experiencing an issue where data is not being displayed on

My VueJS application utilizes Bootstrap Vue Table and Pagination components to display a list of users with pagination. Although the data is successfully loaded, page 2 of the pagination does not render any information. The Users component passes the nece ...

vue.jspaginationvuejs2bootstrap-4bootstrap-vue

How can a JQuery slideshow be programmed to only iterate once?

Looking to create a slideshow that transitions between images every two seconds? Check out the code snippet below: HTML: <div class="fadeIn"> <img src="img/city.png" class="remimg" id="city"> <img src="img/shop.png" class="remimg" ...

javascriptjqueryhtml

Obtain the value of a range using JQuery

I made an attempt to retrieve the value of JQuery's range slider when it changes. Here is how I tried: On the HTML/PHP page: <div class="total"> <label for="">Total</label> <p><span class="monthrc"></span ...

javascriptjqueryhtmljquery-ui

Customize the yellow background color of Safari's autofill feature by following these simple

When I open this image in Safari, this is what I see: https://i.stack.imgur.com/KbyGP.png However, this is the code I have: https://i.stack.imgur.com/4wEf0.png References: How to Remove WebKit's Banana-Yellow Autofill Background Remove forced ye ...

javascripthtmlcsssafari

What is the best way to remove an instance of the MagicSuggest JQ plugin?

Recently, I've been utilizing MagicSuggest in my forms and have encountered situations where I need to dismantle it and reinstate the input field. I have carefully reviewed the entirety of the documentation but am unable to locate a method to achieve ...

jqueryautocompletemagicsuggest

"Unlocking the JSON element with jQuery Ajax: A step-by-step guide

I am trying to pinpoint a specific element within my JSON data: { "taskMeta": "Some meta info", "tasksLib": [ { "task001": { "id":"1", "createDate":"01.02.17", "dueDate":"02.03.17", "au ...

javascriptjqueryjsonajax

Using Javascript to automatically submit a form when the enter key is pressed

Can anyone help me with a password form issue? I want the enter key to trigger the submit button but it's not working for me. I understand that the password can be viewed in the source code, this is just for practice purposes. <!DOCTYPE html> & ...

javascripthtmlcssenter

The CSS transition timing seems to be malfunctioning as not all elements are smoothly transitioning, specifically the text within the li and anchor tags is not

I'm attempting to achieve a smooth transition effect on a navbar when hovering over it, changing the color from one to another. The navbar contains a list of words, but I am encountering an issue where during the transition, there is a quick flash (ap ...

htmlcssangularsass

The PHP script encountered an issue with the HTTP response code while processing the AJAX contact form, specifically

Struggling to make this contact form function properly, I've tried to follow the example provided at . Unfortunately, all my efforts lead to a fatal error: "Call to undefined function http_response_code() in /hermes/bosoraweb183/b1669/ipg.tenkakletcom ...

javascriptphpjqueryajaxforms

ng-init assign value to a new object

<!DOCTYPE html> <html> <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script> <body> <div ng-app="myApp" ng-controller="myCtrl2" ng-init="person = new Person('Al ...

javascripthtmlangularjs

Having trouble with your custom accordion content in React JS not sliding open?

Check out my progress so far with the fully functioning view here This is the structure of the Accordion component: const Accordion = ({ data }) => { return ( <div className={"wrapper"}> <ul className={"accordionList ...

javascriptcssreactjs

How can a single value from one table be allocated to multiple values in another table?

There are 3 distinct tables that I am working with: process table: | projectNo | process | studio | +-----------+---------+--------+ | 170001 | ANM BLD | APEX | | 170001 | ANM BLD | CANVAS | | 170002 | CGI MOD | APEX | | 170003 | CGI MOD | ...

phphtmlmysql

Troubleshooting an issue with an AJAX request

Having trouble getting the HTML back from an AJAX call - works in FF but returns "null" in IE when using alert(result.html()); Here's the code, any suggestions? Thanks! The errors variable is also null in IE. It doesn't matter what element I u ...

javascriptjqueryajax