clipbucket/upload/styles/cb_2014/layout/header.html

    <nav class="navbar navbar-default navbar-fixed-top" role="navigation">
        <div class="navbar-container clearfix">
            <!-- Brand and toggle get grouped for better mobile display -->
            <div class="navbar-header">

                <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#khulja-sim-sim">
                    <span class="sr-only">Toggle navigation</span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                </button>


                <button type="button" class="navbar-toggle nav-toggle" data-toggle="collapse" data-target="#navbar-search-collapse">
                    <span class="glyphicon glyphicon-search"></span>
                </button>

                <a class="navbar-brand cb-logo" href="#">{$website_title}</a>
            </div>

                {$head_menu=cb_menu()}

                <div class="navbar-collapse navbar-sm-search collapse" id="navbar-search-collapse">
                    <form class="" role="search">
                        <div class="input-group">
                            <input type="text" class="form-control" placeholder="Search">
                            <span class="input-group-btn">
                                <button class="btn btn-default" type="button">Go!</button>
                            </span>
                        </div>
                    </form>
                </div>


                <ul class="nav navbar-nav main-nav navbar-collapse collapse" id="khulja-sim-sim">


                    {foreach $head_menu as $menu}
                        {if $menu@iteration < 5}
                            <li {if $menu.active}class="active"{/if}><a href="{$menu.link}">{$menu.name}</a></li>
                        {/if}
                    {/foreach}


                    <!-- Shown to small devices only Start  @todo : Add condition for logged in user -->

                    <li class="navbar-sm-login-links"><a href="#" data-toggle="modal" data-target="#login-modal">{lang code='login'}</a></li>
                    <li class="navbar-sm-login-links"><a href="{link name="signup"}">{lang code='Create new account'}</a></li>
                    <!-- Ends -->

                    {if count($head_menu)>4}
                    <li class="dropdown">
                        <a href="#" class="dropdown-toggle" data-toggle="dropdown">More <b class="caret"></b></a>
                        <ul class="dropdown-menu">

                            {foreach $head_menu as $menu}
                            {if $menu@iteration > 4}
                                <li {if $menu.active}class="active"{/if}><a href="{$menu.link}">{$menu.name}</a></li>
                            {/if}
                            {/foreach}
                        </ul>
                    </li>
                    {/if}
                </ul>


                <!-- Shown to small devices only Start-->
                <form class="navbar-form navbar-search navbar-left" role="search">
                    <div class="input-group">
                        <input type="text" class="form-control" placeholder="Search">
                        <span class="input-group-btn">
                            <button class="btn btn-default" type="button">Go!</button>
                        </span>
                    </div>

                </form>
                <!-- Ends -->


                <!-- Shown to Large displays only Start -->
                <ul class="nav navbar-nav navbar-right nav-login-btns">

                    {if userid()}
                    <li class="dropdown myaccount-dd">
                        <span class="dropdown-toggle theme_color col-md-12" data-toggle="dropdown"> <img class="img-circle" src="{$userquery->getUserThumb('','small',userid())}" style="width: 40px; height: 40px;"/> {$userquery->username}<b class="caret"></b></span>
                        <ul class="dropdown-menu">
                            <li><a href="myaccount.php">{lang code="my_account"}</a></li>
                            <li><a href="manage_videos.php">{lang code="Manage Videos"}</a></li>
                            <li><a href="channels.php">View Channels</a></li>
                            <li><a href="upload.php">Upload</a></li>
                            <li class="divider"></li>
                            <li><a href="logout.php">Logout</a></li>
                        </ul>
                    </li>
                    {else}
                    <li>
                        <div>
                            <a href="{link name="signup"}" class="btn btn-primary btn-success btn-sm">{lang code="Create Account"}</a>
                            <a href="#" data-toggle="modal" data-target="#login-modal" class="btn btn-primary btn-sm">{lang code="Login"}</a>
                        </div>

                    </li>
                    {/if}
                </ul>
                <!-- Ends -->


                <!-- Shown to Large displays only Start -->
                    <div class="btn-group" style="margin-left:25px;">
					<button class="btn btn-primary btn-sm visible-md visible-lg">Uploads</button>
					<button class="btn btn-primary btn-sm dropdown-toggle visible-md visible-lg" data-toggle="dropdown">
					<span class="caret"></span>
					</button>
					<ul class="dropdown-menu">
						<li><a href="upload.php">Upload Video</a></li>
						<li><a href="photo_upload.php">Upload Photo</a></li>
					</ul>
					</div>
                <!-- Ends -->


                <!-- SHown to middle size displays only  @todo : Add condition for logged in user -->
                <ul class="nav navbar-nav navbar-right nav-login-dd">
                    <li class="dropdown">
                        <a href="#" class="dropdown-toggle" data-toggle="dropdown"><i class="glyphicon glyphicon-search"></i></a>
                        <div class="dropdown-menu container">
                            <form>
                                <input class="form-control" placeholder="Search your stuff up!"/>
                            </form>
                        </div>
                    </li>
                    <li class="dropdown">
                        <a href="#" class="dropdown-toggle" data-toggle="dropdown"><i class="glyphicon glyphicon-user"></i></a>
                        <div class="dropdown-menu">
                            <form name="login-form" role="form" action="{link name='signup'}" method="post">
                                <div class="form-group">
                                    <label for="login_username">{lang code="Username"}</label>
                                    <input type="email" class="form-control" id="login_username" placeholder="Enter username">
                                </div>

                                <div class="form-group">
                                    <label for="login_password">{lang code="Password"}</label>
                                    <input type="email" class="form-control" id="login_password" placeholder="Enter password">
                                </div>

                                <div class="checkbox">
                                    <label>
                                        <input type="checkbox"> {lang code="Remeber me"}
                                    </label>
                                </div>

                                <button class="btn btn-primary btn-sm btn-block">{lang code="Login"}</button>
                                <a href="{link name='signup'}" class="btn btn-primary btn-sm btn-block">{lang code="Create new accoutn"}</a>
                            </form>
                        </div>
                    </li>
                </ul>
            </div>

            <!-- Ends -->


    </nav>

<script>
    $('.nav-login-dd li .dropdown-menu').click(function(e){
        e.preventDefault();
        return false;
    })
</script>


<div class="modal fade" id="login-modal" role="dialog" aria-hidden="true">
    <div class="modal-dialog">
        <form name="login-form" role="form" action="{link name='signup'}" method="post">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                <h4 class="modal-title">{lang code="Login"}</h4>
            </div>
            <div class="modal-body">

                    <div class="form-group">
                        <label for="login_username">{lang code="Username"}</label>
                        <input type="text" class="form-control" id="login_username"  name="username"  placeholder="Enter username">
                    </div>

                    <div class="form-group">
                        <label for="login_password">{lang code="Password"}</label>
                        <input type="password" class="form-control" id="login_password" name="password" placeholder="Enter password">
                    </div>

                    <div class="checkbox">
                        <label>
                            <input type="checkbox"> {lang code="Remember me"}
                        </label>
                    </div>


            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">{lang code="Cancel"}</button>
                <input type="submit" class="btn btn-primary" value="{lang code='Login'}" name="login">
            </div>
        </div><!-- /.modal-content -->
        </form>
    </div><!-- /.modal-dialog -->
</div><!-- /.modal -->