Support » Themes and Templates » Extra css header

  • Resolved extreme4all

    (@extreme4all)


    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)

    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)

    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 2 years, 3 months ago by extreme4all.
    Thread Starter extreme4all

    (@extreme4all)

Viewing 3 replies - 1 through 3 (of 3 total)
  • The topic ‘Extra css header’ is closed to new replies.