Title: Extra css header
Last modified: December 3, 2018

---

# Extra css header

 *  Resolved [extreme4all](https://wordpress.org/support/users/extreme4all/)
 * (@extreme4all)
 * [7 years, 6 months ago](https://wordpress.org/support/topic/extra-css-header/)
 * I want a shadow over the header image, some dynamic feature (connecting lines)
   and i wanted it to be scaled 50vh. this works for the home page but doesnt for
   the other pages what do i have to do? ps i tried to remove the front-page classes
   in the css just seemed to break everything.
    ([http://www.akkade.be](http://www.akkade.be))
   Extra CSS
 *     ```
       .wp-custom-header{
       	outline: 100vh solid rgba(35, 220, 160, 0.6) !important;
       	  outline-offset: -100vh;
       	  overflow: hidden;
       	  position: relative;
       	height:50vh;
   
       }
       .has-header-image .custom-header-media img, .has-header-video .custom-header-media video, .has-header-video .custom-header-media iframe{
       	  position:static;
       }
       /*Computer screen */
       @media screen and (min-width: 48em) {
       	.twentyseventeen-front-page.has-header-image .custom-header-image {
       	/*height: 1200px;*/
       	/*height: 100vh;*/
       	height: 50vh;
       	/*max-height: 100%;*/
       	/*overflow: hidden;*/
       	}
       }
   
       /* Mobile screen*/
       .has-header-image.twentyseventeen-front-page .custom-header {
       	/*display: table;*/
       	/*height: 300px;*/
       	/*height: 75vh;*/
       	height: 50vh;
       	/*width: 100%;*/
       }
   
       /* Computer screen with logged in user and admin bar showing on front end*/
       @media screen and (min-width: 48em) {
       	.admin-bar.twentyseventeen-front-page.has-header-image .custom-header-image {
       	/*height: calc(100vh - 32px);*/
       	height: calc(50vh - 32px);
       	}
       }
       .site-branding {
       	text-align:center;
       }
       .site-branding {
       	text-align:center;
       }
       #canvas{
           position:absolute;
           top:0px;
           left:0px;
   
       }
       ```
   
 * i moved (template-parts/header/site-branding.php):
    `<?php the_custom_logo();?
   >` inside `<div class="site-branding-text"> //HERE </div>`
 * added some javascript for the canvas (width & height = getElementById(“custom-
   header”). width & height
    [https://codepen.io/LeonGr/pen/yginI](https://codepen.io/LeonGr/pen/yginI)
   and added the canvas under custom-header and gave custom-header id=”custom-header”
   in the template-parts/header/header-image.php
 * My problem now is that this does not work on anything other then the first page.
 * The page I need help with: _[[log in](https://login.wordpress.org/?redirect_to=https%3A%2F%2Fwordpress.org%2Fsupport%2Ftopic%2Fextra-css-header%2F%3Foutput_format%3Dmd&locale=en_US)
   to see the link]_

Viewing 3 replies - 1 through 3 (of 3 total)

 *  Thread Starter [extreme4all](https://wordpress.org/support/users/extreme4all/)
 * (@extreme4all)
 * [7 years, 6 months ago](https://wordpress.org/support/topic/extra-css-header/#post-10942056)
 * For some reason when i look to the header it scales correctly to my 50vh but 
   on the homepage, it has the navigate-top included and on the others not
 *  Thread Starter [extreme4all](https://wordpress.org/support/users/extreme4all/)
 * (@extreme4all)
 * [7 years, 6 months ago](https://wordpress.org/support/topic/extra-css-header/#post-10944809)
 * this solves one of the problems: (global.js:90)
 *     ```
       function adjustHeaderHeight() {
       		if ( 'none' === $menuToggle.css( 'display' ) ) {
       			$branding.css( 'margin-bottom', navigationOuterHeight );
       			// The margin should be applied to different elements on front-page or home vs interior pages.
       			/*
       			if ( isFrontPage ) {
       				$branding.css( 'margin-bottom', navigationOuterHeight );
       			} else {
       				$customHeader.css( 'margin-bottom', navigationOuterHeight );
       			}
       			*/
       		} else {
       			$customHeader.css( 'margin-bottom', '0' );
       			$branding.css( 'margin-bottom', '0' );
       		}
       	}
       ```
   
    -  This reply was modified 7 years, 6 months ago by [extreme4all](https://wordpress.org/support/users/extreme4all/).
 *  Thread Starter [extreme4all](https://wordpress.org/support/users/extreme4all/)
 * (@extreme4all)
 * [7 years, 5 months ago](https://wordpress.org/support/topic/extra-css-header/#post-10952383)
 * > [twentyseventeen header front & other pages](https://www.reddit.com/r/Wordpress/comments/a316lt/twentyseventeen_header_front_other_pages/)
   > 
   > by in[WordPress](https://www.reddit.com/r/Wordpress/)

Viewing 3 replies - 1 through 3 (of 3 total)

The topic ‘Extra css header’ is closed to new replies.

## Tags

 * [Extra CSS](https://wordpress.org/support/topic-tag/extra-css/)
 * [header](https://wordpress.org/support/topic-tag/header/)
 * [image](https://wordpress.org/support/topic-tag/image/)

 * 3 replies
 * 1 participant
 * Last reply from: [extreme4all](https://wordpress.org/support/users/extreme4all/)
 * Last activity: [7 years, 5 months ago](https://wordpress.org/support/topic/extra-css-header/#post-10952383)
 * Status: resolved

## Topics

### Topics with no replies

### Non-support topics

### Resolved topics

### Unresolved topics

### All topics