I'm currently facing some challenges and struggling to find a solution. Unfortunately, I haven't been able to find any guidance on this issue.
Important: To view the output, click on "Run snippet" and make it full screen by clicking on the hamburger icon toggle on smaller screens.
The issue:
When hovering over or activating dropdowns in the navigation header, they extend beyond the container, causing certain items to be cut off.
Issue example:
https://i.sstatic.net/Rq1L3.png
Desired outcome:
Is it possible to have a dropdown menu reach the edge of the container on either the left or the right side, and then shift over accordingly? In the provided image, the red outline extends outside the container, but the green outline would reposition it to render properly.
The code:
document.addEventListener('DOMContentLoaded', function () {
// Get all "navbar-burger" elements
var $navbarBurgers = Array.prototype.slice.call(document.querySelectorAll('.navbar-burger'), 0);
// Check if there are any nav burgers
if ($navbarBurgers.length > 0) {
// Add a click event on each of them
$navbarBurgers.forEach(function ($el) {
$el.addEventListener('click', function () {
// Get the target from the "data-target" attribute
var target = $el.dataset.target;
var $target = document.getElementById(target);
// Toggle the class on both the "navbar-burger" and the "navbar-menu"
$el.classList.toggle('is-active');
$target.classList.toggle('is-active');
});
});
}
});.navbar-item.is-mega {
position: static;
.is-mega-menu-title {
margin-bottom: 0;
padding: .375rem 1rem;
}
}<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
<link href="https://cdnjs.cloudflare.com/ajax/libs/bulma/0.9.1/css/bulma.min.css" rel="stylesheet"/>
<div class="container">
<nav class="navbar ">
<div class="navbar-brand">
&l...