Extra css header

  • Resolved extreme4all

    (@extreme4all)


    7 years, 6 months ago

    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)
    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
    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 to see the link]

Viewing 3 replies - 1 through 3 (of 3 total)
  • Thread Starter extreme4all

    (@extreme4all)

    7 years, 6 months ago

    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

    (@extreme4all)

    7 years, 6 months ago

    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.
    Thread Starter extreme4all

    (@extreme4all)

    7 years, 5 months ago

    twentyseventeen header front & other pages
    by inWordPress

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

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