Custom Dropdown with Bootstrap


#1

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.


#2

Please post the code.


#3

Edited my original post and added it. I was trying to use bootstraps default dropdown class and toggle data class.