I am building out my sites template using bootstrap (gonna convert to WP template or CI). So my link item is in in a column with my header. The issue I am running into is the dropdown menu is a row outside of where the link is. So wrapping both in the same div isn’t gonna work.
What I am trying to figure out is how to toggle the dropdown using data-toggle. It’s a full width mega menu. I can provide code sniper or screens if needed.
<header id="mse-header">
<div class="header-container container-fluid" id="header-container">
<nav id="header-nav">
<div class="row nav-content row-padding">
<div class="col-xl-12 align-self-end">
<div class="row no-gutters">
<div class="nav-hero col-xl-6 col-lg-6">
<div id="mse-logo" class="logo">
<a href="/" class="logo-link">
<svg></svg>
</a>
</div>
<div class="date">
<div class="date-text long">
<?php echo date("l, <\b\\r>F j"); ?>
</div>
<div class="date-text short">
<?php echo date("D, <\b\\r>M j"); ?>
</div>
</div>
</div>
<div class="col-xl-6 user-tools-container col-lg-6">
<div class="user-tools logged-out">
<button type="button" class="sign-in mse-button rect float-right">Sign In</button>
</div>
</div>
</div>
</div>
<div class="col-xl-6 align-self-end col-lg-6">
<ul class="nav nav-tabs quick-links" role="tablist">
<li class="nav-item quick-link">
<a class="nav-link link" href="#" data-toggle="tab" role="tab" aria-controls="" aria-expanded="true">News</a>
</li>
<li class="nav-item quick-link">
<a class="nav-link link" href="#" data-toggle="tab" role="tab" aria-controls="" aria-expanded="true">Videos</a>
</li>
<li class="nav-item quick-link">
<a class="nav-link link" href="#" data-toggle="tab" role="tab" aria-controls="" aria-expanded="true">Reviews</a>
</li>
<li class="nav-item quick-link">
<a class="nav-link link" href="#" data-toggle="tab" role="tab" aria-controls="" aria-expanded="true">Wikis</a>
</li>
<li class="nav-item quick-link more">
<a class="nav-link link dropdown-toggle" role="tab" aria-controls="" aria-expanded="true" data-toggle="dropdown" data-target="#moremenu">More</a>
</li>
</ul>
</div>
<div class="col-xl-6 align-self-start col-lg-6">
<button type="submit" class="btn mse-button rect">
<i class="far fa-search fa"></i>
</button>
<input type="text" class="form-control" placeholder="Search...">
</div>
</div>
<div class="row more-container slide-container dropdown-menu" data-target="#moremenu">
<div class="col-xl-12 row-padding more-menu slide">
<div class="row menu-content main-menu">
<div class="col-xl-6 menu-side left">
<h1 class="more-menu-label">MstSage Entertainment</h1>
<div class="row">
<div class="col-xl-6">
<ul class="list-unstyled">
<li>
<a href="/">About Us</a>
</li>
<li>
<a href="/">Accessibility</a>
</li>
<li>
<a href="/">Advertise</a>
</li>
<li>
<a href="/">Careers</a>
</li>
<li>
<a href="/">Content Team</a>
</li>
</ul>
</div>
<div class="col-xl-6">
<ul class="list-unstyled">
<li>
<a href="/">Press Release</a>
</li>
<li>
<a href="/">Privacy Policy</a>
</li>
<li>
<a href="/">Site Map</a>
</li>
<li>
<a href="/">Standards</a>
</li>
<li>
<a href="/">Terms of Use</a>
</li>
</ul>
</div>
</div>
</div>
<div class="col-xl-6 menu-side right">
<div class="row">
<div class="col-xl-4">
<h1 class="more-menu-label">Social</h1>
<ul class="list-unstyled">
<li>
<a href="/">Podcasts</a>
</li>
<li>
<a href="/">YouTube</a>
</li>
<li>
<a href="/">Facebook</a>
</li>
<li>
<a href="/">Twitter</a>
</li>
<li>
<a href="/">Twitch</a>
</li>
</ul>
</div>
<div class="col-xl-4">
<h1 class="more-menu-label">Entertainment</h1>
<ul class="list-unstyled">
<li>
<a href="/">Movies</a>
</li>
<li>
<a href="/">TV Shows</a>
</li>
<li>
<a href="/">Comics</a>
</li>
<li>
<a href="/">Tech</a>
</li>
<li>
<a href="/">Trailers</a>
</li>
</ul>
</div>
<div class="col-xl-4">
<h1 class="more-menu-label">Games</h1>
<ul class="list-unstyled">
<li>
<a href="/">PlayStation</a>
</li>
<li>
<a href="/">Xbox</a>
</li>
<li>
<a href="/">Nintendo</a>
</li>
<li>
<a href="/">PC</a>
</li>
<li>
<a href="/">Mobile</a>
</li>
<li>
<a href="/">Upcoming</a>
</li>
<li>
<a href="/">eSports</a>
</li>
</ul>
</div>
</div>
</div>
</div>
<div class="row menu-content legal">
<div class="col-md-4">
<span class="legal-text">
<i class="far fa-copyright fa"></i> 2006 - 2018 MstSage Entertainment</span>
</div>
</div>
</div>
</div>
</nav>
</div>
Here is my header code.