Popover menu and Bootstrap (it doesn’t appear)

I’m trying to develop a panel for a popup menu when you are over a link in the bootstrap navbar.

It doesn’t appear after firing my function.

This is the code:
HTML

<nav class="navbar navbar-default navbar-lower">
        <div class="container-fluid">
            <!-- Brand and toggle get grouped for better mobile display -->
            <div class="navbar-header">
                <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-2" aria-expanded="false">
                    <span class="sr-only">Toggle navigation</span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>

                </button>


            </div><!-- navbar-header -->
            <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-2">

                <ul class="nav navbar-nav">
                    <a href="#" class="pull-left" style="margin-right: 10px;">
                    <img id="logo" src="assets/img/sendingparcel/logo.png" ></img>
                    </a>
                                        <li class="active">
                        <a href="#">
                            Home
                            <span class="sr-only">
                                (current)
                            </span>
                        </a>
                    </li>
                    <li class="menu">
                        <a href="#">
                            Sturen
                        </a>


                    </li>
                    <li>
                        <a href="#">
                            Ontvangen
                        </a>
                    </li>
                    <li>
                        <a href="#">
                            Zakelijke oplossingen
                        </a>
                    </li>
                    <li>
                        <a href="#">
                            Klandentiest
                        </a>
                    </li>
                    <li>
                        <a href="#">
                            E-Shop
                        </a>
                    </li>

                </ul>
                {% include popmenu.html %}



            </div> <!-- collapse navbar-collapse -->


        </div>
    </nav><!-- end navbar navbar-default -->

The popmenu code is the following:

<div class="popover">
<div class="row">
    <div class="col-md-12">

            <div class="row">
                <div class="col-md-3">
                    <span class="titlel3">Zakelijk pakjes sturen</span>
                    <hr>
                    <em>Wat kan ik versturen?<span class="glyphicon glyphicon-menu-right"></span></em>
                    <em>Onze oplossingen<span class="glyphicon glyphicon-menu-right"></span></em>
                    <ul>
                        <li>
                            Nationaal
                        </li>
                        <li>
                            Internationaal
                        </li>
                        <li>
                            Sprintlevering
                        </li>
                        <li>
                            Retour
                        </li>
                        <li>
                            Fullfillment
                        </li>
                    </ul>
                </div>
                <div class="col-md-3">
                    <span class="titlel3">Retouroplossingen</span>
                    <hr>
                    <em>Lorem<span class="glyphicon glyphicon-menu-right"></span></em>
                    <em>Ipsum<span class="glyphicon glyphicon-menu-right"></span></em>
                    <em>Dolor<span class="glyphicon glyphicon-menu-right"></span></em>
                    <br><br>
                    <span class="titlel3">Voor webshops</span>
                    <hr>
                    <em>Lorem<span class="glyphicon glyphicon-menu-right"></span></em>
                    <em>Ipsum<span class="glyphicon glyphicon-menu-right"></span></em>
                    <em>Dolor<span class="glyphicon glyphicon-menu-right"></span></em>


                </div>
                <div class="col-md-3">
                    <span class="titlel3">Mail sturen</span>
                    <hr>
                    <em>Lorem<span class="glyphicon glyphicon-menu-right"></span></em>
                    <em>Ipsum<span class="glyphicon glyphicon-menu-right"></span></em>
                    <em>Dolor<span class="glyphicon glyphicon-menu-right"></span></em>
                    <br><br>
                    <span class="titlel3">Ontvangen</span>
                    <hr>
                    <em>Lorem<span class="glyphicon glyphicon-menu-right"></span></em>
                    <em>Ipsum<span class="glyphicon glyphicon-menu-right"></span></em>
                    <em>Dolor<span class="glyphicon glyphicon-menu-right"></span></em>

                </div>
            </div><!-- row -->

        </div>
        </div>
    </div>

And this is the style:

.popover{

    top: 40px;
    left: -28px;
    position:absolute;
    display:none;
    border: 2px solid red;
}

If I move the popover div in the “li” element it appears but obviously with a bad layout.

Surely I’m wrong with the jquery selector.
How can I select the right element in my three ?


Source: jquery

Leave a Reply