<header class="page-header">
    <div class="navbar">
        <ul class="nav navbar-nav navbar-right pull-right">
            <li class="visible-phone-landscape">
                <a href="#" id="search-toggle">
                    <i class="fa fa-search"></i>
                </a>
            </li>
            <li class="dropdown">
                <a href="#" title="Messages" id="messages" class="dropdown-toggle" data-toggle="dropdown">
                    <i class="glyphicon glyphicon-comment"></i>
                </a>
                <ul id="messages-menu" class="dropdown-menu messages" role="menu">
                    <li role="presentation">
                        <a href="#" class="message">
                            <img src="img/1.png" alt="">
                            <div class="details">
                                <div class="sender">Jane Hew</div>
                                <div class="text">
                                    Hey, John! How is it going? ...
                                </div>
                            </div>
                        </a>
                    </li>
                    <li role="presentation">
                        <a href="#" class="message">
                            <img src="img/2.png" alt="">
                            <div class="details">
                                <div class="sender">Alies Rumiancaŭ</div>
                                <div class="text">
                                    I'll definitely buy this template
                                </div>
                            </div>
                        </a>
                    </li>
                    <li role="presentation">
                        <a href="#" class="message">
                            <img src="img/3.png" alt="">
                            <div class="details">
                                <div class="sender">Michał Rumiancaŭ</div>
                                <div class="text">
                                    Is it really Lore ipsum? Lore ...
                                </div>
                            </div>
                        </a>
                    </li>
                    <li role="presentation">
                        <a href="#" class="text-align-center see-all">
                            See all messages <i class="fa fa-arrow-right"></i>
                        </a>
                    </li>
                </ul>
            </li>
            <li class="dropdown">
                <a href="#" title="8 support tickets" class="dropdown-toggle" data-toggle="dropdown">
                    <i class="glyphicon glyphicon-globe"></i>
                    <span class="count">8</span>
                </a>
                <ul id="support-menu" class="dropdown-menu support" role="menu">
                    <li role="presentation">
                        <a href="#" class="support-ticket">
                            <div class="picture">
                                <span class="label label-important"><i class="fa fa-bell-o"></i></span>
                            </div>
                            <div class="details">
                                Check out this awesome ticket
                            </div>
                        </a>
                    </li>
                    <li role="presentation">
                        <a href="#" class="support-ticket">
                            <div class="picture">
                                <span class="label label-warning"><i class="fa fa-question-circle"></i></span>
                            </div>
                            <div class="details">
                                "What is the best way to get ...
                            </div>
                        </a>
                    </li>
                    <li role="presentation">
                        <a href="#" class="support-ticket">
                            <div class="picture">
                                <span class="label label-success"><i class="fa fa-tag"></i></span>
                            </div>
                            <div class="details">
                                This is just a simple notification
                            </div>
                        </a>
                    </li>
                    <li role="presentation">
                        <a href="#" class="support-ticket">
                            <div class="picture">
                                <span class="label label-info"><i class="fa fa-info-circle"></i></span>
                            </div>
                            <div class="details">
                                12 new orders has arrived today
                            </div>
                        </a>
                    </li>
                    <li role="presentation">
                        <a href="#" class="support-ticket">
                            <div class="picture">
                                <span class="label label-important"><i class="fa fa-plus"></i></span>
                            </div>
                            <div class="details">
                                One more thing that just happened
                            </div>
                        </a>
                    </li>
                    <li role="presentation">
                        <a href="#" class="text-align-center see-all">
                            See all tickets <i class="fa fa-arrow-right"></i>
                        </a>
                    </li>
                </ul>
            </li>
            <li class="divider"></li>
            <li class="hidden-xs">
                <a href="#" id="settings" title="Settings" data-toggle="popover" data-placement="bottom">
                    <i class="glyphicon glyphicon-cog"></i>
                </a>
            </li>
            <li class="hidden-xs dropdown">
                <a href="#" title="Account" id="account" class="dropdown-toggle" data-toggle="dropdown">
                    <i class="glyphicon glyphicon-user"></i>
                </a>
                <ul id="account-menu" class="dropdown-menu account" role="menu">
                    <li role="presentation" class="account-picture">
                        <img src="img/avatars/5.png" alt="" class="img-circle">
                        Philip Daineka
                    </li>
                    <li role="presentation">
                        <a href="#" class="link">
                            <i class="fa fa-user"></i>
                            Profile
                        </a>
                    </li>
                    <li role="presentation">
                        <a href="#" class="link">
                            <i class="fa fa-calendar"></i>
                            Calendar
                        </a>
                    </li>
                    <li role="presentation">
                        <a href="#" class="link">
                            <i class="fa fa-inbox"></i>
                            Inbox
                        </a>
                    </li>
                </ul>
            </li>
            <li class="visible-xs">
                <a href="#" class="btn-navbar" data-toggle="collapse" data-target=".sidebar" title="">
                    <i class="fa fa-bars"></i>
                </a>
            </li>
            <li class="hidden-xs"><a href="login.html"><i class="glyphicon glyphicon-off"></i></a></li>
        </ul>
        <form id="search-form" class="navbar-form pull-right" role="search">
            <input type="search" class="form-control search-query" placeholder="Search...">
        </form>
        <div class="notifications pull-right">
            <div class="alert pull-right">
                <a href="#" class="close ml-xs" data-dismiss="alert">&times;</a>
                <i class="fa fa-info-circle mr-xs"></i> Check out Light Blue <a id="notification-link"
                    href="#">settings</a> on the right!
            </div>
        </div>
    </div>
</header>