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

What is the process for obtaining bootstrap using native variables?

Looking to create a custom build of a bootstrap library that utilizes native CSS variables? Specifically, the class will use a variable from :root .bg-primary { background-color: var(--primary)!important; } Instead of a fixed color: .bg-primary { ba ...

bootstrap-4

Displaying related data in jqGrid using foreign keys

My jqGrid is connected to a JSON datasource provided by a WCF web service. The WCF method retrieves a list of ids showing the relationship between a user, branch, and role. For instance, a user can have different roles in different branches. [{"entityHash ...

jqueryjsonjqgrid

What could be causing the issue of DataTables not functioning properly when using data from a new partial view?

After adding new data to a table via ajax using a partial view, the DataTable options like show entries, search, and pagination do not work with the new data. Instead, these options still display the old data. How can I refresh the datatables options with ...

jqueryajaxasp.net-mvc

Font reference in IE and Chrome causing HTTPS to fail

Take a look at in both Internet Explorer and Chrome. The header tags (h1 through h6) all have font specifications that rely on a javascript fonts.com specification. However, there seems to be an issue with rendering properly. Interestingly, the fonts ar ...

csshttpstypekit

Looking for assistance with a CSS selector in jQuery

I am working with a WordPress blog that has multiple pages with dropdown subpages on hover. However, I only want the main pages to have links, not the subpages. To achieve this, I am using some basic JavaScript. jQuery(document).ready(function(){ jQ ...

jquerycss

There seems to be a column in the MySQL INSERT query that is unidentifiable and does not exist in the list of fields

id and cost are required as integers and cannot be left empty. I encountered the following error message: 'Error: ER_BAD_FIELD_ERROR: Unknown column 'undefined' in 'field list'' var sql = "INSERT INTO Paintings(` ...

javascripthtmlmysqlnode.jsexpress

"Effortlessly move files with Filedrop HTML 5 and Jquery drag-and-drop feature

I am trying to implement a drag and drop file feature on my webpage, but for some reason, it's not working as expected. The drop zone is supposed to change its background color when I drag a file onto it, but that functionality doesn't seem to be ...

javascriptjqueryhtmlfile-uploaddrag-and-drop

Do search engines crawl and index API calls executed within $(document).ready() or body load()?

In the process of creating a website, we are developing an HTML page factory that will pull static content from our database. However, to enhance these pages, we plan on integrating API calls to various third-party sites such as YouTube, Discogs, Wiki API, ...

jqueryajaxapiseo

Some browsers are failing to display the navigation bar on my website

After working on my website, www.alexanderpopov.org, I encountered an issue with the navigation bar disappearing on some computers and browsers. I'm using css to style it, but the problem persists. Below is the HTML code for your reference. Any advice ...

htmlcss

The expected functionality of sending files via ajax is not happening as anticipated

I am having issues with passing file data along with other inputs to my ajax function. Despite my best efforts, the server is not receiving the files. I'm fairly new to using ajax and Jquery. Below is the code snippet of what I have attempted so far. ...

javascriptjqueryajax

Create a series of vertical lines using jQuery

I'm dealing with a JSON data set that I want to use to generate a grid. In addition to the grid, I also need to display vertical lines above it based on certain values: var arr = []; arr= [ {"Measure":"Air Pollution","Rank":"1","Value":"15.5"}, ...

javascriptjquerycsskendo-ui

ajax-triggered forms

Is there a way to ensure that a form functions correctly when it is included in the HTML loaded via AJAX? I am utilizing jQuery for this task. Any suggestions or advice would be appreciated. ...

jqueryajaxforms

The execution of dynamically generated Javascript in JSON format, returned through AJAX, is prevented when it is appended

Recently, I encountered an issue on my webpage where I made an AJAX request to a PHP script. The PHP script responded with a valid JSON object and set the Content-type header to application/json. After examining the JSON format using console.log(JSON.stri ...

javascriptjqueryajax

Problem encountered with a selection menu

I'm experiencing some trouble with the dropdown menu. Whenever I try to move the mouse to access the dropdown menu, it seems unresponsive. I attempted adjusting the padding on a line of code but ended up moving the entire line instead. Here is the cod ...

javascriptjquerycss

What is the reason behind Chrome's fullscreen mode turning the background black?

I created a webpage with full-screen functionality and made sure to use the correct CSS properties to ensure that my gradient background covers the entire screen perfectly. However, I encountered an issue when clicking the full-screen button in Chrome - th ...

javascripthtmlcssgoogle-chromefullscreen

Tips for concealing a div when the mouse is moved off it?

My goal is to create a simple hover effect where hovering over an image within a view filled with images displays an additional div. This part works as expected. However, I'm facing issues when trying to hide the same div when the user moves out of t ...

javascriptjqueryhoverhide

What is the method to choose an option from a dropdown menu that is devoid of the "select" tag using Selenium in Python?

I am analyzing the HTML code of a dropdown menu that I am interested in. Here is the link to the "Helpfulness" dropdown that I am referring to: After using Selenium to navigate to the page, I need to automate the process of selecting the first option in ...

pythonhtmlseleniumdrop-down-menu

Update a user's role through an ajax button within a user list

In my webpage, I have a customer list being displayed using a loop <?php foreach ($customers as $user){ ... }; ?> Next to each user, there is a "Change role" link that appears in a loop I've implemented an A ...

phpjqueryajaxwordpressroles

Tips for discovering the exact positions of child divs that are Nth siblings within a parent div

I have designed a new calendar interface with dynamic functionality. When the user clicks on any time slot displayed in IMAGE1, a span element is created dynamically to represent 8 hours starting from that clicked time. My question is, how can I access th ...

javascriptjqueryhtmlcss

Ajax continues to operate even if an error is detected

Hello fellow programmers! I'm currently facing an issue with form submission and validation using jQuery with 2 ajax events. The problem lies in the fact that even if the first ajax event (timeconflict.php) returns an error, the second ajax event (res ...

javascriptphpjqueryhtmlajax