<div class="top-bar">
        <nav class="navbar navbar-default top-bar">
            <div class="menu-bar-mobile" id="open-left"><i class="ti-menu"></i>
            </div>
            <ul class="nav navbar-nav navbar-right top-elements">
                <li class="piluku-dropdown dropdown">
                    <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false"><i class="ion-ios-bell-outline icon-notification"></i><span class="badge info-number message">22</span></a>
                    <ul class="dropdown-menu dropdown-piluku-menu  animated fadeInUp wow notification-drop neat_drop dropdown-right" data-wow-duration="1500ms" role="menu">
                        <li>
                            <a href="profile.html">
                                <div class="hexagon danger">
                                    <span><i class="ion-ios-alarm-outline"></i></span>
                                </div>
                                <span class="text_info"> Privacy settings have been changed</span>
                                <span class="time_info">3:30am</span>
                            </a>
                        </li>
                        <li>
                            <a href="profile.html">
                                <div class="hexagon success">
                                    <span><i class="ion-ios-body-outline"></i></span>
                                </div>
                                <span class="text_info"> Tim has added you as friend</span>
                                <span class="time_info">4:30am</span>
                            </a>
                        </li>
                        <li>
                            <a href="profile.html">
                                <div class="hexagon warning">
                                    <span><i class="ion-ios-cart-outline"></i></span>
                                </div>
                                <span class="text_info"> New item added</span>
                                <span class="time_info">6:07am</span>
                            </a>
                        </li>
                        <li>
                            <a href="profile.html">
                                <div class="hexagon info">
                                    <span><i class="ion-ios-calendar-outline"></i></span>
                                </div>
                                <span class="text_info"> reminder please complete the task</span>
                                <span class="time_info">3:30pm</span>
                            </a>
                        </li>
                        <li>
                            <a href="profile.html">
                                <div class="outline-hexagon">
                                    <span><i class="ion-ios-checkmark-outline"></i></span>
                                </div>
                                <span class="text_info"> Marked as complete</span>
                                <span class="time_info">1:30pm</span>
                            </a>
                        </li>
                        <li>
                            <a href="profile.html" class="last_info">See all notifications</a>
                        </li>

                    </ul>
                </li>
                <li class="piluku-dropdown dropdown">
                    <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false"><i class="ion-ios-box-outline icon-notification"></i><span class="badge info-number bell">22</span></a>
                    <ul class="dropdown-menu dropdown-piluku-menu  animated fadeInUp wow message_drop neat_drop dropdown-right" data-wow-duration="1500ms" role="menu">
                        <li>
                            <a href="mailbox.html">
                                <div class="avatar_left"><img src="images/avatar.jpeg" alt=""></div>
                                <div class="info_right">
                                    <span class="text_head pull-left">Megan fox</span>
                                    <span class="time_info pull-right">3:30am <i class="online ion-record"></i></span>
                                    <div class="text_info"> Hi want to know about the company freelance for wizard</div>
                                </div>
                            </a>
                        </li>
                        <li>
                            <a href="mailbox.html">
                                <div class="avatar_left"><img src="images/avatar.jpeg" alt=""></div>
                                <div class="info_right">
                                    <span class="text_head pull-left">Megan fox</span>
                                    <span class="time_info pull-right">3:30am <i class="online ion-record"></i></span>
                                    <div class="text_info"> Hi want to know about the company freelance for wizard</div>
                                </div>
                            </a>
                        </li>
                        <li>
                            <a href="mailbox.html">
                                <div class="avatar_left"><img src="images/avatar.jpeg" alt=""></div>
                                <div class="info_right">
                                    <span class="text_head pull-left">Megan fox</span>
                                    <span class="time_info pull-right">3:30am <i class="online ion-record"></i></span>
                                    <div class="text_info"> Hi want to know about the company freelance for wizard</div>
                                </div>
                            </a>
                        </li>
                        <li>
                            <a href="mailbox.html">
                                <div class="avatar_left"><img src="images/avatar.jpeg" alt=""></div>
                                <div class="info_right">
                                    <span class="text_head pull-left">Megan fox</span>
                                    <span class="time_info pull-right">3:30am <i class="online ion-record"></i></span>
                                    <div class="text_info"> Hi want to know about the company freelance for wizard</div>
                                </div>
                            </a>
                        </li>
                    </ul>
                </li>
                <li class="piluku-dropdown dropdown">
                    <!-- @todo Change design here, its bit of odd or not upto usable -->

                    <a href="#" class="dropdown-toggle avatar_width" data-toggle="dropdown" role="button" aria-expanded="false">
                        <span class="avatar-holder"><img src="images/avatar.jpeg" alt=""></span>
                        <span class="avatar_info">Bootstrap &nbsp; <small><i class="ion ion-chevron-down"></i></small></span>
                        <span class="drop-icon"></span>
                    </a>
                    <ul class="dropdown-menu dropdown-piluku-menu  animated fadeInUp wow avatar_drop neat_drop dropdown-right" data-wow-duration="1500ms" role="menu">
                        <li>
                            <a href="profile.html"> <i class="ion-android-settings"></i>Settings</a>
                        </li>
                        <li>
                            <a href="mailbox.html"> <i class="ion-android-chat"></i>Messages</a>
                        </li>
                        <li>
                            <a href="dropzone-file-upload.html"> <i class="ion-android-cloud-circle"></i>Upload</a>
                        </li>
                        <li>
                            <a href="profile.html"> <i class="ion-android-create"></i>Edit profile</a>
                        </li>
                        <li>
                            <a href="lock-screen.html" class="logout_button"><i class="ion-power"></i>Logout</a>
                        </li>
                    </ul>
                </li>
<!--                 <li class="chat_btn">
                    <a href="#" class="right-bar-toggle flatRed">
                        <i class="ion-ios-people-outline"></i>
                    </a>
                </li>
 -->            </ul>

        </nav>

    </div>
    <!-- /top-bar -->