If you wish to center the triangle within the parent element .nav-link, you will need to apply a slightly different styling approach. The concept involves setting the position of .nav-link to relative, styling its :before pseudo-element as the triangle, and positioning it absolutely.
Megamenu Layout
<div class="collapse navbar-collapse">
<ul class="navbar-nav">
<li class="nav-item dropdown mega">
<a class="nav-link dropdown-toggle" href="#" data-toggle="dropdown" />
<div class="dropdown-menu">
<div class="mega-content">
<div class="container-fluid">
...
</div>
</div>
</div>
</li>
</ul>
</div>
Triangle Style
To achieve this effect, apply the :before pseudo-element to the .dropdown-toggle instead of the .dropdown-menu. Specifically target the styling for when the dropdown is open.
.dropdown.mega.show .dropdown-toggle {
position: relative;
}
.dropdown.mega.show .dropdown-toggle:before {
border-bottom: 10px solid #002a54;
border-left: 10px solid rgba(0, 0, 0, 0);
border-right: 10px solid rgba(0, 0, 0, 0);
width: 0;
height: 0;
content: "";
display: inline-block;
left: calc(50% - 10px);
position: absolute;
bottom: -.5rem;
}
I opted for using :before rather than :after on .dropdown-toggle due to an existing triangle/caret styled with :after. You can overwrite the original one or show your design only when the dropdown menu appears.
The challenge lies in calculating the correct left offset for centering the triangle.
For a triangle constructed with a border width of 10px and centered at 50% of the width, the left offset calculation should be 50% - 10px:
https://i.sstatic.net/lpbK1.png
Screenshot
https://i.sstatic.net/o31kJ.png
Demo: https://jsfiddle.net/davidliang2008/to7uns64/36/