Question posted in 
I have used some code which I got from W3 schools to create a megamenu. I want the box to appear centred to the nav button selected, not centred to the whole page. I’m not really concerned about the mini view, it is full screen mode I am trying to set up. Everything else works fine apart from the alignment issue. My full code is here without the header code.
function myFunction() {
var x = document.getElementById("myTopnav");
if (x.className === "navbar") {
x.className += " responsive";
} else {
x.className = "navbar";
}
}* {
box-sizing: border-box;
}
body {
margin: 0;
}
.navbar {
overflow: hidden;
background-color: #333;
border-radius: 5px;
}
.navbar a {
float: left;
font-size: 16px;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
.navbar .icon {
display: none;
}
.dropdown {
float: left;
overflow: hidden;
}
.dropdown .dropbtn {
font-size: 16px;
border: none;
outline: none;
color: white;
padding: 14px 16px;
background-color: inherit;
font: inherit;
margin: 0;
}
.dropdown-content {
display: none;
position: absolute;
background-color: #f9f9f9;
width: 60%;
left: 0;
box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
z-index: 1;
border-radius: 10px;
}
.navbar .dropdown>.dropdown-content {
left: 50%;
transform: translate3d(-50%, 10px, 0);
}
.dropdown-content a {
float: none;
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
text-align: left;
}
.navbar a:hover,
.dropdown:hover .dropbtn {
background-color: #555;
color: white;
}
.dropdown-content a:hover {
background-color: #ddd;
color: black;
}
.dropdown:hover .dropdown-content {
display: block;
}
@media screen and (max-width: 992px) {
.navbar a:not(:first-child),
.dropdown .dropbtn {
display: none;
}
.navbar a.icon {
float: right;
display: block;
}
}
/* Create three equal columns that floats next to each other */
.column {
float: left;
width: 33.33%;
padding: 10px;
background-color: #fff;
height: 250px;
border-radius: 10px;
}
.column a {
float: none;
color: black;
padding: 16px;
text-decoration: none;
display: block;
text-align: left;
}
.column a:hover {
background-color: #eff;
}
/* Clear floats after the columns */
.row:after {
content: "";
display: table;
clear: both;
}
@media screen and (max-width: 992px) {
.navbar.responsive {
position: relative;
}
.navbar.responsive .icon {
position: absolute;
right: 0;
top: 0;
}
.navbar.responsive a {
float: none;
display: block;
text-align: left;
}
.navbar.responsive .dropdown {
float: none;
}
.navbar.responsive .dropdown-content {
position: relative;
}
.navbar.responsive .dropdown .dropbtn {
display: block;
width: 100%;
text-align: left;
}
.column {
width: 100%;
height: auto;
}
}<div class="line">
<div class="s-12 l-12 center">
<div class="navbar margin-bottom" id="myTopnav">
<a href="#home">Home</a>
<a href="#news">News</a>
<a href="#news">News</a>
<a href="#news">News</a>
<a href="#news">News</a>
<div class="dropdown">
<button class="dropbtn">Dropdown <i class="fa fa-caret-down"></i>
</button>
<div class="dropdown-content">
<div class="row">
<div class="column">
<h3>Category 1</h3>
<a href="#">Link 1</a>
<a href="#">Link 2</a>
<a href="#">Link 3</a>
</div>
<div class="column">
<h3>Category 2</h3>
<a href="#">Link 1</a>
<a href="#">Link 2</a>
<a href="#">Link 3</a>
</div>
<div class="column">
<h3>Category 3</h3>
<a href="#">Link 1</a>
<a href="#">Link 2</a>
<a href="#">Link 3</a>
</div>
</div>
</div>
</div>
<a href="#news">News</a>
<a href="#news">News</a>
<div class="dropdown">
<button class="dropbtn">Dropdown <i class="fa fa-caret-down"></i>
</button>
<div class="dropdown-content">
<div class="row">
<div class="column">
<h3>Category 1</h3>
<a href="#">Link 1</a>
<a href="#">Link 2</a>
<a href="#">Link 3</a>
</div>
<div class="column">
<h3>Category 2</h3>
<a href="#">Link 1</a>
<a href="#">Link 2</a>
<a href="#">Link 3</a>
</div>
<div class="column">
<h3>Category 3</h3>
<a href="#">Link 1</a>
<a href="#">Link 2</a>
<a href="#">Link 3</a>
</div>
</div>
</div>
</div>
<a href="javascript:void(0);" class="icon" onclick="myFunction()">
<i class="fa fa-bars"></i>
</a>
</div>
</div>
</div>I have tried targeting the .dropdown-content class mostly. It always seems to break the navbar which inserts the dropdown box inside the navbar instead of below the navbar.
2
Answers
Here is a quick fix if you want your mega menu centered relative to Dropdown you will need to add position relative to it and keep position absolute for your div.dropdown-content (also remove overflow : hidden). You will need as well to give it a width in px (which may not be very responsive, you will have to watch this). Then you can use your translate and left to center it accordingly.
To center the megamenu div under the nav button in full-screen mode, we need to modify the CSS for the dropdown-content class. Here’s how we can update the code:
These changes will center the megamenu div under the nav button. Here’s a brief explanation of the modifications:
position: relative;to the dropdown class to establish a positioning context for the absolute positioning of the dropdown-content.translate3dand replaced it withtranslateX(-50%)to center the dropdown content horizontally.widthtoautoand addedmin-width: 100%to ensure the dropdown is at least as wide as the button, but can expand if needed.These changes should center the megamenu under the nav button in full-screen mode while maintaining the existing functionality.