BootStrap Navigation Menu Bar – Total

If you want to customize the CSS of Bootstrap Navigation Menu Bar then use the following CSS.
Ref: http://stackoverflow.com/questions/18529274/change-navbar-color-in-twitter-bootstrap-3

/* navbar */
.navbar-default {
    background-color: #F8F8F8;
    border-color: #E7E7E7;
}
/* title */
.navbar-default .navbar-brand {
    color: #777;
}
.navbar-default .navbar-brand:hover,
.navbar-default .navbar-brand:focus {
    color: #5E5E5E;
}
/* link */
.navbar-default .navbar-nav > li > a {
    color: #777;
}
.navbar-default .navbar-nav > li > a:hover,
.navbar-default .navbar-nav > li > a:focus {
    color: #333;
}
.navbar-default .navbar-nav > .active > a, 
.navbar-default .navbar-nav > .active > a:hover, 
.navbar-default .navbar-nav > .active > a:focus {
    color: #555;
    background-color: #E7E7E7;
}
.navbar-default .navbar-nav > .open > a, 
.navbar-default .navbar-nav > .open > a:hover, 
.navbar-default .navbar-nav > .open > a:focus {
    color: #555;
    background-color: #D5D5D5;
}
/* caret */
.navbar-default .navbar-nav > .dropdown > a .caret {
    border-top-color: #777;
    border-bottom-color: #777;
}
.navbar-default .navbar-nav > .dropdown > a:hover .caret,
.navbar-default .navbar-nav > .dropdown > a:focus .caret {
    border-top-color: #333;
    border-bottom-color: #333;
}
.navbar-default .navbar-nav > .open > a .caret, 
.navbar-default .navbar-nav > .open > a:hover .caret, 
.navbar-default .navbar-nav > .open > a:focus .caret {
    border-top-color: #555;
    border-bottom-color: #555;
}
/* mobile version */
.navbar-default .navbar-toggle {
    border-color: #DDD;
}
.navbar-default .navbar-toggle:hover,
.navbar-default .navbar-toggle:focus {
    background-color: #DDD;
}
.navbar-default .navbar-toggle .icon-bar {
    background-color: #CCC;
}
@media (max-width: 767px) {
    .navbar-default .navbar-nav .open .dropdown-menu > li > a {
        color: #777;
    }
    .navbar-default .navbar-nav .open .dropdown-menu > li > a:hover,
    .navbar-default .navbar-nav .open .dropdown-menu > li > a:focus {
        color: #333;
    }
}

Code from line number 28 to 32 controls the CSS of the Dropdown.

And if you are looking for Multi level BootStrap drop down menu then see this link
http://www.smartmenus.org/blog/smartmenus/create-advanced-bootstrap-3-navbars-zero-config/

jQuery Traversing – Ancestors

<!DOCTYPE html>
<html>
<head>
<style></style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script>
$(document).ready(function(){
    $("li").parent().css({"list-style-type": "none"});
});
</script>
</head>
<body>
<ul>
<li>child 1</li>
<li>child 2</li>
</ul>
</body>
</html>

The above code will take out the bullets from the front of ul.

JQuery Form Validation

For JQuery form validation I will use
http://formvalidator.net/index.html

First include JQuery library, then include the validator jquery and add the initialization code.

Here is the HTML

<body>
<form action="" method="">
<p>
<label for="name">Name (required):</label>
<input type="text" name="" id="" placeholder="Enter Name" data-validation="required" class="inputs">
</p>
<p>
<label for="email">Email (required):</label>
<input type="email" name="email" id="" placeholder="Enter Email" data-validation="email" class="inputs">
</p>
<p>
<input type="submit">
</p>
</form>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script src="jquery.form-validator.js"></script>
<script> $.validate(); </script>
</body>

Custom Two Level Responsive DropDown Menu in CSS & JQuery

OK I took the main CSS of the dropdown navigation menu bar from here and took it a bit further.
http://www.tutorialrepublic.com/codelab.php?topic=faq&file=show-hide-dropdown-on-mouse-hover

Many many thanks to nOjan from Stack Overflow for the JQuery help
http://stackoverflow.com/questions/31862003/jquery-select-ul-of-two-different-classes

Here is the CSS version and JQuery version of the Custom Two Level Responsive DropDown Menu in CSS & JQuery in my DropBox.

Thank you.

Customizing Flex Slider

Put the entire FlexSlider HTML inside a wrapper div and use the following CSS for the wrapper div.

.wrapper {
	max-width:960px;
	min-width:250px;
	margin:0 auto;
	border:1px solid #F00;
}

To reduce the Margin from the bottom of the FlexSlider edit the margin from this piece of code in the CSS file.

.flexslider {
  margin: 0 0 60px;
  background: #ffffff;
  border: 4px solid #ffffff;
  position: relative;
  zoom: 1;
  -webkit-border-radius: 4px;
  -moz-border-radius: 4px;
  border-radius: 4px;
  -webkit-box-shadow: '' 0 1px 4px rgba(0, 0, 0, 0.2);
  -moz-box-shadow: '' 0 1px 4px rgba(0, 0, 0, 0.2);
  -o-box-shadow: '' 0 1px 4px rgba(0, 0, 0, 0.2);
  box-shadow: '' 0 1px 4px rgba(0, 0, 0, 0.2);
}

If you want the Previous and Next Buttons to be always visible then change the Opacity from 0 to 1 in this piece of code in the CSS file.

.flex-direction-nav a {
  text-decoration: none;
  display: block;
  width: 40px;
  height: 40px;
  margin: -20px 0 0;
  position: absolute;
  top: 50%;
  z-index: 10;
  overflow: hidden;
  opacity: 0;
  cursor: pointer;
  color: rgba(0, 0, 0, 0.8);
  text-shadow: 1px 1px 0 rgba(255, 255, 255, 0.3);
  -webkit-transition: all 0.3s ease-in-out;
  -moz-transition: all 0.3s ease-in-out;
  -ms-transition: all 0.3s ease-in-out;
  -o-transition: all 0.3s ease-in-out;
  transition: all 0.3s ease-in-out;
}

If you want to stop that movement of the Previous and Next arrows on hover then change the left:-50px and right:-50px to 10px.

.flex-direction-nav .flex-prev {
  left: -50px;
}
.flex-direction-nav .flex-next {
  right: -50px;
  text-align: right;
}

If you want to use your own icons or images for the Previous and Next arrow buttons then first of all disable this piece of code from the CSS file by CSS commenting.

.flex-direction-nav a:before {
  font-family: "flexslider-icon";
  font-size: 40px;
  display: inline-block;
  content: '\f001';
  color: rgba(0, 0, 0, 0.8);
  text-shadow: 1px 1px 0 rgba(255, 255, 255, 0.3);
}
.flex-direction-nav a.flex-next:before {
  content: '\f002';
}

Now edit these following classes as shown.

.flex-direction-nav .flex-prev {
  left: -50px;
  background-image:url(images/left.png);
  background-repeat:no-repeat;
  width:45px;
  height:45px;
}
.flex-direction-nav .flex-next {
  right: -50px;
  /*text-align: right;*/
  background-image:url(images/right.png);
  background-repeat:no-repeat;
  width:45px;
  height:45px;
}

Put this code on the head section to initialize the slider.

&lt;script type="text/javascript" charset="utf-8"&gt;
$(window).load(function() {
$('.flexslider').flexslider(
{
            animation: 'slide',
            controlsContainer: '.flexslider',
	    pauseOnAction: true,
	    useCSS: false,
	    prevText: "",
	    nextText: "",    
}
);
});
&lt;/script&gt;

If you want to edit the position of the pagination circles then add margin-bottom to the following class. Here I added margin-bottom:65px; to bring the pagination circles above the slider images.

.flex-control-paging li a {
  width: 11px;
  height: 11px;
  display: block;
  background: #666;
  background: rgba(0, 0, 0, 0.5);
  cursor: pointer;
  text-indent: -9999px;
  -webkit-box-shadow: inset 0 0 3px rgba(0, 0, 0, 0.3);
  -moz-box-shadow: inset 0 0 3px rgba(0, 0, 0, 0.3);
  -o-box-shadow: inset 0 0 3px rgba(0, 0, 0, 0.3);
  box-shadow: inset 0 0 3px rgba(0, 0, 0, 0.3);
  -webkit-border-radius: 20px;
  -moz-border-radius: 20px;
  border-radius: 20px;
  margin-bottom:65px;
}

If you want to move the pagination bullets to the right side from its default center position then add the following CSS to the CSS file.

.flex-control-paging  {
	text-align:right;
	right:45px;
	font-size:1px;
}

If you want to stop that fade in hover effect of the Previous and Next arrows then change the opacity to 1 from their default values in these codes.

.flexslider:hover .flex-direction-nav .flex-prev {
  opacity: 1;
  left: -10px;
}
.flexslider:hover .flex-direction-nav .flex-prev:hover {
  opacity: 1;
}
.flexslider:hover .flex-direction-nav .flex-next {
  opacity: 1;
  right: 10px;
}

Carousel

To make Carousel using FlexSlider add the carousel class.

<div class="wrapper">
<div class="flexslider carousel">
<ul class="slides">
<li>
<img src="images/slide1.jpg" />
<p class="captexts">Texts........</p>
</li>
<li>
<img src="images/slide2.jpg" />
<p class="captexts">Texts........</p>
</li>
<li>
<img src="images/slide3.jpg" />
<p class="captexts">Texts........</p>
</li>
</ul>
</div>
</div>

And here is the CSS

.captexts {
margin-top:0;
width:98%;
background-color:#333;
color:#fff;
text-align:center;
padding:1%;
min-height:150px;
}

And this is the Initialization JS.

<script type="text/javascript" charset="utf-8">
$(window).load(function() {
  $('.flexslider').flexslider({
    animation: "slide",
    animationLoop: true,
    itemWidth: 210,
    itemMargin: 5,
    minItems: 2,
    maxItems: 3,
  });
});
</script>

Flex Slider Links
http://www.woothemes.com/flexslider/
http://flexslider.woothemes.com/index.html