Title: Collapsing header effect!
Last modified: August 21, 2016

---

# Collapsing header effect!

 *  [oliversyvaniemi](https://wordpress.org/support/users/oliversyvaniemi/)
 * (@oliversyvaniemi)
 * [12 years, 5 months ago](https://wordpress.org/support/topic/collapsing-header-effect/)
 * Hello im trying to create a collapsing header such as [this](http://line25.com/tutorials/how-to-create-a-simple-collapsing-header-effect).
   However i am struggling to understand and transfer it to my [Landscape](http://wordpress.org/themes/landscape)
   child theme.. [here](http://xn--detlrendefngsel-0lbg.org/for-kommunerne/) is 
   a landscape theme which has the effect in use for reference. I don’t a domain
   yet so i cant link it here but below is the code from my style.css that is related
   to it.
 * Any help would be greatly appreciated!
 *     ```
       /* =Header
       ----------------------------------------------- */
   
       #masthead {
       	background:#111 url(images/default-header.jpg ) center 0 no-repeat;
       	margin-top: 0;
       	padding-bottom: 0;
       	max-width: 100%;
       	height: auto;
       	position: relative;
       	background-attachment: fixed;
       }
       .admin-bar #masthead {
       	background-position: center 28px;
       }
       #masthead #logo{
       	width:100%;
       	margin:0 auto;
       	text-align:center;
       	position:absolute;
       	top:250px;
       }
   
       h1.site-title {
       	font-size: 0px;
       	font-style: normal;
       	padding:0;
       	font-weight:normal;
       	line-height: 1.2;
       	position: relative;
       	font-family: georgia, serif;
       	text-shadow:1px 1px #111;
       }
       .site-title a,
       .site-title a:hover,
       .site-title a:visited,
       .site-description {
       	color: #fff;
       	text-decoration:none;
       }
       .site-title a:hover{
       	filter:alpha(opacity=90);
       	-moz-opacity:0.9;
       	-khtml-opacity: 0.9;
       	opacity: 0.9;
       }
       h2.site-description {
       	font-style: italic;
       	padding: 0;
       	max-width: 70%;
       	margin: 0 auto;
       	text-align: center;
       	font-size: 17px;
       	font-family:georgia, arial;
       }
   
       /* =Menu
       ----------------------------------------------- */
   
       .main-navigation {
       	display: block;
       	float: left;
       	width: 100%;
       	font-family: georgia, arial;
       	text-transform:uppercase;
       	background:#000;
       	z-index: 99999;
       	-moz-box-shadow: 0 1px 1px rgba(0,0,0,0.2);
       	-webkit-box-shadow: 0 1px 1px rgba(0,0,0,0.2);
       	box-shadow: 0 1px 1px rgba(0,0,0,0.2);
       	clear:left;
       	font-size:14px;
       }
   
       .main-navigation a{
       	color:#fff;
       }
       .main-navigation ul {
       	float: right;
           list-style: none;
           margin: 0;
           padding-left: 0;
           position: relative;
           right: 50%;
       }
       .main-navigation ul li {
       	display: inline-block;
       	position: relative;
       	left: 50%;
       }
       .main-navigation ul li:after {
       	color: #666;
       	content: "|";
       	display: inline;
       	font-size: 12px;
       	margin: 0 0 0 17px;
       	font-style:italic;
       }
       .main-navigation ul li:last-child:after {
       	content: normal;
       	margin: 0;
       	padding: 0;
       }
       .main-navigation ul ul li {
       	float: left;
       	left: auto;
       	font-style:normal;
       }
       .main-navigation ul a {
       	display: inline-block;
       	text-decoration: none;
       	padding: 10px 6px 10px 21px;
       	font-style:normal;
       }
       .main-navigation ul ul a {
       	color: #999;
       }
       .main-navigation ul ul {
       	-moz-box-shadow: 0 1px 1px rgba(0,0,0,0.2);
       	-webkit-box-shadow: 0 1px 1px rgba(0,0,0,0.2);
       	box-shadow: 0 1px 1px rgba(0,0,0,0.2);
       	background: #000;
       	display: none;
       	float: left;
       	position: absolute;
       		top: auto;
       		left: 10px;
       		right: auto;
       	text-align: left;
       	z-index: 99999;
       }
   
       .main-navigation ul ul ul {
       	left: 100%;
       	top: 0;
       }
       .main-navigation ul ul a {
       	width: 150px;
       	font-size: 15px;
       	padding: 7px 15px;
       }
       .main-navigation ul ul li:after {
       	content: normal;
       	margin: 0;
       	padding: 0;
       }
       .main-navigation li:hover > a {
       	color: #999;
       }
       .main-navigation ul ul :hover > a {
       	color: #fff;
       }
       .main-navigation ul ul a:hover {
       }
       .main-navigation ul li:hover > ul {
       	display: block;
       }
       .main-navigation li.current_page_item a,
       .main-navigation li.current-menu-item a {
       	color: #999;
       }
   
       /* Small menu */
       .main-small-navigation {
       	background:#000;
       	margin: 0;
       	padding: 0.5em 0 0;
       	z-index:99999;
       	position:fixed;
       	width:100%;
       }
       .menu-toggle {
       	color: #fff;
       	cursor: pointer;
       	font-size: 20px;
       	text-align: center;
       }
       .main-small-navigation .menu {
       	display: none;
       }
       .main-small-navigation .menu,
       .main-small-navigation .menu a {
       	color: #fff;
       }
       .main-small-navigation ul{
       	z-index:9999;
       }
       .main-small-navigation ul li{
       	list-style-type:none;
       }
   
       /* =Content
       ----------------------------------------------- */
   
       .sticky {
       }
       .entry-title, .entry-title a{
       	text-decoration:none;
       	font-size:38px;
       	color:#000;
       	text-transform:capitalize;
       	text-align:center;
       }
       .entry-title a:hover{
       	text-decoration:none;
       	color:#666;
       }
       .archive-title{
       	margin-bottom:15px;
       	font-size:22px;
       	text-transform:uppercase;
       	color:#999;
       	text-align:center;
       }
       .hentry {
       	margin:0 0 80px 0;
       	padding:0 0 80px;
       	border-bottom:4px double #e6e6e6;
       }
       .entry-meta {
       	clear: both;
       	text-align:center;
       	font-family: georgia, serif;
       	font-style:italic;
       	margin:20px 0;
       }
       .entry-meta a{
       	text-decoration:none;
       	color:#999;
       }
       .sep{
       	color:#e6e6e6;
       	font-style:italic;
       }
       .byline {
       	display: none;
       }
       .single .byline,
       .group-blog .byline {
       	display: inline;
       }
       .entry-content,
       .entry-summary {
       	margin: 1.5em 0 0;
       }
       .page-links {
       	clear: both;
       	margin: 0 0 1.5em;
       }
       .single-thumbnail{
       	margin:20px 0;
       }
       .single-thumbnail img:hover{
       	filter:alpha(opacity=90);
       	-moz-opacity:0.9;
       	-khtml-opacity: 0.9;
       	opacity: 0.9;
       }
       ```
   

Viewing 15 replies - 1 through 15 (of 23 total)

1 [2](https://wordpress.org/support/topic/collapsing-header-effect/page/2/?output_format=md)
[→](https://wordpress.org/support/topic/collapsing-header-effect/page/2/?output_format=md)

 *  [Andrew Nevins](https://wordpress.org/support/users/anevins/)
 * (@anevins)
 * WCLDN 2018 Contributor | Volunteer support
 * [12 years, 5 months ago](https://wordpress.org/support/topic/collapsing-header-effect/#post-4412534)
 * Let’s see your site
 *  [Andrew Nevins](https://wordpress.org/support/users/anevins/)
 * (@anevins)
 * WCLDN 2018 Contributor | Volunteer support
 * [12 years, 5 months ago](https://wordpress.org/support/topic/collapsing-header-effect/#post-4412536)
 * Isn’t this effect all down to 1 line of CSS, the background-attachment style?
   
   [https://developer.mozilla.org/en-US/docs/Web/CSS/background-attachment](https://developer.mozilla.org/en-US/docs/Web/CSS/background-attachment)
 *  Thread Starter [oliversyvaniemi](https://wordpress.org/support/users/oliversyvaniemi/)
 * (@oliversyvaniemi)
 * [12 years, 5 months ago](https://wordpress.org/support/topic/collapsing-header-effect/#post-4412547)
 * Dont have a domain so its tricky to show it to you does the similar site i linked
   help at all? 🙁 well it is already fixed.. what am i missing?
 *     ```
       #masthead {
       	background:#111 url(images/default-header.jpg ) center 0 no-repeat;
       	margin-top: 0;
       	padding-bottom: 0;
       	max-width: 100%;
       	height: auto;
       	position: relative;
       	background-attachment: fixed;
       ```
   
 *  Thread Starter [oliversyvaniemi](https://wordpress.org/support/users/oliversyvaniemi/)
 * (@oliversyvaniemi)
 * [12 years, 5 months ago](https://wordpress.org/support/topic/collapsing-header-effect/#post-4412552)
 * would it be an idea to compare [this ](http://xn--detlrendefngsel-0lbg.org/for-kommunerne/)
   sites css with the default i gave earlier?
 *  [Andrew Nevins](https://wordpress.org/support/users/anevins/)
 * (@anevins)
 * WCLDN 2018 Contributor | Volunteer support
 * [12 years, 5 months ago](https://wordpress.org/support/topic/collapsing-header-effect/#post-4412562)
 * We just need to see a page with the issue, can you replicate your issue on a 
   sandbox instead: [http://cssdesk.com](http://cssdesk.com) ?
 *  Thread Starter [oliversyvaniemi](https://wordpress.org/support/users/oliversyvaniemi/)
 * (@oliversyvaniemi)
 * [12 years, 5 months ago](https://wordpress.org/support/topic/collapsing-header-effect/#post-4412569)
 * sorry i dont know how to do that :///
 *  [Andrew Nevins](https://wordpress.org/support/users/anevins/)
 * (@anevins)
 * WCLDN 2018 Contributor | Volunteer support
 * [12 years, 5 months ago](https://wordpress.org/support/topic/collapsing-header-effect/#post-4412572)
 * After you’ve created your CSSDesk demo press the “Share” button: [http://snag.gy/AqvRM.jpg](http://snag.gy/AqvRM.jpg)–
   Then a URL will generate and you’ll be able to share it with us: [http://cssdesk.com/C79Lf](http://cssdesk.com/C79Lf)(
   try scrolling on that demo)
 *  Thread Starter [oliversyvaniemi](https://wordpress.org/support/users/oliversyvaniemi/)
 * (@oliversyvaniemi)
 * [12 years, 5 months ago](https://wordpress.org/support/topic/collapsing-header-effect/#post-4412584)
 * i’m stuck on the creating demo part.. im a complete noob sorry! should i give
   you the entire style.css or?
 *  [Andrew Nevins](https://wordpress.org/support/users/anevins/)
 * (@anevins)
 * WCLDN 2018 Contributor | Volunteer support
 * [12 years, 5 months ago](https://wordpress.org/support/topic/collapsing-header-effect/#post-4412594)
 * Open your website in your browser as you do normally.
    Right click on the page
   where applicable and select “View source”. Copy all of that code and put it in
   the “HTML” section in your CSSDesk page.
 * If still the CSSDesk page has no styling (if it’s referencing CSS files only 
   available on your local machine) you need to copy out the code in the CSS files
   and paste them into the “CSS” section in your CSSDesk page.
 *  Thread Starter [oliversyvaniemi](https://wordpress.org/support/users/oliversyvaniemi/)
 * (@oliversyvaniemi)
 * [12 years, 5 months ago](https://wordpress.org/support/topic/collapsing-header-effect/#post-4412600)
 * alright did that! i couldnt find the url when i clicked share.. this is what 
   came up “[http://cssdesk.com/#&#8221](http://cssdesk.com/#&#8221); ? Heres the
   HTML though!
 * _[Excessive code removed]_
 *  [Andrew Nevins](https://wordpress.org/support/users/anevins/)
 * (@anevins)
 * WCLDN 2018 Contributor | Volunteer support
 * [12 years, 5 months ago](https://wordpress.org/support/topic/collapsing-header-effect/#post-4412603)
 * Please see the “Share” button I’ve outlined in red [http://snag.gy/AqvRM.jpg](http://snag.gy/AqvRM.jpg)
 *  Thread Starter [oliversyvaniemi](https://wordpress.org/support/users/oliversyvaniemi/)
 * (@oliversyvaniemi)
 * [12 years, 5 months ago](https://wordpress.org/support/topic/collapsing-header-effect/#post-4412604)
 * yeah i pressed that one! where is the link supposed to be?
 *  [Andrew Nevins](https://wordpress.org/support/users/anevins/)
 * (@anevins)
 * WCLDN 2018 Contributor | Volunteer support
 * [12 years, 5 months ago](https://wordpress.org/support/topic/collapsing-header-effect/#post-4412605)
 * Here: [http://snag.gy/6rcZY.jpg](http://snag.gy/6rcZY.jpg) (outlined in red)
 *  Thread Starter [oliversyvaniemi](https://wordpress.org/support/users/oliversyvaniemi/)
 * (@oliversyvaniemi)
 * [12 years, 5 months ago](https://wordpress.org/support/topic/collapsing-header-effect/#post-4412607)
 * [http://sv.tinypic.com/r/2ufx40k/5](http://sv.tinypic.com/r/2ufx40k/5) clicked
   share and no link came up!!??
 *  [Andrew Nevins](https://wordpress.org/support/users/anevins/)
 * (@anevins)
 * WCLDN 2018 Contributor | Volunteer support
 * [12 years, 5 months ago](https://wordpress.org/support/topic/collapsing-header-effect/#post-4412609)
 * You need to find some way of producing a webpage with the issue for us to diagnose.

Viewing 15 replies - 1 through 15 (of 23 total)

1 [2](https://wordpress.org/support/topic/collapsing-header-effect/page/2/?output_format=md)
[→](https://wordpress.org/support/topic/collapsing-header-effect/page/2/?output_format=md)

The topic ‘Collapsing header effect!’ is closed to new replies.

## Tags

 * [banner](https://wordpress.org/support/topic-tag/banner/)
 * [collapsing](https://wordpress.org/support/topic-tag/collapsing/)
 * [header](https://wordpress.org/support/topic-tag/header/)

 * 23 replies
 * 2 participants
 * Last reply from: [oliversyvaniemi](https://wordpress.org/support/users/oliversyvaniemi/)
 * Last activity: [12 years, 5 months ago](https://wordpress.org/support/topic/collapsing-header-effect/page/2/#post-4412663)
 * Status: not resolved

## Topics

### Topics with no replies

### Non-support topics

### Resolved topics

### Unresolved topics

### All topics