Need Help How to Make the Header Transparent for Metro Theme

Community Forums Forums Design Tips and Tricks Need Help How to Make the Header Transparent for Metro Theme

This topic is: not resolved

Tagged: ,

This topic contains 3 replies, has 2 voices, and was last updated by  Davinder Singh Kainth 1 year, 4 months ago.

Viewing 4 posts - 1 through 4 (of 4 total)
  • Author
    Posts
  • #89281

    rockyfp
    Member

    I’d like to make the header area transparent (not removing it) so that the visitors can see the header part of background image. Tried some tips found over the internet and none worked. How do I do that? And, how do I remove the header logo/image.

    Thanks a lot.

    http://www.thestoneboy.com
    #89302

    This will involve changing few things in style.css file. To get started, look for following code:

    /*
    Site Header
    ---------------------------------------------------------------------------------------------------- */
    
    .site-header {
    	background-color: #fff;
    	padding: 0;
    	overflow: hidden;
    }
    
    .header-image .site-header {
    	padding: 0;
    }

    Change it to following:

    /*
    Site Header
    ---------------------------------------------------------------------------------------------------- */
    
    .site-header {
    	background:transparent;
    	padding: 0;
    	overflow: hidden;
    }
    
    .header-image .site-header {
    	padding: 0;
    }

    #89306

    rockyfp
    Member

    Hi Davinder,

    Thanks for your help.
    Changing background: to “transparent” doesn’t make the header transparent? Anything else I need to change?

    Thanks again.

    Rocky

    #89319

    You need to check following classes for background (as white color) code.

    body {
    	background-color: #fff;
    	color: #222;
    	font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
    	font-size: 16px;
    	font-size: 1.6rem;
    	font-weight: 300;
    	line-height: 1.625;
    }
    
    /* Site Containers
    --------------------------------------------- */
    
    .site-container {
    	background-color: #fff;
    	margin: 32px auto;
    	margin: 3.2rem auto;
    	max-width: 1140px;
    	overflow: hidden;
    	padding: 36px;
    	padding: 3.6rem;
    }
    Site Header
    ---------------------------------------------------------------------------------------------------- */
    
    .site-header {
    	background-color: #fff;
    	padding: 0;
    	overflow: hidden;
    }
    
    .header-image .site-header {
    	padding: 0;
    }

    Comment out background-color code line and then check. For example:
    Make background-color: #fff;
    to
    //background-color: #fff;


Viewing 4 posts - 1 through 4 (of 4 total)

You must be logged in to reply to this topic.