CODEWITHSUNDEEP
htmlcsswordpresstwitter-bootstrap
Jordan Lewallen
Jordan Lewallen

Reputation: 1851

Bootstrap Dropdown Custom Toggle Not Opening in Wordpress

I have a custom dropdown toggle that will display a list of items. This works as it should on my static HTML site, however while converting to Wordpress, the toggle no longer works. This is what it should look like:

enter image description here

When the caret is clicked on the Wordpress site, the dropdown refuses to appear. Something is strange because I placed the default dropdown menu direct from the Bootstrap components page and the dropdown carent button did not show properly either.

Here is my HTML:

<div class="playlist-select">
        <div class="discovery-mode">
                DISCOVERY MODE
        </div>
        <div class="playlist-choice">
            <button class="btn btn-default dropdown-toggle playlist-select-dropdown" type="button" id="dropdownMenu1" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
                    FRESH FINDS
                    <span class="caret"></span>
            </button>
            <ul class="dropdown-menu select-dropdown" aria-labelledby="dropdownMenu1">
                <li><a href="#">Action</a></li>
                <li><a href="#">Another action</a></li>
                <li><a href="#">Something else here</a></li>
            </ul>
        </div>
    </div>

Upvotes: 0

Views: 174

Answers (2)

Poldira
Poldira

Reputation: 183

You have to enqueue bootstrap to the footer of your site to get this to work properly:

add_action('wp_enqueue_scripts','load_bootstrap');
function load_bootstrap() {
wp_enqueue_script('bootstrap', //path to bootstrap or cdn here, array(), '', true);
}

Main theme: wp_enqueue_script('bootstrap', get_template_directory_uri(). '/assets/js/bootstrap.min.js', array(), '', true);

Child theme: wp_enqueue_script('bootstrap', get_stylesheet_directory_uri() . '/assets/js/bootstrap.min.js', array(), '', true);

The true part of that code loads the js in the footer so that it comes in and applies after the dom is ready.

Upvotes: 2

Hassan Ali
Hassan Ali

Reputation: 9

Might be Possible you need to check z-index. I think so overflow:hidden or no proper position is causing an issue to it.

Upvotes: 0

Related Questions