Reputation: 7

Shrinking header when scrolling down in jquery

There are many questions about this on how to animate a header into shrinking as the page scroll down. Although I have a basic idea on many responses to similar questions, my case is quite complex I believe. My header takes too much space when it's static or fixed. The full header contains a pre-header with social media links, small address and a log in button, a title-header: it has the logo image and the name of the business and motto, and finally the navigation menu. Again all of this wrapped in a div with their following sub divs. I used bootstrap as template the menu navigation. Basically what I am looking to do is when scrolling down I would like the pre-header and logo image disappear keeping just the title name, motto and navigation menu. Here's the following code.

Css code is also included in the snippet, sorry if it's too long and confusing. It contains styling of other pages of the same project. Any suggestions would be appreciated.

html{
	background-color: #fff;
}

body{
	margin: 0;
	padding: 0;
	background-color: #f6f6f6 !important;
	
}

.container{
	max-width: 985px;
	margin: 0 auto;
}

#LogoSchool{
	display: inline-block;
	width: 75%;
	height: auto;
}

/*Header section*/

#preheader .preheader1 a.spanish{
	display: inline;
	color: #0b5fb1;
	font-weight: bolder;
	position: relative;
	left: 350px;
	bottom: 7px;
}

#preheader .preheader1 .login{
	float: right;
	margin-right: 125px;
	margin-top: -15px;
}

#preheader .preheader1 .login .btn.btn-primary{
	background-color: #fff;
} /*it doesnt change background color for btn*/


#preheader .preheader-hidden{
	display: none;
}

.socialmedia{
	float: left;
	margin: 3px auto;
}

.top-address{
	display: inline-block;
	font-family: "Comic Sans MS", cursive, sans-serif;
	font-size: 85%;
	text-align: center;
	margin: 0 auto;
	padding: 0 175px;
}

#topaddress{
	margin: 0 -300px;
}

.headermenu{
	background-color: #fff;
	padding-bottom: 1px;
	border: 2px solid #0000001A;
}


.navbar-fixed-top{
	z-index: 9999;
}

#title-header{
	margin: auto;
	box-sizing: border-box;
}


#title-header h1.title{
	display: inline;
	right: 220px;
	padding: 5px;
	 /*eliminated position relative, bottom and left*/
	font-family: 'Francois One', sans-serif;
	font-size: 23px;
	font-weight: bold;
	letter-spacing: 2px;
}

#motto{

	display: inline-block;
	font-family: 'Damion', cursive;
	font-size: 15px;
	letter-spacing: 2px;
	/*eliminated position relative and bottom*/
	color: #000000b3;

}

.col-md-8{
	margin-top: 25px;
}



@media screen and (max-width: 991px){

	#preheader{
		display: none;
	}

	#motto{
		display: none;
	}

	.name-motto{
		display: inline-block;
		margin-left: 50%;
		}

	.navmenu .nav li{
		margin-right: 0;

	}
}

@media screen and (max-width: 766px){

	.col-xs-12{
		margin: 15px auto;
	}

	

}

.


/*Slideshow Pictures*/


/*Navigation Menu Style  */

.navmenu{
  margin: 0 auto;
}



.navmenu ul{
	float: left;

}

.navmenu li{
	display: inline-block;
	list-style: none;
	margin-right: 7px;
}


@media screen and (max-width: 990px){
  .navmenu li{
    display: inline-block;
    margin-top: 5px;
    
  }
}

.navmenu a{
	text-decoration: none;
	display: inline-block;
	padding: 10px 5px;
	border: 2px solid #065aad;
	color: #065aad;
	font-size: 1.1em;
	text-transform: uppercase;
	background-color: #f89d00;
	font-weight: bold;
	transition-property: color, background-color;
	transition-duration: 1s;
}

.nav-pills > li > a {
	border-radius: 7px;
	padding: 7px 20px;
}

.nav-pills> li > a:hover, .nav-pills> li > a:focus {
	background-color: #ff7f00;
}


/* Clear fix */

.clear{
	clear: both;
}

.clearfix:after{
	content: ".";
	display: none;
	height: 0;
	clear: both;
	visibility: hidden;
}

.clearfix{display: inline-block;}

/* Home body container  */

div.container{
	padding: 0;
}

.row.block1>.col-md-4{
  padding: 0;
}

h3.description{
	font-family: "Lucida Sans Unicode", sans-serif;
	font-size: 215%;
	font-weight: bold;
}

p.bodydescription{
	font-size: 25px;
	line-height: 150%;
	text-align: justify;
	
}

#block1 {
  margin-top: 280px;
}

.row.block1{
	
	margin: 85px -10px;
	background-color: #ff7f00;;
	box-sizing: border-box;
}



.jumbotron{
  background-color: white !important;
  margin-top: -50px;
  padding-top: 10px;
  padding-bottom: 10px;
}


.jumbotron a.button{
	text-decoration: none;
	font-size: 18px;
	padding: 11px;
	border: 2px solid #4d92e0;
	border-radius: 10px;
	background-color: #7eacf099;
	color: #0009;

}

/*About Body Content  */

.container .maincontainer{
	margin-top: 230px;
	margin-bottom: 70px;
	padding: 0 20px;

}

.maincontainer p.aboutprgh{
	font-size: 22px;
	line-height: 200%;
}

#half-column{
	border-left: 1px solid #0000001a;
}



.maincontainer h2.aboutheaders{
	font-weight: bold;
	font-size: 26px;
	color: #7d2be2cc;
	text-align: center;
}

#listreasons{
	margin: 0 15px;
	padding-bottom: 85px;

}

#listreasons .listreasons h2.aboutheaders{
	font-weight: bold;
	font-size: 26px;
	color: #7d2be2cc;
	text-align: center;
}

#listreasons .listreasons ul.reasonlist li{
	font-size: 22px;
	line-height: 200%;
	text-align: center;
}

#listreasons .listreasons ul.reasonlist li:before {
    content: "✔";
    margin-right: 4px;
}
.container .imgcontainer{
	margin-top: -50px;
	padding: 120px;
	background-image: url(../images/gueguense.jpg);
	background-repeat: no-repeat;
	background-size: cover;
	background-position: top center;
	opacity: 0.75;
	background-color: #000;
}

@media screen and (max-width: 991px){
	.container .imgcontainer{
		display: none;
	}
}

#noparagraph{
	visibility: hidden;
}


/*Programs Content*/

span.rainbowtext{
  background-image: -webkit-gradient( linear, left top, right top, color-stop(0, #f22), color-stop(0.15, #f2f), color-stop(0.3, #22f), color-stop(0.45, #2ff), color-stop(0.6, #2f2),color-stop(0.75, #2f2), color-stop(0.9, #ff2), color-stop(1, #f22) );
  background-image: gradient( linear, left top, right top, color-stop(0, #f22), color-stop(0.15, #f2f), color-stop(0.3, #22f), color-stop(0.45, #2ff), color-stop(0.6, #2f2),color-stop(0.75, #2f2), color-stop(0.9, #ff2), color-stop(1, #f22) );
  color:transparent;
  -webkit-background-clip: text;
  background-clip: text;
  font-family: 'Coming Soon', cursive;
  font-weight: bold;
}

.container section .programsdividers{
	margin-top: 75px;
}

section .programsdividers span.schoolprogram{
	font-weight: bold;
	color: #de470be6;
}

section .programsdividers a.underlinelink{
	font-style: italic;
	text-decoration: underline;
}

.programbody .col-md-4 img.kidzprog{
	position: relative;
	bottom: 13px;
	transform: rotate(15deg);
}

#myschoollogo{
	width: 20%;
	float: left;
}



/*Programs 2 Content*/

section .programbody ul.levels{
	font-size: 22px;
}

section .programbody ul.levels li{
	display: inline-block;
}


#kidzlearning{
	margin: 35px auto;
}

/*Services Content*/

.container section .programbody h2.servheading{
	font-weight: bold;
}

section .programbody .row .col-md-12 h3.svcheadings,
section .programbody .servicesection h3.svcheadings{
	text-decoration: underline;
	display: inline-block;
}

section .servicesection{
	margin: 50px 0px;
	padding: 5px;
	box-sizing: border-box;
}

#guardabird{
	display: inline-block;
	width: 4%;
}

#vigoron{
	width: 75%;
}

.clearfix{
	overflow: auto;
}

#complab{
	opacity: 0.8;
	padding: 60px 0;
}

#trans-img{
	width: 25%;
	float: right;
}


#libraryimg{
	padding: 95px 0;
}

/* Tables Content*/
section table{
	margin: 30px auto;
}

.table > thead > tr > th{
	border-bottom: 1px solid black;
	background-color: #006fff80;
}

section table, th, td{
	border: 1px solid black;
}

section table, td{
	text-align: right;
}

section table th{
	font-size: 20px;
	text-align: center;
}

section .programbody{
	margin-top: 260px;
}

p.aboutprgh{
	font-size: 22px;
	line-height: 200%;
	padding: 0 5px;
}


tbody td.tableparagraph{
	font-size: 20px;
	line-height: 200%;
}

@media screen and (max-width: 991px){
	#myschoollogo{
		float: none;
		max-width: 55%;
		margin: 0 auto;
	}


	section img.kidzprog{
		transform: none !important;
		max-width: 50%;
		margin: 0 auto;
		box-sizing: border-box;
	}

	p.aboutprgh{
		padding: 0 12px;
	}

	section table{
		width: 85%;
		margin: 15px auto;
	}	
}

@media screen and (max-width: 767px){
	section table.table{
		width: 90%;
		margin: 15px auto;
	}	
}

/* Events Calendar */

.container .calendar-table{
	margin: 10px auto;
}

.container .calendar-table thead th.calendarheader, .container .calendar-table thead th.nobackgroundcolor{
	font-size: 15px;
	background-color: #b2cef280;
}

.container .calendar-table thead th a.month-title{
	font-size: 22px;
	font-family: Rockwell, "Courier Bold", Courier, Georgia, Times, "Times New Roman", serif;
	color: #000;
}

.container .programbody ul{
	list-style: square;
}

.container .programbody ul li{
	font-size: 1.15em;
	line-height: 170%;
}

#list-holidays{
	position: relative;
	left: 300px; 
	bottom: 5px;
} 

/*Contacts*/

.container .col-md-6 .contactcontent{
	padding: 50px;
	font-size: 1.1em;
}

.container .programbody .col-md-6 table#tablecontact tbody .tableparagraph{
	padding: 20px 85px;
}


/* Footer */

footer{
	background-color: #065aad;
}

#signup{
	font-family: 'Lato', 'Helvetica', arial, serif;
	font-size: 16px;
	font-weight: bolder;
	color: white;
	margin-top: 20px;
	margin-left: 3px;

}

label{
	display: none;
}

.formwrapper{
	padding-left: 3px;
	box-sizing: border-box;
}

input[type="email"]{

	padding: 5px 0px;
	border: 1px solid #CDCDCD;
}

.hidden-label{
	overflow: hidden;
	visibility: hidden;
}

.btn{
	margin-top: 1px;
	padding: 3px 5px;
}

.btn-default{
	background-color: #ec9412;
	font-family: 'Lato', 'Helvetica', arial, serif;
	font-size: 87%;
}

.social-media{
	margin-top: 20px:;
}

p.followus{
	margin-top: 20px;
	color: #000;
	font-weight: bolder;
}

h5.minilist{
	margin-top: 20px;
	color: #000;
	font-weight: bolder;
}

.minifooter li{
	/*list-style: circle;*/
	margin: 7px;
	font-weight: bold;
}

ul {
    list-style: none;
}

.minifooter li:before {
    content: "+";
    margin-right: 4px;
}

.minifooter li a{
	color: #fff;
	text-decoration: none;
}

footer .mainfooter ul.minifooter{
	
	text-align: left;
	margin: 0;
	padding: 0;

}

.minicontact{
	color: #fff;
	font-size: 15px;
	line-height: 105%;
}

#minicontact{
	color: #e6b016;

}

.miniaddress{
	margin-top: 20px;
	float: left;
	padding: 0 7px 0 0;
	font-weight: bold;
}

#subfooter{
	display: inline-block;
	padding: 20px 0px;
}

footer .subfooter span.minisubfooter{
	display: block;
	font-size: 13px;
	font-weight: bold;
	float: right;
	line-height: 25%;
}


/* Media queries entries  */
@media screen and (max-width: 991px){
	footer .col-md-3{
		width:100%;
		display:inline-block;
		text-align:center;
		margin-top:10px;
						}

	footer .col-md-3 .socialmedia{
		float: none;
	}

	footer .mainfooter ul.minifooter{
		text-align: center;
		margin: 0;
		padding: 0;
	}

	footer .col-md-3 .miniaddress{
		float: none;
	}
}


/*   */

<!DOCTYPE HTML>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    

    <title>International Language School | ILA</title>

    <!-- Latest compiled and minified CSS -->
      <!-- Latest compiled and minified CSS -->

    <!-- Latest compiled and minified CSS -->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
    <link href="https://fonts.googleapis.com/css?family=Francois+One" rel="stylesheet">
	  <link href="https://fonts.googleapis.com/css?family=Damion" rel="stylesheet">
    <link href="https://fonts.googleapis.com/css?family=Lato" rel="stylesheet"> 
    <link href="css/style.css" rel="stylesheet">
    <script type="text/javascript" src="js/jquery.js"></script>
    <script type="text/javascript" src="js/cycle2.js"></script>
    <script type="text/javascript" src="js/script"></script>

  </head>

  <body>

  <!--to hide Logo Image and to keep only Logo name title and motto when rescreen to small-->
    
    
  	<div class="headermenu navbar navbar-fixed-top">
      <div id="preheader">
      <div class="preheader1">
        <div class="row">
          <div class="container">
            <div class="socialmedia">
                <a href="http://www.facebook.com"><img src="images/apple-touch-icon-precomposed.png" width="20" height="20"></a>
                <a href="http://www.twitter.com"><img src="images/Twitter_icon.png" width="20" height="20"></a>
                <a href="http://www.google.com"><img src="images/GooglePlus-logos-02.png" width="20" height="20"></a>
            </div><!--end of div socialmedia-->

            <p class="top-address">Americas #3, Sector D, Anden 4, Casa Comunitaria. Managua, Nicaragua</p>
            <span class="top-address"> <span class="glyphicon glyphicon-earphone" aria-hidden="true"></span>  +505.22532768</span> <span class="top-address" id="topaddress"><span class="glyphicon glyphicon-envelope" aria-hidden="true"></span> <a href="mailto:[email protected]">[email protected]</a></span>

            <a href="#" class="spanish">En EspaÑol</a>
            <span class="login btn btn-primary">Log In</span>
          </div><!--end of div container-->
        </div><!--end of div row-->
      </div><!--end of div preheader1-->
    </div><!--end of div preheader-->
      <div class="container">
      
        <div id="title-header">
          <div class="row">
            <div class="col-xs-6 col-md-4"><!--eliminated the previous periods before all col-->

              <a href="Home.html"><img class="img-responsive hidden-xs hidden-sm" alt="Responsive image" src="images/Final-ILA-Logo.jpg" id="LogoSchool" alt="School Logo"></a>
              <!--how to "hide" image logo when size becomes small-->
            </div><!--end of .col-xs-6 .col-md-4-->

            <div class="col-xs-12 col-md-8">
              <div class="name-motto">
                <h1 class="title">International Language Academy-ILA</h1>
                <span id="motto">Where there are no barriers</span>
                <!--to keep tittle and motto when resized to small and leave out img logo -->
              </div><!--end of div name-motto-->
              
            </div><!--end of div .col-xs-12 .col-md-8-->

           </div><!--end of div row-->

        </div><!--end div title-header-->

      </div><!--end of div container-->
  		
  		
  		<!--align center the navigation menu-->
      <!--how to adjust padding and margins for navigation when screen is small and medium-->
      <!--to have the nav menu and header fixed when scrolling up and down-->
  		<div class="container">
        <nav class="navmenu">
            <ul class="nav nav-pills center-pills">
              <li><a href="#">Home</a></li>
              <li><a href="#">About Us</a></li>
              <li><a href="#">Programs & Classes</a></li>
              <li><a href="#">Services</a></li>
              <li><a href="#">Events</a></li>
              <li><a href="#">Contact</a></li>
            </ul>
        </nav>
      </div><!--end of div container-->
      
  	</div><!-- end of div headermenu-->
  	
  	

      <div class="container">
        <div class="row block1" id="block1">
          <div class="col-md-8">

            <h3 class="description">Ready for the Challenge?</h3>
            <p class="bodydescription">Inter Language School is the only school in the country that gives the tools to learn the language you need in a fun, practical and affordable way.</p>

          </div><!--end of col md 8-->

          <div class="col-md-4 firstimg">

            <img class="img-responsive" src="images/goal_setting_plan.png"> <!--to adjust image to cover the remaining bottom padding-->

          </div><!--end of col md 4-->
        </div><!--end of div row-->

        <div class="row block1">
          <div class="col-md-4 secondimg">
            <img class="img-responsive" src="images/virtual-classroom.jpg"> <!--to adjust image to cover the remaining bottom padding--> 
          </div><!--end of col md 4-->

          <div class="col-md-8">

            <h3 class="description">We're Different!</h3>
            <p class="bodydescription">We care that our students get a satisfactory level of fluency to communicate. Our students see the difference. </p>
            
          </div><!--end of col md 8-->
        </div><!--end of div row-->

        <div class="row block1">
          <div class="col-md-8">

            <h3 class="description">Exposure</h3>
            <p class="bodydescription">International exposure and language encouragement to speak the language at all times.</p>

          </div><!--end of col md 8-->

          <div class="col-md-4 thirdimg">

            <img class="img-responsive" src="images/Saludos-.jpg"> <!--to adjust image to cover the remaining right padding-->


          </div><!--end of col md 4-->
        </div><!--end of div row-->

        <div class="jumbotron">
          <div class="container">
            <h3 class="description">Special Programs</h3>
            <p class="bodydescription">Need to learn banking, business, medical terms for your profession? Going to a conference but need to communicate the language with your peers? We create special group classes for your needs.</p>
            <a class="button" href="#">Learn more</a>
  
          </div><!--end of div container-->
        </div><!--end of div jumbotron--> <!--to keep the same aligment to the same visual margins and paddings the above small containers and when to keep it when screen size is small-->


    <footer>
      <div class="mainfooter">
        <div class="container">
          <div class="row">
            <div class="col-md-3">
              <h5 id="signup"> Sign Up For Our Newsletter </h5>
              <form class="subscription">
                
                <div class="formwrapper">
                  <label for="Youremail" class="hidden-label">Your Email</label>
                  <input id="Youremail" type="email" name="email" placeholder="Email">
                  <button class="btn btn-default">Subscribe</button><!--make this form responsive-->
                </div><!--end of div formwrapper-->
                
              </form>       
            </div><!--end of div first col md 3-->

            <div class="col-md-3">
              <div class="social-media">
                
                <p class="followus">Follow us on:</p>

                <div class="socialmedia">
                  <a href="http://www.facebook.com"><img src="images/apple-touch-icon-precomposed.png" width="35" height="35"></a>
                  <a href="http://www.twitter.com"><img src="images/Twitter_icon.png" width="35" height="35"></a>
                  <a href="http://www.google.com"><img src="images/GooglePlus-logos-02.png" width="35" height="35"></a>
                </div><!--end of div socialmedia-->
              </div><!--end of div social-media-->
 
            </div><!--end of col md 3-->

            <div class="col-md-3">
              <h5 class="minilist">Quick Links</h5>
              <ul class="minifooter">
                <li><a href="#">EspaÑol</a></li>
                <li><a href="#">Programs &amp; Classes</a></li>
                <li><a href="#">Services</a></li>
                <li><a href="#">Events</a></li>
                <li><a href="#">Jobs</a></li>
                <li><a href="#">Contact</a></li>
              </ul>
            </div>

            <div class="col-md-3">
              <div class="miniaddress">
                <p class="minicontact">Americas #3, Sector D, Anden 4, Casa Comunitaria.</p> 
                <p class="minicontact">Managua, Nicaragua</p>
                <p class="minicontact">+505.22532768</p>
                <a href="mailto:[email protected]" id="minicontact">[email protected]</a>
              </div><!--end of class miniaddress-->
              
            </div><!--end of last col md 3-->
             
          </div><!--end of div row-->
        </div><!--end of div container-->

      </div><!--end of mainfooter-->

      <div class="subfooter">
          <div class="row" id="subfooter">
            <div class="container">
              <span class="minisubfooter">This is a practice Webpage</span>
              <span class="minisubfooter"> Designed by Alfredo DSw &reg;</span>
            </div><!--end of class container-->
          </div><!--end of class row-->
      </div><!--end of div subfooter-->   

    </footer>      

  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
  <script type="text/javascript" src="js/script.js"></script>
  </body>
  </html>

Upvotes: 0

Answers (3)

Bhumi Patel

Reputation: 589

Bootstrap navbar animation on scroll: http://codepen.io/davidtmiller/pen/yepJoX and when you scroll nav bar change it's class to .affix and you can hide preheader like this.

.navbar-default.affix #preheader{
   display: none;
}

Upvotes: 0

Patrick Mlr

Reputation: 2965

Are you looking for this?

I just added JavaScript to it, so if you scrolling down, the headermenu gets a new class shrink which have a css-rule to display: none the preheader and LogoSchool.

$(document).on("scroll", function() {
  if ($(document).scrollTop() > 100) {
    $(".headermenu").addClass("shrink");
  } else {
    $(".headermenu").removeClass("shrink");
  }
});

html {
  background-color: #fff;
}

body {
  margin: 0;
  padding: 0;
  background-color: #f6f6f6 !important;
}

.container {
  max-width: 985px;
  margin: 0 auto;
}

#LogoSchool {
  display: inline-block;
  width: 75%;
  height: auto;
}


/*Header section*/

#preheader .preheader1 a.spanish {
  display: inline;
  color: #0b5fb1;
  font-weight: bolder;
  position: relative;
  left: 350px;
  bottom: 7px;
}

#preheader .preheader1 .login {
  float: right;
  margin-right: 125px;
  margin-top: -15px;
}

#preheader .preheader1 .login .btn.btn-primary {
  background-color: #fff;
}


/*it doesnt change background color for btn*/

#preheader .preheader-hidden {
  display: none;
}

.socialmedia {
  float: left;
  margin: 3px auto;
}

.top-address {
  display: inline-block;
  font-family: "Comic Sans MS", cursive, sans-serif;
  font-size: 85%;
  text-align: center;
  margin: 0 auto;
  padding: 0 175px;
}

#topaddress {
  margin: 0 -300px;
}

.headermenu {
  background-color: #fff;
  padding-bottom: 1px;
  border: 2px solid #0000001A;
}

.navbar-fixed-top {
  z-index: 9999;
}

#title-header {
  margin: auto;
  box-sizing: border-box;
}

#title-header h1.title {
  display: inline;
  right: 220px;
  padding: 5px;
  /*eliminated position relative, bottom and left*/
  font-family: 'Francois One', sans-serif;
  font-size: 23px;
  font-weight: bold;
  letter-spacing: 2px;
}

#motto {
  display: inline-block;
  font-family: 'Damion', cursive;
  font-size: 15px;
  letter-spacing: 2px;
  /*eliminated position relative and bottom*/
  color: #000000b3;
}

.col-md-8 {
  margin-top: 25px;
}

@media screen and (max-width: 991px) {
  #preheader {
    display: none;
  }
  #motto {
    display: none;
  }
  .name-motto {
    display: inline-block;
    margin-left: 50%;
  }
  .navmenu .nav li {
    margin-right: 0;
  }
}

@media screen and (max-width: 766px) {
  .col-xs-12 {
    margin: 15px auto;
  }
}

.
/*Slideshow Pictures*/


/*Navigation Menu Style  */

.navmenu {
  margin: 0 auto;
}

.navmenu ul {
  float: left;
}

.navmenu li {
  display: inline-block;
  list-style: none;
  margin-right: 7px;
}

@media screen and (max-width: 990px) {
  .navmenu li {
    display: inline-block;
    margin-top: 5px;
  }
}

.navmenu a {
  text-decoration: none;
  display: inline-block;
  padding: 10px 5px;
  border: 2px solid #065aad;
  color: #065aad;
  font-size: 1.1em;
  text-transform: uppercase;
  background-color: #f89d00;
  font-weight: bold;
  transition-property: color, background-color;
  transition-duration: 1s;
}

.nav-pills>li>a {
  border-radius: 7px;
  padding: 7px 20px;
}

.nav-pills>li>a:hover,
.nav-pills>li>a:focus {
  background-color: #ff7f00;
}


/* Clear fix */

.clear {
  clear: both;
}

.clearfix:after {
  content: ".";
  display: none;
  height: 0;
  clear: both;
  visibility: hidden;
}

.clearfix {
  display: inline-block;
}


/* Home body container  */

div.container {
  padding: 0;
}

.row.block1>.col-md-4 {
  padding: 0;
}

h3.description {
  font-family: "Lucida Sans Unicode", sans-serif;
  font-size: 215%;
  font-weight: bold;
}

p.bodydescription {
  font-size: 25px;
  line-height: 150%;
  text-align: justify;
}

#block1 {
  margin-top: 280px;
}

.row.block1 {
  margin: 85px -10px;
  background-color: #ff7f00;
  ;
  box-sizing: border-box;
}

.jumbotron {
  background-color: white !important;
  margin-top: -50px;
  padding-top: 10px;
  padding-bottom: 10px;
}

.jumbotron a.button {
  text-decoration: none;
  font-size: 18px;
  padding: 11px;
  border: 2px solid #4d92e0;
  border-radius: 10px;
  background-color: #7eacf099;
  color: #0009;
}


/*About Body Content  */

.container .maincontainer {
  margin-top: 230px;
  margin-bottom: 70px;
  padding: 0 20px;
}

.maincontainer p.aboutprgh {
  font-size: 22px;
  line-height: 200%;
}

#half-column {
  border-left: 1px solid #0000001a;
}

.maincontainer h2.aboutheaders {
  font-weight: bold;
  font-size: 26px;
  color: #7d2be2cc;
  text-align: center;
}

#listreasons {
  margin: 0 15px;
  padding-bottom: 85px;
}

#listreasons .listreasons h2.aboutheaders {
  font-weight: bold;
  font-size: 26px;
  color: #7d2be2cc;
  text-align: center;
}

#listreasons .listreasons ul.reasonlist li {
  font-size: 22px;
  line-height: 200%;
  text-align: center;
}

#listreasons .listreasons ul.reasonlist li:before {
  content: "✔";
  margin-right: 4px;
}

.container .imgcontainer {
  margin-top: -50px;
  padding: 120px;
  background-image: url(../images/gueguense.jpg);
  background-repeat: no-repeat;
  background-size: cover;
  background-position: top center;
  opacity: 0.75;
  background-color: #000;
}

@media screen and (max-width: 991px) {
  .container .imgcontainer {
    display: none;
  }
}

#noparagraph {
  visibility: hidden;
}


/*Programs Content*/

span.rainbowtext {
  background-image: -webkit-gradient( linear, left top, right top, color-stop(0, #f22), color-stop(0.15, #f2f), color-stop(0.3, #22f), color-stop(0.45, #2ff), color-stop(0.6, #2f2), color-stop(0.75, #2f2), color-stop(0.9, #ff2), color-stop(1, #f22));
  background-image: gradient( linear, left top, right top, color-stop(0, #f22), color-stop(0.15, #f2f), color-stop(0.3, #22f), color-stop(0.45, #2ff), color-stop(0.6, #2f2), color-stop(0.75, #2f2), color-stop(0.9, #ff2), color-stop(1, #f22));
  color: transparent;
  -webkit-background-clip: text;
  background-clip: text;
  font-family: 'Coming Soon', cursive;
  font-weight: bold;
}

.container section .programsdividers {
  margin-top: 75px;
}

section .programsdividers span.schoolprogram {
  font-weight: bold;
  color: #de470be6;
}

section .programsdividers a.underlinelink {
  font-style: italic;
  text-decoration: underline;
}

.programbody .col-md-4 img.kidzprog {
  position: relative;
  bottom: 13px;
  transform: rotate(15deg);
}

#myschoollogo {
  width: 20%;
  float: left;
}


/*Programs 2 Content*/

section .programbody ul.levels {
  font-size: 22px;
}

section .programbody ul.levels li {
  display: inline-block;
}

#kidzlearning {
  margin: 35px auto;
}


/*Services Content*/

.container section .programbody h2.servheading {
  font-weight: bold;
}

section .programbody .row .col-md-12 h3.svcheadings,
section .programbody .servicesection h3.svcheadings {
  text-decoration: underline;
  display: inline-block;
}

section .servicesection {
  margin: 50px 0px;
  padding: 5px;
  box-sizing: border-box;
}

#guardabird {
  display: inline-block;
  width: 4%;
}

#vigoron {
  width: 75%;
}

.clearfix {
  overflow: auto;
}

#complab {
  opacity: 0.8;
  padding: 60px 0;
}

#trans-img {
  width: 25%;
  float: right;
}

#libraryimg {
  padding: 95px 0;
}


/* Tables Content*/

section table {
  margin: 30px auto;
}

.table>thead>tr>th {
  border-bottom: 1px solid black;
  background-color: #006fff80;
}

section table,
th,
td {
  border: 1px solid black;
}

section table,
td {
  text-align: right;
}

section table th {
  font-size: 20px;
  text-align: center;
}

section .programbody {
  margin-top: 260px;
}

p.aboutprgh {
  font-size: 22px;
  line-height: 200%;
  padding: 0 5px;
}

tbody td.tableparagraph {
  font-size: 20px;
  line-height: 200%;
}

@media screen and (max-width: 991px) {
  #myschoollogo {
    float: none;
    max-width: 55%;
    margin: 0 auto;
  }
  section img.kidzprog {
    transform: none !important;
    max-width: 50%;
    margin: 0 auto;
    box-sizing: border-box;
  }
  p.aboutprgh {
    padding: 0 12px;
  }
  section table {
    width: 85%;
    margin: 15px auto;
  }
}

@media screen and (max-width: 767px) {
  section table.table {
    width: 90%;
    margin: 15px auto;
  }
}


/* Events Calendar */

.container .calendar-table {
  margin: 10px auto;
}

.container .calendar-table thead th.calendarheader,
.container .calendar-table thead th.nobackgroundcolor {
  font-size: 15px;
  background-color: #b2cef280;
}

.container .calendar-table thead th a.month-title {
  font-size: 22px;
  font-family: Rockwell, "Courier Bold", Courier, Georgia, Times, "Times New Roman", serif;
  color: #000;
}

.container .programbody ul {
  list-style: square;
}

.container .programbody ul li {
  font-size: 1.15em;
  line-height: 170%;
}

#list-holidays {
  position: relative;
  left: 300px;
  bottom: 5px;
}


/*Contacts*/

.container .col-md-6 .contactcontent {
  padding: 50px;
  font-size: 1.1em;
}

.container .programbody .col-md-6 table#tablecontact tbody .tableparagraph {
  padding: 20px 85px;
}


/* Footer */

footer {
  background-color: #065aad;
}

#signup {
  font-family: 'Lato', 'Helvetica', arial, serif;
  font-size: 16px;
  font-weight: bolder;
  color: white;
  margin-top: 20px;
  margin-left: 3px;
}

label {
  display: none;
}

.formwrapper {
  padding-left: 3px;
  box-sizing: border-box;
}

input[type="email"] {
  padding: 5px 0px;
  border: 1px solid #CDCDCD;
}

.hidden-label {
  overflow: hidden;
  visibility: hidden;
}

.btn {
  margin-top: 1px;
  padding: 3px 5px;
}

.btn-default {
  background-color: #ec9412;
  font-family: 'Lato', 'Helvetica', arial, serif;
  font-size: 87%;
}

.social-media {
  margin-top: 20px:;
}

p.followus {
  margin-top: 20px;
  color: #000;
  font-weight: bolder;
}

h5.minilist {
  margin-top: 20px;
  color: #000;
  font-weight: bolder;
}

.minifooter li {
  /*list-style: circle;*/
  margin: 7px;
  font-weight: bold;
}

ul {
  list-style: none;
}

.minifooter li:before {
  content: "+";
  margin-right: 4px;
}

.minifooter li a {
  color: #fff;
  text-decoration: none;
}

footer .mainfooter ul.minifooter {
  text-align: left;
  margin: 0;
  padding: 0;
}

.minicontact {
  color: #fff;
  font-size: 15px;
  line-height: 105%;
}

#minicontact {
  color: #e6b016;
}

.miniaddress {
  margin-top: 20px;
  float: left;
  padding: 0 7px 0 0;
  font-weight: bold;
}

#subfooter {
  display: inline-block;
  padding: 20px 0px;
}

footer .subfooter span.minisubfooter {
  display: block;
  font-size: 13px;
  font-weight: bold;
  float: right;
  line-height: 25%;
}


/* Media queries entries  */

@media screen and (max-width: 991px) {
  footer .col-md-3 {
    width: 100%;
    display: inline-block;
    text-align: center;
    margin-top: 10px;
  }
  footer .col-md-3 .socialmedia {
    float: none;
  }
  footer .mainfooter ul.minifooter {
    text-align: center;
    margin: 0;
    padding: 0;
  }
  footer .col-md-3 .miniaddress {
    float: none;
  }
}

.shrink>#preheader,
.shrink #LogoSchool {
  display: none;
}


/*   */

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!DOCTYPE HTML>
<html lang="en">

<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1">


  <title>International Language School | ILA</title>

  <!-- Latest compiled and minified CSS -->
  <!-- Latest compiled and minified CSS -->

  <!-- Latest compiled and minified CSS -->
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
  <link href="https://fonts.googleapis.com/css?family=Francois+One" rel="stylesheet">
  <link href="https://fonts.googleapis.com/css?family=Damion" rel="stylesheet">
  <link href="https://fonts.googleapis.com/css?family=Lato" rel="stylesheet">
  <link href="css/style.css" rel="stylesheet">
  <script type="text/javascript" src="js/jquery.js"></script>
  <script type="text/javascript" src="js/cycle2.js"></script>
  <script type="text/javascript" src="js/script"></script>

</head>

<body>

  <!--to hide Logo Image and to keep only Logo name title and motto when rescreen to small-->


  <div class="headermenu navbar navbar-fixed-top">
    <div id="preheader">
      <div class="preheader1">
        <div class="row">
          <div class="container">
            <div class="socialmedia">
              <a href="http://www.facebook.com"><img src="images/apple-touch-icon-precomposed.png" width="20" height="20"></a>
              <a href="http://www.twitter.com"><img src="images/Twitter_icon.png" width="20" height="20"></a>
              <a href="http://www.google.com"><img src="images/GooglePlus-logos-02.png" width="20" height="20"></a>
            </div>
            <!--end of div socialmedia-->

            <p class="top-address">Americas #3, Sector D, Anden 4, Casa Comunitaria. Managua, Nicaragua</p>
            <span class="top-address"> <span class="glyphicon glyphicon-earphone" aria-hidden="true"></span> +505.22532768</span> <span class="top-address" id="topaddress"><span class="glyphicon glyphicon-envelope" aria-hidden="true"></span> <a href="mailto:[email protected]">[email protected]</a></span>

            <a href="#" class="spanish">En EspaÑol</a>
            <span class="login btn btn-primary">Log In</span>
          </div>
          <!--end of div container-->
        </div>
        <!--end of div row-->
      </div>
      <!--end of div preheader1-->
    </div>
    <!--end of div preheader-->
    <div class="container">

      <div id="title-header">
        <div class="row">
          <div class="col-xs-6 col-md-4">
            <!--eliminated the previous periods before all col-->

            <a href="Home.html"><img class="img-responsive hidden-xs hidden-sm" alt="Responsive image" src="images/Final-ILA-Logo.jpg" id="LogoSchool" alt="School Logo"></a>
            <!--how to "hide" image logo when size becomes small-->
          </div>
          <!--end of .col-xs-6 .col-md-4-->

          <div class="col-xs-12 col-md-8">
            <div class="name-motto">
              <h1 class="title">International Language Academy-ILA</h1>
              <span id="motto">Where there are no barriers</span>
              <!--to keep tittle and motto when resized to small and leave out img logo -->
            </div>
            <!--end of div name-motto-->

          </div>
          <!--end of div .col-xs-12 .col-md-8-->

        </div>
        <!--end of div row-->

      </div>
      <!--end div title-header-->

    </div>
    <!--end of div container-->


    <!--align center the navigation menu-->
    <!--how to adjust padding and margins for navigation when screen is small and medium-->
    <!--to have the nav menu and header fixed when scrolling up and down-->
    <div class="container">
      <nav class="navmenu">
        <ul class="nav nav-pills center-pills">
          <li><a href="#">Home</a></li>
          <li><a href="#">About Us</a></li>
          <li><a href="#">Programs & Classes</a></li>
          <li><a href="#">Services</a></li>
          <li><a href="#">Events</a></li>
          <li><a href="#">Contact</a></li>
        </ul>
      </nav>
    </div>
    <!--end of div container-->

  </div>
  <!-- end of div headermenu-->



  <div class="container">
    <div class="row block1" id="block1">
      <div class="col-md-8">

        <h3 class="description">Ready for the Challenge?</h3>
        <p class="bodydescription">Inter Language School is the only school in the country that gives the tools to learn the language you need in a fun, practical and affordable way.</p>

      </div>
      <!--end of col md 8-->

      <div class="col-md-4 firstimg">

        <img class="img-responsive" src="images/goal_setting_plan.png">
        <!--to adjust image to cover the remaining bottom padding-->

      </div>
      <!--end of col md 4-->
    </div>
    <!--end of div row-->

    <div class="row block1">
      <div class="col-md-4 secondimg">
        <img class="img-responsive" src="images/virtual-classroom.jpg">
        <!--to adjust image to cover the remaining bottom padding-->
      </div>
      <!--end of col md 4-->

      <div class="col-md-8">

        <h3 class="description">We're Different!</h3>
        <p class="bodydescription">We care that our students get a satisfactory level of fluency to communicate. Our students see the difference. </p>

      </div>
      <!--end of col md 8-->
    </div>
    <!--end of div row-->

    <div class="row block1">
      <div class="col-md-8">

        <h3 class="description">Exposure</h3>
        <p class="bodydescription">International exposure and language encouragement to speak the language at all times.</p>

      </div>
      <!--end of col md 8-->

      <div class="col-md-4 thirdimg">

        <img class="img-responsive" src="images/Saludos-.jpg">
        <!--to adjust image to cover the remaining right padding-->


      </div>
      <!--end of col md 4-->
    </div>
    <!--end of div row-->

    <div class="jumbotron">
      <div class="container">
        <h3 class="description">Special Programs</h3>
        <p class="bodydescription">Need to learn banking, business, medical terms for your profession? Going to a conference but need to communicate the language with your peers? We create special group classes for your needs.</p>
        <a class="button" href="#">Learn more</a>

      </div>
      <!--end of div container-->
    </div>
    <!--end of div jumbotron-->
    <!--to keep the same aligment to the same visual margins and paddings the above small containers and when to keep it when screen size is small-->


    <footer>
      <div class="mainfooter">
        <div class="container">
          <div class="row">
            <div class="col-md-3">
              <h5 id="signup"> Sign Up For Our Newsletter </h5>
              <form class="subscription">

                <div class="formwrapper">
                  <label for="Youremail" class="hidden-label">Your Email</label>
                  <input id="Youremail" type="email" name="email" placeholder="Email">
                  <button class="btn btn-default">Subscribe</button>
                  <!--make this form responsive-->
                </div>
                <!--end of div formwrapper-->

              </form>
            </div>
            <!--end of div first col md 3-->

            <div class="col-md-3">
              <div class="social-media">

                <p class="followus">Follow us on:</p>

                <div class="socialmedia">
                  <a href="http://www.facebook.com"><img src="images/apple-touch-icon-precomposed.png" width="35" height="35"></a>
                  <a href="http://www.twitter.com"><img src="images/Twitter_icon.png" width="35" height="35"></a>
                  <a href="http://www.google.com"><img src="images/GooglePlus-logos-02.png" width="35" height="35"></a>
                </div>
                <!--end of div socialmedia-->
              </div>
              <!--end of div social-media-->

            </div>
            <!--end of col md 3-->

            <div class="col-md-3">
              <h5 class="minilist">Quick Links</h5>
              <ul class="minifooter">
                <li><a href="#">EspaÑol</a></li>
                <li><a href="#">Programs &amp; Classes</a></li>
                <li><a href="#">Services</a></li>
                <li><a href="#">Events</a></li>
                <li><a href="#">Jobs</a></li>
                <li><a href="#">Contact</a></li>
              </ul>
            </div>

            <div class="col-md-3">
              <div class="miniaddress">
                <p class="minicontact">Americas #3, Sector D, Anden 4, Casa Comunitaria.</p>
                <p class="minicontact">Managua, Nicaragua</p>
                <p class="minicontact">+505.22532768</p>
                <a href="mailto:[email protected]" id="minicontact">[email protected]</a>
              </div>
              <!--end of class miniaddress-->

            </div>
            <!--end of last col md 3-->

          </div>
          <!--end of div row-->
        </div>
        <!--end of div container-->

      </div>
      <!--end of mainfooter-->

      <div class="subfooter">
        <div class="row" id="subfooter">
          <div class="container">
            <span class="minisubfooter">This is a practice Webpage</span>
            <span class="minisubfooter"> Designed by Alfredo DSw &reg;</span>
          </div>
          <!--end of class container-->
        </div>
        <!--end of class row-->
      </div>
      <!--end of div subfooter-->

    </footer>

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
    <script type="text/javascript" src="js/script.js"></script>
</body>

</html>

Upvotes: 0

Khan Afzal

Reputation: 167

   $(window).scroll(function(){
          var scrolltop = $(this).scrollTop();
           if(scrolltop >=100){
                $('#pre-header,#id-of-your-logo').css('display','none');
           }
           else{
                $('#pre-header,#id-of-your-logo').css('display','block');
           }

Hope this helps..

Upvotes: 1

Shrinking header when scrolling down in jquery

Answers (3)

Related Questions