Responsive Template 01

Responsive Template 01

by santosh_patnala

HTML

<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.2/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css">
<!-- Static navbar -->
<nav class="navbar navbar-default navbar-static-top topNav" role="navigation">
    <div class="container">
        <div class="navbar-header col-lg-12">
            <ul class="nav navbar-nav">
                <li><span class="contactNumber"><span class="glyphicon glyphicon-phone-alt" aria-hidden="true"></span>&nbsp;&nbsp;<b>1234567890&nbsp;/&nbsp;0987654321</b>
                    </span>
                </li>
            </ul>
            <ul class="nav navbar-nav navbar-right socialIcons">
                <li><a href="#" class="fbook"></a>
                </li>
                <li><a href="#" class="twitter"></a>
                </li>
                <li><a href="#" class="skype"></a>
                </li>
                <li>
                    <div class="form-group" style="margin:5px 0 0 10px;">
                        <!--10px 30px 0 0-->
                        <input type="text" class="form-control txtSearch" placeholder="" />
                        <!--Search--> <span class="glyphicon glyphicon-search searchIcon" aria-hidden="true"></span>

                    </div>
                </li>
            </ul>
        </div>
    </div>
</nav>
<nav class="navbar navbar-default navbar-static-top bigNavBar" role="navigation">
    <div class="container">
        <div class="navbar-header col-lg-12">
            <button type="button" class="navbar-toggle" data-toggle="modal" data-target="#navModal">
                <!--collapse / modal #navbar / #navModal--> <span class="sr-only">Toggle navigation</span>
 <span class="icon-bar"></span>
 <span class="icon-bar"></span>
 <span class="icon-bar"></span>

            </button> <a class="navbar-brand" href="#">Project name</a>
 <span class="logo-slogan">Cum sociis natoque penatibus</span>

        </div>
        <div...

CSS

/*COMMON SETTINGS START*/
 html {
    position: relative;
    min-height: 100%;
}
body {
    height: 800px;
    /* Margin bottom by footer height */
    margin-bottom: 60px;
}
.footer {
    position: absolute;
    bottom: 0;
    width: 100%;
    /* Set the fixed height of the footer here */
    /*height: 60px;*/
    background-color: #555555;
}
ul {
    list-style: none;
}
*:focus {
    outline: none !important;
}
a, a:hover {
    text-decoration: none;
}
/*COMMON SETTINGS END*/

/*HEADER START*/
 .bigNavBar .navbar-header {
    text-align: center;
}
.navbar-brand {
    color: #c13c3c !important;
    font-size: 38px;
    float: none;
    letter-spacing: 2px;
    margin-top: 22px;
    display: block;
}
.logo-slogan {
    /*color: #999;*/
    border-bottom: 1px solid #c13c3c;
    color: #000;
    font-size: 13px;
    font-style: italic;
    letter-spacing: 4px;
    padding-bottom: 4px;
    word-spacing: 8px;
}
.navbar-default .navbar-nav > .active > a, .navbar-default .navbar-nav > .active > a:hover, .navbar-default .navbar-nav > .active > a:focus {
    background-color: transparent;
    color: #333;
    border-bottom: 1px solid #c13c3c;
}
.caret {
    color: #c13c3c;
}
.dropdown-menu {
    background-color: #e7e7e7;
    box-shadow: 2px 3px 5px -1px rgba(0, 0, 0, 0.176);
    border-top: 0;
}
.navbar-default .navbar-toggle {
    margin-top: 30px;
    border-color: transparent;
}
.navbar-default .navbar-toggle:hover, .navbar-default .navbar-toggle:focus {
    background-color: transparent;
}
/*HEADER END*/

/*NAV LOGIN / REGISTER START*/
 .btn {
    border-radius: 0;
}
.form-control {
    background-color: #FEFEFE;
    border-radius: 0;
    box-shadow: none;
}
.form-control:focus {
    background-color: #FFF;
    box-shadow: none;
}
.loginDropDownMenu {
    width: 250px;
}
.registerDropDownMenu {
    width: 500px;
}
.form-control.dob {
    display: inline;
    width: 15%;
}
.emailSend {
    display: block;
    font-size: 13px;
    font-style: italic;
   ...

JavaScript

$(function () {
     //            $('#txtDOB').datepicker({
     //                format: "dd/mm/yyyy",
     //                startDate: "01/01/1900",
     //                endDate: "today",
     //                clearBtn: true,
     //                calendarWeeks: true,
     //                autoclose: true
     //            });

     //            $('.dropdown-menu').find("#txtDOB").change(function (e) {
     //                e.stopPropagation();
     //                //$('.dropdown-menu').collapse('show');
     //            });

     $("#modalLogin").on("click", function () {
         $("#navModal").removeClass("fade").modal("hide");
         $("#signinModal").addClass("fade").modal("show");
     });

     $("#modalRegister").on("click", function () {
         $("#navModal").removeClass("fade").modal("hide");
         $("#registerModal").addClass("fade").modal("show");
     });

     $("#modalForget").on("click", function () {
         $("#signinModal").removeClass("fade").modal("hide");
         $("#forgetModal").addClass("fade").modal("show");
     });

     $('.dropdown-menu').find('form').click(function (e) {
         e.stopPropagation();
         if ($(e.target).is('[data-toggle=modal]')) {
             $($(e.target).data('target')).modal();
         }
     });

     if ($(window).width() > 767) {
         $("#navModal").modal('hide');
         $("#forgetModal .modal-dialog").addClass("width25percent");
     } else {
         var ht = $(window).height() - 50;
         $("#navModal .modal-dialog").css({
             "height": ht,
                 "overflow-y": "scroll"
         });
         $("#signinModal .modal-dialog").css({
             "height": ht,
                 "overflow-y": "scroll"
         });
         $("#forgetModal .modal-dialog").css({
             "height": ht,
                 "overflow-y": "scroll"
         });
         $("#registerModal .modal-dialog").css({
             "height": ht,
                 "overflow-y": "scroll"
...