Question posted in 
first of all let all knows, i used other theme and i put bootstrap modal and collapse but it’s not working i don’t know why its doing like this. see link:
Click on here for see what is problem i got.!!!
Click also on Search icon, i added collapse but it’s also not working. please help thanks in advance.
<!DOCTYPE html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Climate</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="author" content="" />
<!-- Facebook and Twitter integration -->
<meta property="og:title" content=""/>
<meta property="og:image" content=""/>
<meta property="og:url" content=""/>
<meta property="og:site_name" content=""/>
<meta property="og:description" content=""/>
<meta name="twitter:title" content="" />
<meta name="twitter:image" content="" />
<meta name="twitter:url" content="" />
<meta name="twitter:card" content="" />
<!-- Place favicon.ico and apple-touch-icon.png in the root directory -->
<link rel="shortcut icon" href="favicon.ico">
<link href='https://fonts.googleapis.com/css?family=Playfair+Display:400,700,400italic,700italic|Merriweather:300,400italic,300italic,400,700italic' rel='stylesheet' type='text/css'>
<link href="https://fonts.googleapis.com/css?family=Dancing+Script:400,700|Lobster" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Lato:100,100i,300,300i,400,400i,700,700i,900,900i" rel="stylesheet">
<!-- Animate.css -->
<link rel="stylesheet" href="css/animate.css">
<!-- Icomoon Icon Fonts-->
<link rel="stylesheet" href="css/icons.css">
<!-- Icomoon Icon Fonts-->
<link rel="stylesheet" href="css/icomoon.css">
<!-- Simple Line Icons -->
<link rel="stylesheet" href="css/simple-line-icons.css">
<!-- Flexslider -->
<link rel="stylesheet" href="css/flexslider.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.6.2/css/bootstrap-select.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/flag-icon-css/0.8.2/css/flag-icon.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<link rel="stylesheet" href="css/style.css">
<!-- Modernizr JS -->
<script src="js/modernizr-2.6.2.min.js"></script>
<!-- FOR IE9 below -->
<!--[if lt IE 9]>
<script src="js/respond.min.js"></script>
<![endif]-->
</head>
<body>
<div id="fh5co-container">
<div class="js-sticky">
<div class="fh5co-main-nav">
<div class="container-fluid">
<div class="fh5co-menu-1 col-sm-9">
<ul>
<li><a href="#" data-nav-section="home">Home</a></li>
<li class="dropdown"><a class="dropdown-toggle" data-toggle="dropdown" href="#">About <span class="caret"></span></a>
<ul class="dropdown-menu sub-menu-dropdown">
<li><a href="#"><i class="fa fa-bullseye" aria-hidden="true"></i> Observatory</a></li>
<li><a href="#"><i class="fa fa-cog" aria-hidden="true"></i> Objectives</a></li>
<li><a href="#"><i class="fa fa-database" aria-hidden="true"></i> Components</a></li>
</ul>
</li>
<li class="dropdown"><a class="dropdown-toggle" data-toggle="dropdown" href="#">Data <span class="caret"></span></a>
<ul class="dropdown-menu sub-menu-dropdown">
<li><a href="#"><i class="fa fa-line-chart" aria-hidden="true"></i> Tools</a></li>
<li><a href="#"><i class="fa fa-file-text" aria-hidden="true"></i> Data Access</a></li>
<li><a href="#"><i class="fa fa-file-text-o" aria-hidden="true"></i> Local Climate Data</a></li>
<li><a href="#"><i class="fa fa-soundcloud" aria-hidden="true"></i> Regional Climate Data</a></li>
</ul>
</li>
<li><a href="#">Weather Forecasting</a></li>
<li><a href="#">Publications</a></li>
<li><a href="#">Education Us</a></li>
<li><a href="#">Contact</a></li>
</ul>
</div>
<div class="fh5co-menu-2 col-sm-3">
<button class="header-login" data-toggle="modal" data-target="#myModal"><i class="fa fa-sign-in" aria-hidden="true"></i> Login</button>
<div class="modal fade" id="myModal" role="dialog">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
<h4 class="modal-title" id="myModalLabel">Modal title</h4>
</div>
<div class="modal-body">
...
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Save changes</button>
</div>
</div>
</div>
</div>
<select class="selectpicker" data-width="fit">
<option data-content='<span class="flag-icon flag-icon-es"></span>'></option>
<option data-content='<span class="flag-icon flag-icon-gb"></span>'></option>
</select>
<button class="search-icon" type="button" data-toggle="collapse" data-target="#collapseExample" aria-expanded="false" aria-controls="collapseExample"><img src="images/search-icon.png"></button>
<div class="collapse" id="collapseExample">
<div class="well">
...............Search Area Text will be here...............
</div>
</div>
</div>
</div>
</div>
</div>
<div id="fh5co-home" class="js-fullheight" data-section="home">
<div class="flexslider">
<div class="fh5co-text">
<div class="container">
<div class="row">
<h1 class="to-animate"><a href="#"><img src="images/logo.png" alt=""></a></h1>
<h2 class="to-animate maintitle">Welcome to Información Climática</h2>
</div>
</div>
</div>
<ul class="slides">
<li style="background-image: url(images/slide_1.jpg);" data-stellar-background-ratio="0.5"></li>
<li style="background-image: url(images/slide_2.jpg);" data-stellar-background-ratio="0.5"></li>
<li style="background-image: url(images/slide_3.jpg);" data-stellar-background-ratio="0.5"></li>
<li style="background-image: url(images/slide_4.jpg);" data-stellar-background-ratio="0.5"></li>
</ul>
</div>
</div>
</div>
<!-- jQuery -->
<script src="js/jquery.min.js"></script>
<!-- jQuery Easing -->
<script src="js/jquery.easing.1.3.js"></script>
<!-- Bootstrap -->
<script src="js/bootstrap.min.js"></script>
<!-- Bootstrap DateTimePicker -->
<script src="js/moment.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.6.2/js/bootstrap-select.min.js"></script>
<script src="js/bootstrap-datetimepicker.min.js"></script>
<!-- Waypoints -->
<script src="js/jquery.waypoints.min.js"></script>
<!-- Stellar Parallax -->
<script src="js/jquery.stellar.min.js"></script>
<!-- Flexslider -->
<script src="js/jquery.flexslider-min.js"></script>
<script>
$(window).load(function() {
$('.flexslider').flexslider({
direction: "vertical",
animation: "fade"
});
});
$(function(){
$('.selectpicker').selectpicker();
});
</script>
<!-- Main JS -->
<script src="js/main.js"></script>
</body>
</html>
Here is Custom Javascript Code:
;(function () {
'use strict';
// iPad and iPod detection
var isiPad = function(){
return (navigator.platform.indexOf("iPad") != -1);
};
var isiPhone = function(){
return (
(navigator.platform.indexOf("iPhone") != -1) ||
(navigator.platform.indexOf("iPod") != -1)
);
};
var fullHeight = function() {
if ( !isiPad() && !isiPhone() ) {
$('.js-fullheight').css('height', $(window).height());
$(window).resize(function(){
$('.js-fullheight').css('height', $(window).height());
})
}
};
var sliderMain = function() {
$('#fh5co-home .flexslider').flexslider({
animation: "fade",
slideshowSpeed: 5000
});
$('#fh5co-home .flexslider .slides > li').css('height', $(window).height());
$(window).resize(function(){
$('#fh5co-home .flexslider .slides > li').css('height', $(window).height());
});
};
var sliderSayings = function() {
$('.clients-area .flexslider').flexslider({
animation: "slide",
slideshowSpeed: 5000,
directionNav: false,
controlNav: false,
directionNav: true,
smoothHeight: true,
animationLoop: true,
itemWidth: 160,
itemMargin: 7,
minItems: 2,
maxItems: 7,
move: 1,
});
}
var fs = $('#fh5co-sayings .flexslider'),
dataItem = fs.data('item'),
item = fs.find('.item');
// Wrap divs
for (var i = 0; i < item.length; i+=dataItem) {
item.slice(i, i+dataItem).wrapAll('<div class="items"></div>');
}
// Initialize flexslider
fs.flexslider({
selector: '.slides > .items',
animation: "slide",
animationLoop: false,
directionNav: false,
slideshow: false,
smoothHeight: true,
itemMargin: 0,
minItems: 1,
maxItems: 1
});
var offcanvasMenu = function() {
$('body').prepend('<div id="fh5co-offcanvas" />');
$('body').prepend('<a href="#" class="js-fh5co-nav-toggle fh5co-nav-toggle"><i></i></a>');
$('.fh5co-main-nav .fh5co-menu-1, .fh5co-main-nav .fh5co-menu-2').each(function(){
var $this = $(this);
$('#fh5co-offcanvas').append($this.clone());
});
// $('#fh5co-offcanvas').append
};
var mainMenuSticky = function() {
var sticky = $('.js-sticky');
sticky.css('height', sticky.height());
$(window).resize(function(){
sticky.css('height', sticky.height());
});
var $section = $('.fh5co-main-nav');
$section.waypoint(function(direction) {
if (direction === 'down') {
$section.css({
'position' : 'fixed',
'top' : 0,
'width' : '100%',
'z-index' : 2
}).addClass('fh5co-shadow');;
}
}, {
offset: '400px'
});
$('.js-sticky').waypoint(function(direction) {
if (direction === 'up') {
$section.attr('style', '').removeClass('fh5co-shadow');
}
}, {
offset: function() { return -$(this.element).height() + 69; }//70 ki bjaye 69 likhain ge to theek ho jaye ga
});
};
$(function() {
var header = $(".fh5co-main-nav");
$(window).scroll(function() {
var scroll = $(window).scrollTop();
if (scroll >= 200) {
header.removeClass('fh5co-main-nav').addClass("fh5co-main-nav darkHeader");
} else {
header.removeClass("fh5co-main-nav darkHeader").addClass('fh5co-main-nav');
}
});
});
// Parallax
var parallax = function() {
$(window).stellar();
};
// Burger Menu
var burgerMenu = function() {
$('body').on('click', '.js-fh5co-nav-toggle', function(event){
var $this = $(this);
$('body').toggleClass('fh5co-overflow offcanvas-visible');
$this.toggleClass('active');
event.preventDefault();
});
};
var scrolledWindow = function() {
$(window).scroll(function(){
var scrollPos = $(this).scrollTop();
$('#fh5co-home .fh5co-text').css({
'opacity' : 1-(scrollPos/300),
'margin-top' : (-212) + (scrollPos/1)
});
$('#fh5co-home .flexslider .fh5co-overlay').css({
'opacity' : (.5)+(scrollPos/2000)
});
if (scrollPos > 200) {
$('#fh5co-home .fh5co-text').css('display', 'none');
} else {
$('#fh5co-home .fh5co-text').css('display', 'block');
}
});
$(window).resize(function() {
if ( $('body').hasClass('offcanvas-visible') ) {
$('body').removeClass('offcanvas-visible');
$('.js-fh5co-nav-toggle').removeClass('active');
}
});
};
var goToTop = function() {
$('.js-gotop').on('click', function(event){
event.preventDefault();
$('html, body').animate({
scrollTop: $('html').offset().top
}, 500);
return false;
});
};
// Page Nav
var clickMenu = function() {
var topVal = ( $(window).width() < 769 ) ? 0 : 58;
$(window).resize(function(){
topVal = ( $(window).width() < 769 ) ? 0 : 58;
});
$('.fh5co-main-nav a:not([class="external"]), #fh5co-offcanvas a:not([class="external"])').click(function(event){
var section = $(this).data('nav-section');
if ( $('div[data-section="' + section + '"]').length ) {
$('html, body').animate({
scrollTop: $('div[data-section="' + section + '"]').offset().top - topVal
}, 500);
}
event.preventDefault();
// return false;
});
};
// Reflect scrolling in navigation
var navActive = function(section) {
$('.fh5co-main-nav a[data-nav-section], #fh5co-offcanvas a[data-nav-section]').removeClass('active');
$('.fh5co-main-nav, #fh5co-offcanvas').find('a[data-nav-section="'+section+'"]').addClass('active');
};
var navigationSection = function() {
var $section = $('div[data-section]');
$section.waypoint(function(direction) {
if (direction === 'down') {
navActive($(this.element).data('section'));
}
}, {
offset: '150px'
});
$section.waypoint(function(direction) {
if (direction === 'up') {
navActive($(this.element).data('section'));
}
}, {
offset: function() { return -$(this.element).height() + 155; }
});
};
// Animations
var homeAnimate = function() {
if ( $('#fh5co-home').length > 0 ) {
$('#fh5co-home').waypoint( function( direction ) {
if( direction === 'down' && !$(this.element).hasClass('animated') ) {
setTimeout(function() {
$('#fh5co-home .to-animate').each(function( k ) {
var el = $(this);
setTimeout ( function () {
el.addClass('fadeInUp animated');
}, k * 200, 'easeInOutExpo' );
});
}, 200);
$(this.element).addClass('animated');
}
} , { offset: '80%' } );
}
};
var aboutAnimate = function() {
var about = $('#fh5co-about');
if ( about.length > 0 ) {
about.waypoint( function( direction ) {
if( direction === 'down' && !$(this.element).hasClass('animated') ) {
setTimeout(function() {
about.find('.to-animate').each(function( k ) {
var el = $(this);
setTimeout ( function () {
el.addClass('fadeInUp animated');
}, k * 200, 'easeInOutExpo' );
});
}, 200);
setTimeout(function() {
about.find('.to-animate-2').each(function( k ) {
var el = $(this);
setTimeout ( function () {
el.addClass('fadeIn animated');
}, k * 200, 'easeInOutExpo' );
});
}, 200);
$(this.element).addClass('animated');
}
} , { offset: '80%' } );
}
};
var sayingsAnimate = function() {
var sayings = $('#fh5co-sayings');
if ( sayings.length > 0 ) {
sayings.waypoint( function( direction ) {
if( direction === 'down' && !$(this.element).hasClass('animated') ) {
setTimeout(function() {
sayings.find('.to-animate').each(function( k ) {
var el = $(this);
setTimeout ( function () {
el.addClass('fadeInUp animated');
}, k * 200, 'easeInOutExpo' );
});
}, 200);
$(this.element).addClass('animated');
}
} , { offset: '80%' } );
}
};
var featureAnimate = function() {
var feature = $('#fh5co-featured');
if ( feature.length > 0 ) {
feature.waypoint( function( direction ) {
if( direction === 'down' && !$(this.element).hasClass('animated') ) {
setTimeout(function() {
feature.find('.to-animate').each(function( k ) {
var el = $(this);
setTimeout ( function () {
el.addClass('fadeInUp animated');
}, k * 200, 'easeInOutExpo' );
});
}, 200);
setTimeout(function() {
feature.find('.to-animate-2').each(function( k ) {
var el = $(this);
setTimeout ( function () {
el.addClass('bounceIn animated');
}, k * 200, 'easeInOutExpo' );
});
}, 500);
$(this.element).addClass('animated');
}
} , { offset: '80%' } );
}
};
var typeAnimate = function() {
var type = $('#fh5co-type');
if ( type.length > 0 ) {
type.waypoint( function( direction ) {
if( direction === 'down' && !$(this.element).hasClass('animated') ) {
setTimeout(function() {
type.find('.to-animate').each(function( k ) {
var el = $(this);
setTimeout ( function () {
el.addClass('fadeInUp animated');
}, k * 200, 'easeInOutExpo' );
});
}, 200);
$(this.element).addClass('animated');
}
} , { offset: '80%' } );
}
};
var foodMenusAnimate = function() {
var menus = $('#fh5co-menus');
if ( menus.length > 0 ) {
menus.waypoint( function( direction ) {
if( direction === 'down' && !$(this.element).hasClass('animated') ) {
setTimeout(function() {
menus.find('.to-animate').each(function( k ) {
var el = $(this);
setTimeout ( function () {
el.addClass('fadeInUp animated');
}, k * 200, 'easeInOutExpo' );
});
}, 200);
setTimeout(function() {
menus.find('.to-animate-2').each(function( k ) {
var el = $(this);
setTimeout ( function () {
el.addClass('fadeIn animated');
}, k * 200, 'easeInOutExpo' );
});
}, 500);
$(this.element).addClass('animated');
}
} , { offset: '80%' } );
}
};
var eventsAnimate = function() {
var events = $('#fh5co-events');
if ( events.length > 0 ) {
events.waypoint( function( direction ) {
if( direction === 'down' && !$(this.element).hasClass('animated') ) {
setTimeout(function() {
events.find('.to-animate').each(function( k ) {
var el = $(this);
setTimeout ( function () {
el.addClass('fadeIn animated');
}, k * 200, 'easeInOutExpo' );
});
}, 200);
setTimeout(function() {
events.find('.to-animate-2').each(function( k ) {
var el = $(this);
setTimeout ( function () {
el.addClass('fadeInUp animated');
}, k * 200, 'easeInOutExpo' );
});
}, 500);
$(this.element).addClass('animated');
}
} , { offset: '80%' } );
}
};
var reservationAnimate = function() {
var contact = $('#fh5co-contact');
if ( contact.length > 0 ) {
contact.waypoint( function( direction ) {
if( direction === 'down' && !$(this.element).hasClass('animated') ) {
setTimeout(function() {
contact.find('.to-animate').each(function( k ) {
var el = $(this);
setTimeout ( function () {
el.addClass('fadeIn animated');
}, k * 200, 'easeInOutExpo' );
});
}, 200);
setTimeout(function() {
contact.find('.to-animate-2').each(function( k ) {
var el = $(this);
setTimeout ( function () {
el.addClass('fadeInUp animated');
}, k * 200, 'easeInOutExpo' );
});
}, 500);
$(this.element).addClass('animated');
}
} , { offset: '80%' } );
}
};
var footerAnimate = function() {
var footer = $('#fh5co-footer');
if ( footer.length > 0 ) {
footer.waypoint( function( direction ) {
if( direction === 'down' && !$(this.element).hasClass('animated') ) {
setTimeout(function() {
footer.find('.to-animate').each(function( k ) {
var el = $(this);
setTimeout ( function () {
el.addClass('fadeIn animated');
}, k * 200, 'easeInOutExpo' );
});
}, 200);
setTimeout(function() {
footer.find('.to-animate-2').each(function( k ) {
var el = $(this);
setTimeout ( function () {
el.addClass('fadeInUp animated');
}, k * 200, 'easeInOutExpo' );
});
}, 500);
$(this.element).addClass('animated');
}
} , { offset: '80%' } );
}
};
// Document on load.
$(function(){
fullHeight();
sliderMain();
sliderSayings();
offcanvasMenu();
mainMenuSticky();
parallax();
burgerMenu();
scrolledWindow();
clickMenu();
navigationSection();
goToTop();
// Animations
homeAnimate();
aboutAnimate();
sayingsAnimate();
featureAnimate();
typeAnimate();
foodMenusAnimate();
eventsAnimate();
reservationAnimate();
footerAnimate();
});
}());
2
Answers
I copied your code. It is working fine here. Run the code snippet
I think the problem is with the css. By inspecting your website’s code I can see that your modal is wrapped by many divs having relative or fixed positioning.
Just get your modal code outside all the divs your problem will get solved. Put it in the following way–